<template>
  <div>

    <el-dialog v-dialogDrag :title="title" :visible.sync="isDialogVisible" :close-on-click-modal="false" width="90%"
      :before-close="cancel">
      <el-row style="padding:10px">
        <el-col :span="10">
          <span>源表：</span>
          <el-cascader :disabled="title==='修改'" style="width:65%" size="mini" ref="refSubCat" v-model="sourceClassId"
            placeholder="请选择" :options="OneList" :props="{
            value: 'id',
            label: 'className',
            children: 'childClass',
            expandTrigger: 'hover',
          }" :show-all-levels="true" @change="changeCasc"></el-cascader>
          <!-- <el-input size="mini" style="width:70%" placeholder="请选择源表"></el-input> -->
        </el-col>
        <el-col :span="10">
          <span>目标表：</span>
          <el-cascader :disabled="title==='修改'" style="width:65%" size="mini" ref="refSubCat" v-model="targetClassId"
            :show-all-levels="true" placeholder="请选择" :options="TwoList" :props="{
            value: 'id',
            label: 'className',
            children: 'childClass',
            expandTrigger: 'hover',
          }" @change="changeCascs"></el-cascader>
          <!-- <el-input size="mini" style="width:70%" placeholder="请选择目标表"></el-input> -->
        </el-col>
      </el-row>
      <el-table size='mini' :data='tableData' border height="500" @row-dblclick='rowDbClick'>
        <el-table-column align="center" prop="sColumnName" label="来文发文表字段名"></el-table-column>
        <el-table-column align="center" prop="sColumnChnName" label="来文发文表字段中文名"></el-table-column>
        <el-table-column align="center" prop="dColumnName" label="门类表字段名"></el-table-column>
        <el-table-column align="center" prop="dColumnChnName" label="门类表字段中文名"></el-table-column>
        <el-table-column align="center" prop="sColumnClass" label="来文发文表字段类型"></el-table-column>
        <el-table-column align="center" prop="sColumnLen" label="来文发文表字段长度"></el-table-column>
        <el-table-column align="center" prop="sColumnPoint" label="来文发文表字段小数位数"></el-table-column>
        <el-table-column align="center" prop="dColumnClass" label="门类表字段类型"></el-table-column>
        <el-table-column align="center" prop="dColumnLen" label="门类表字段长度"></el-table-column>
        <el-table-column align="center" prop="dColumnPoint" label="门类表字段小数位数"></el-table-column>
      </el-table>
      <el-footer style="text-align:right;padding:5px 10px">
        <el-button :loading="btnloading" size="mini" @click="submitA" type="primary">保存</el-button>
        <el-button size="mini" @click="cancel" type="primary">取消</el-button>
      </el-footer>


    </el-dialog>
    <el-dialog v-dialogDrag title="选择目标字段" :visible.sync="zdStatus" :close-on-click-modal="false" width="40%"
      :before-close="cancels">
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="120px" style="padding:10px 20px">
        <el-form-item label="源表字段：">
          <el-input size="mini" style="width:80%" v-model="form.Sname" disabled></el-input>
        </el-form-item>
        <el-form-item label="目标表字段：" prop="Tname">
          <el-select size="mini" style="width:80%" v-model="form.Tname">
            <el-option v-for="(item,key)  in DList" :key="key" :label="item.columnChnName" :value="item.columnChnName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=" ">
          <el-button @click="sumbit('ruleForm')" size="mini" type="primary">保存 </el-button>
          <el-button @click="cancels(1)" size="mini" type="primary">撤销 </el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
  </div>
</template>
<script>
  import {
    selectModifyListAdd,
    selectTableReplaceColumnList,
    saveSour
  } from "@/api/system-management/archiveSettings"
  import {
    message,
    clearObjValue
  } from '@/utils/common';
  import {
    title
  } from '@/settings';
  export default {
    props: {
      title: {
        type: String,
        default: () => '新增',
      },
      isDialogVisible: {
        type: Boolean,
        default: () => false
      },
      OneList: {
        type: Array,
        default: () => []
      },
      TwoList: {
        type: Array,
        default: () => []
      },
    },
    data() {
      return {
        btnloading: false,
        sourceClassId: '',
        targetClassId: '',
        tableData: [],
        zdStatus: false,
        form: {
          Sname: "",
          Tname: ""
        },
        rules: {
          Tname: [{
            required: true,
            message: '请选择目标表字段',
            trigger: 'change'
          }],
        },
        DList: [],
        row: {}
      }
    },
    // watch: {
    //   'sourceClassId': {
    //     handler(val, oldVal) {

    //     }
    //   },
    //   'targetClassId': {
    //     handler(val, oldVal) {
    //       if (this.sourceClassId) {
    //         this.getData()
    //       }
    //     }
    //   },

    // },
    methods: {
      submitA() {
        let data = {
          sourceDestColumnList: [],
          sourceClassId: this.title === '修改' ? this.sourceClassId : this.sourceClassId.slice(-1)[0],
          targetClassId: this.title === '修改' ? this.targetClassId : this.targetClassId.slice(-1)[0]
        }
        this.tableData.forEach(item => {
          if (item.dColumnChnName) {
            data.sourceDestColumnList.push(item)
          }
        })
        if (this.title === '修改') {
          data.sourceDestColumnList.forEach(item => {
            item.id = ''
          })
        }
        if (!data.sourceDestColumnList.length) {
          message('warning', '请先选择需要匹配的目标', 3000)
          return
        }
        this.btnloading = true;
        saveSour(data).then(res => {
          this.btnloading = false;
          message('success', '操作成功', 3000)
          this.cancel()
        }).catch(err => {
          this.btnloading = false;
        })
      },
      sumbit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.tableData.forEach(item => {
              if (item.sColumnChnName === this.form.Sname) {
                this.DList.forEach(ele => {
                  if (ele.columnChnName === this.form.Tname) {
                    item.dColumnName = ele.columnName
                    item.dColumnChnName = ele.columnChnName
                    item.dColumnClass = ele.note
                    item.dColumnPoint = ele.columnPoint
                    item.dColumnLen = ele.columnWidth
                  }
                })
              }
            })
            this.cancels()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      changeCasc() {
        if (this.targetClassId) {
          this.getData()
        }
      },
      changeCascs() {
        if (this.sourceClassId) {
          this.getData()
        }
      },
      getData() {
        let data = {
          sourceClassId: this.sourceClassId.slice(-1)[0],
          targetClassId: this.targetClassId.slice(-1)[0],
        }
        selectModifyListAdd(data).then(res => {
          this.tableData = res.body.list
        })
      },
      rowDbClick(row) {
        this.row = row
        this.zdStatus = true
        this.form.Sname = row.sColumnChnName
        this.form.Tname = row.dColumnChnName

        let data = {
          tableName: row.dTableName
        }
        selectTableReplaceColumnList(data).then(res => {
          this.DList = res.body.list
        })
      },
      cancel() {
        this.$emit('cancel')
        this.$emit('getData')
        this.sourceClassId = ''
        this.targetClassId = ''
        this.tableData = []
      },
      cancels(val) {
        if (val) {
          this.tableData.forEach(item => {
            if (item.sColumnChnName === this.row.sColumnChnName) {
              item.dColumnName = ''
              item.dColumnChnName = ''
              item.dColumnClass = ''
              item.dColumnPoint = ''
              item.dColumnLen = ''
            }
          })
        }
        this.zdStatus = false
        clearObjValue(this.form)
        this.$refs['ruleForm'].resetFields();
      }
    }
  }

</script>
