<template>
  <div>
    <el-table :data="tableData" border v-loading="tableLoading" @row-dblclick="handleRowDbclick">
      <el-table-column
        label="Excel表字段名"
        prop="columnExcel"
        align="center"
      ></el-table-column>
      <el-table-column
        label="实体表字段名"
        prop="columnName"
        align="center"
      ></el-table-column>
      <el-table-column
        label="字段中文名"
        prop="columnChnName"
        align="center"
        width="110"
      ></el-table-column>
      <el-table-column label="允许为空" width="90" prop="columnCanNull" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.columnCanNull === "false" ? "否" : "是" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="字段类型" width="90" prop="columnClass" align="center">
        <template slot-scope="scope">
          <span>{{(columnClassList.filter(item => item.valueInt === scope.row.columnClass)[0]||{}).label}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="字段长度"
        prop="columnWidth"
        width="90"
        align="center"
      ></el-table-column>
      <el-table-column
        label="字段小数位"
        width="110"
        prop="columnPoint"
        align="center"
      ></el-table-column>
    </el-table>
    <dia-field :visible="diaVisible" @cancel="cancel" @revoke="revoke" :excelData="excelData" ref="diaField" @submit="submitForm" />
  </div>
</template>
<script>
import { getFindList } from "@/api/system-management/templateSetting";
import diaField from "./diaField";
export default {
  props: {
    tableLoading: {
      type: Boolean,
      default: () => false
    },
    tableData: {
      type: Array,
      default: () => []
    },
    excelData:{
      type: Array,
      default: () => []
    },
  },
  components:{
    diaField
  },
  data() {
    return {
      diaVisible: false,
      columnClassList: []
    };
  },
  methods: {
    // 字段类型
    getDictionaries() {
      getFindList({
        type: "columnClass"
      }).then(res => {
        if (res.success) {
          this.columnClassList = res.body.list;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 双击行
    handleRowDbclick(row, column, event){
      this.diaVisible = true;
      this.$refs.diaField.form = {...row}
    },
    cancel(){
      this.diaVisible = false;
    },
    // 撤销
    revoke(val){
      const rowIndex = this.tableData.findIndex(item => item.id === val.id)
      val.columnExcel = undefined;
      this.updateTable(rowIndex,val);
    },
    // 保存
    submitForm(val){
      const rowIndex = this.tableData.findIndex(item => item.id === val.id)
      this.updateTable(rowIndex,val);
    },
    // 更新store表格数据
    updateTable(rowIndex,row){
      this.$set(this.tableData, rowIndex, row);
      this.$store.commit("dataImport/GET_DATA",this.tableData)
      this.cancel();
    }
  },
  created() {
    this.getDictionaries();
  }
};
</script>
