<template>
  <div>
    <el-dialog v-dialogDrag ref="diaFrom" title="门类字段与元数据标准字段对比" :close-on-click-modal="false" :visible.sync="diaStatus"
      width="95%" top="10px" :before-close="cancel">
      <el-row style="margin-bottom:10px">
        <el-col :span="10">
          选择元数据标准:
          <el-select size="mini" style="width:70%" placeholder="请选择源表" v-model="selectId" @change="ysjBtn(selectId)">
            <el-option v-for="(item,key) in RecordList" :key="key" :label="item.name" :value="item.idsCode"></el-option>
          </el-select>
        </el-col>
        <el-col :span="10">
          <el-button :disabled='!selectId' @click="CnClick" size="mini" type="primary">中文匹配</el-button>
          <el-button :disabled='!selectId' @click="EnClick" size="mini" type="primary">英文匹配</el-button>
        </el-col>
      </el-row>
      <el-table :data='diaTableData' tooltip-effect="dark" border max-height="600">
        <!-- <el-table-column align="center" label="对应关系" width="100px">
          <template slot-scope="scope">
            <el-button @click="set(scope.row)" type="text" size="mini">设置</el-button>
            <el-button @click="del(scope.row)" type="text" size="mini" style="color:#FF4949">删除</el-button>
          </template>
        </el-table-column> -->
        <el-table-column show-overflow-tooltip prop="columnFieldChn" label="门类中文字段" width="125px"></el-table-column>
        <el-table-column show-overflow-tooltip prop="columnField" label="门类英文字段" width="125px"></el-table-column>
        <el-table-column show-overflow-tooltip prop="fieldChn" label="元数据中文字段" width="140px"> </el-table-column>
        <el-table-column show-overflow-tooltip prop="field" label="元数据英文字段" width="140px"></el-table-column>
        <el-table-column show-overflow-tooltip prop="define" label="定义"></el-table-column>
        <el-table-column show-overflow-tooltip prop="purpose" label="目的"></el-table-column>
        <el-table-column show-overflow-tooltip prop="binding" label="约束性"></el-table-column>
        <el-table-column show-overflow-tooltip prop="repeatability" label="可重复性" width="100px"></el-table-column>
        <el-table-column show-overflow-tooltip prop="elementType" label="元素类型" width="100px"></el-table-column>
        <el-table-column show-overflow-tooltip prop="dataType" label="数据类型" width="100px"></el-table-column>
        <el-table-column show-overflow-tooltip prop="modification" label="编码修饰体系" width="130px"></el-table-column>
        <el-table-column show-overflow-tooltip prop="domains" label="值域"></el-table-column>
        <el-table-column show-overflow-tooltip prop="defaultValue" label="缺省值"></el-table-column>
        <el-table-column show-overflow-tooltip prop="childElements" label="子元素"></el-table-column>
        <el-table-column show-overflow-tooltip prop="informationSource" label="信息来源" width="100px"></el-table-column>
        <el-table-column show-overflow-tooltip prop="relatedElements" label="相关元素" width="100px"></el-table-column>
        <el-table-column show-overflow-tooltip prop="remarks" label="注释"></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog v-dialogDrag ref="diaSet" title="设置对应关系" :close-on-click-modal="false" :visible.sync="setStatus"
      width="40%" top="20px" :before-close="cancels">
      <el-form :model="form">
        <el-form-item label="源字段中文：">
          <el-input clearable style="width:70%" disabled size="mini" v-model="form.fieldChn"></el-input>
        </el-form-item>
        <el-form-item label='源字段英文：'>
          <el-input clearable style="width:70%" disabled size="mini" v-model="form.field"></el-input>
        </el-form-item>
        <el-form-item label='目标中文字段：'>
          <el-input clearable style="width:70%" size="mini" v-model="form.columnFieldChn"></el-input>
        </el-form-item>
        <el-form-item label='目标英文字段：'>
          <el-input clearable style="width:70%" size="mini" v-model="form.columnField"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import {
    clearObjValue
  } from '@/utils/common';
  import {
    mapState
  } from "vuex";
  export default {
    props: {
      diaStatus: {
        type: Boolean,
        default: () => false
      },
      treeRow: {
        type: Object,
        default: () => {}
      },
      RecordList: {
        type: Array,
        default: () => []
      },
      treeId: {
        type: String,
        default: () => ""
      },
    },
    data() {
      return {
        selectId: '',
        setStatus: false,
        form: {
          fieldChn: "",
          field: "",
          columnFieldChn: "",
          columnField: ""
        }
      }
    },
    computed: {
      ...mapState({
        pattern: (state) => state.categorySetting.pattern,
      }),
      diaTableData: {
        get() {
          return this.$store.state.categorySetting.diaTableData;
        },
        set(val) {
          this.$store.state.categorySetting.diaTableData = val;
        },
      },
    },
    methods: {
      ysjBtn(val) {
        if (this.pattern === "") {
          this.$store.dispatch('categorySetting/selectListByMetadataId', {
            metadataId: val
          })
        }
        if (this.pattern === 0) {
          this.CnClick()
        }
        if (this.pattern === 1) {
          this.EnClick()
        }
      },
      CnClick() {
        let data = {
          classId: this.treeId,
          metadataId: this.selectId,
        }
        this.$store.dispatch('categorySetting/compareByFieldChn', data).then(res => {
          this.$emit('handleNodeClick', this.treeRow)
        })
      },
      EnClick() {
        let data = {
          classId: this.treeId,
          metadataId: this.selectId,
        }
        this.$store.dispatch('categorySetting/compareByField', data).then(res => {
          this.$emit('handleNodeClick', this.treeRow)
        })
      },
      cancel() {
        this.selectId = ""
        this.diaTableData = []
        this.$emit('cancel')

      },
      set(row) {
        this.setStatus = true
        for (let index in row) {
          for (let key in this.form) {
            if (index === key) {
              this.form[key] = row[index]
            }
          }
        }
      },
      cancels() {
        clearObjValue(this.form)
        this.setStatus = false
      },
      del(row) {}
    }

  }

</script>
