<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>资产模型基本信息</span>
      </div>
      <el-descriptions border :column="2">
        <el-descriptions-item label="表名称">{{ tableInfo.tableName }}</el-descriptions-item>
        <el-descriptions-item label="表备注">{{tableInfo.tableAnnotation}}</el-descriptions-item>
        <el-descriptions-item label="数据量">{{ tableInfo.recordCount }}</el-descriptions-item>
        <el-descriptions-item label="是否核心">
          <el-tag size="small">是</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card style=" margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span>资产模型详细信息</span>
      </div>
      <el-table
        :data="assetsModelList"
        style="width: 100%;">
        <el-table-column prop="fieldsName" label="名称" />
        <el-table-column prop="fieldsAnnotation" label="注释" />
        <el-table-column prop="isDictionary" label="是否主键" >
          <template slot-scope="scope">
            <el-tag size="small" :type="scope.row.isDictionary === 1 ? 'success' : ''">
              {{scope.row.isDictionary}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="baseType" label="类型" />
        <el-table-column prop="javaType" label="映射类型" />
        <el-table-column prop="fieldsLength" label="长度" />
        <el-table-column prop="decimalPlace" label="小数位" />
        <el-table-column prop="isEmpty" label="是否为空"  >
          <template slot-scope="scope">
            <el-tag size="small" :type="scope.row.isNull === 1 ? 'success' : 'danger'">
              {{scope.row.isEmpty}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="defaultValue" label="默认值" />
        <el-table-column prop="isDict" label="是否字典" >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isDictionary === 'Y'" size="small" type="success">
              {{scope.row.isDictionary}}
            </el-tag>
            <el-tag v-if="scope.row.isDictionary === 'N'" size="small" type="error">
              {{scope.row.isDictionary}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="dictionaryName" label="映射字典" >
          <template slot-scope="scope">
            <div @mouseenter="getDictionaryInfoList(scope.row)" @mouseout="removeDiv">
              <el-tag slot="reference" >{{scope.row.dictionaryName}}</el-tag>
            </div>
            <el-popover
              v-if="flagId == scope.row.id"
              placement="left"
              v-model="isOpen"
              trigger="hover"
              width="200">
              <el-table  :data="tagSelectDictionaryInfoList">
                <el-table-column property="dictionaryInfoTag" label="字典标签"/>
                <el-table-column property="dictionaryInfoValue" label="字典值"/>
              </el-table>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="操作" >
          <template slot-scope="scope">
            <el-button type="text" @click="update(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="资产结构修改" width="80%" :visible.sync="formStatus">
      <el-form :model="form" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="名称">
              <el-input v-model="form.fieldsName" readonly autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注释">
              <el-input v-model="form.fieldsAnnotation" readonly autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否主键">
              <el-tag size="small" :type="form.isDictionary === 'Y' ? 'success' : 'danger'">
                {{form.isDictionary}}
              </el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据类型">
              <el-input v-model="form.baseType" readonly autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="数据长度">
              <el-input v-model="form.fieldsLength" readonly autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="小数位">
              <el-input v-model="form.decimalPlace" readonly autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否为空">
              <el-tag size="small" :type="form.isEmpty === 'Y' ? 'success' : 'danger'">
                {{form.isEmpty}}
              </el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="默认值">
              <el-input v-model="form.defaultValue" readonly autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="映射字段">
              <el-input v-model="form.javaType" readonly autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否字典">
              <el-switch
                v-model="form.isDictionary"
                active-value='Y'
                inactive-value='N'
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="form.isDictionary === 'Y'">
          <el-col :span="24">
            <el-form-item label="字典">
              <el-select v-model="form.dictionaryId" @change="giveSelect">
                <el-option v-for="dict in dictList" :key="dict.dictionary.id" :label="dict.dictionary.dictionaryName" :value="dict.dictionary.id">{{dict.dictionary.dictionaryName}}</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item>
              <el-table :data="selectedDictionaryInfoList" striped border>
                <el-table-column property="dictionaryInfoTag" label="字典标签"/>
                <el-table-column property="dictionaryInfoValue" label="字典值"/>
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formStatus = false">取 消</el-button>
        <el-button type="primary" @click="updateAssetsModel()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {getDictionaryRespByDataSourceId} from "@/api/dataSource/dictionary";
import {getAssetsModelByDataTableId, updateAssetsModel} from "@/api/dataSource/assets";

export default {
  name: 'OverallAssetStructure',
  props: {
    assetsModelList: {
      type: Array
    },
    tableInfo: {
      type: Object
    }
  },
  data() {
    return {
      isOpen: false,
      tagSelectDictionaryInfoList: [],
      dictionaryIdAndName: {
        dictionaryName: null,
        id: null
      },
      selectedDictionaryInfoList: [],
      form: {},
      formStatus: false,
      dictList: [],
      flagId: 0
    }
  },
  watch: {
    form:{
      // 此处监听variable变量，当期有变化时执行
      handler(item1){
        this.dictList.forEach(dict => {
          if (dict.dictionary.id == item1.dictionaryId){
            this.$set(this, "selectedDictionaryInfoList", dict.dictionaryInfoList);
            this.$set(this, "dictionaryIdAndName", dict.dictionary)
            console.log(this.selectedDictionaryInfoList)
          }
        })
      }
    }
  },
  methods: {
    removeDiv(){
      this.isOpen = false
      this.tagSelectDictionaryInfoList = []
    },
    getDictionaryInfoList(row) {
      console.log("鼠标滑过:",row)
      this.isOpen = true
      this.flagId = row.id
      getDictionaryRespByDataSourceId(this.tableInfo.dataSourceId).then(res => {
        this.dictList = res.data
        this.dictList.forEach(dict => {
          if (dict.dictionary.id == row.dictionaryId){
            this.$set(this, "tagSelectDictionaryInfoList", dict.dictionaryInfoList);
            console.log(this.tagSelectDictionaryInfoList)
          }
        })
      })
    },
    updateAssetsModel(){
      console.log(this.form)
      if (this.form.isDictionary == "Y"){
        this.form.dictionaryId = this.dictionaryIdAndName.id;
        this.form.dictionaryName = this.dictionaryIdAndName.dictionaryName;
      }else {
        this.form.dictionaryId = null;
        this.form.dictionaryName = null;
      }

      updateAssetsModel(this.form).then(
        res => {
          this.$message.success(res.msg);
          this.formStatus = false
          this.form = {}

        }
      )
      this.selectedDictionaryInfoList = []

    },
    giveSelect() {
      console.log("id和名字",this.dictionaryIdAndName)
      this.dictList.forEach(dict => {
        if (dict.dictionary.id == this.form.dictionaryId){
          this.$set(this, "selectedDictionaryInfoList", dict.dictionaryInfoList);
          this.$set(this, "dictionaryIdAndName", dict.dictionary)
          console.log(this.selectedDictionaryInfoList)
        }
      })
    },
    update(row){
      console.log("tableInfo",this.tableInfo)
      getDictionaryRespByDataSourceId(this.tableInfo.dataSourceId).then(
        res => {
          console.log("获取的所有当前表字典",res.data)
          this.dictList = res.data
          console.log("字典:",this.dictList)

          this.form = row;
          if (this.form.dictionaryId){
            this.form.dictionaryId = Number(row.dictionaryId) // 通过Number将类型转换
          }
          console.log("form",this.form)
        }
      )

      this.formStatus = true;
    }
  }
}
</script>
<style scoped lang="scss">

</style>
