<!-- 业务字典表弹窗 -->
<template>
  <el-dialog
    :title="title"
    v-model="dialogVisible"
    width="700px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <el-form ref="form" label-width="120px" :model="form" :rules="rules">
      <el-form-item label="选择业务字典" prop="classifyNo">
        <el-select v-model="form.classifyNo" filterable style="width: 100%" @change="selectType">
          <el-option
            v-for="item in dictionaryOptions"
            :key="item.codeType"
            :label="item.typeName"
            :value="item.codeType"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div class="sub-title"> 字段关联</div>
    <el-table :data="form.tableData" style="width: 100%">
      <el-table-column prop="saveField" label="字典表字段名称" />
      <el-table-column prop="saveFieldDesc" label="字段说明" />
      <el-table-column label="对应存储字段">
        <template v-slot="{ row }">
          <el-select v-model="row.sourceField">
            <el-option
              v-for="item in fieldNameOptions"
              :key="item.codeValue"
              :label="item.codeValue"
              :value="item.codeValue"
            />
          </el-select>
        </template>
      </el-table-column>
    </el-table>
    <template v-slot:footer>
      <div>
        <el-button type="primary" @click="submit"> 确定</el-button>
        <el-button @click="handleClose"> 取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {
  ElForm,
  ElFormItem,
  ElTable,
  ElTableColumn,
  ElButton,
  ElSelect,
  ElOption,
  ElDialog
} from 'element-plus'

export default {
  components: {
    ElForm,
    ElFormItem,
    ElTable,
    ElTableColumn,
    ElButton,
    ElSelect,
    ElOption,
    ElDialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    rowIndex: {
      type: Number,
      default: -1
    },
    // 当前字段对于的字典表数据
    data: {
      type: Object,
      default: () => {}
    },
    // 业务字典下拉列表
    dictionaryOptions: {
      type: Array,
      default: () => []
    },
    // 对应存储字段 下拉列表
    fieldNameOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      title: '关联业务字典', // 动态改变
      dialogVisible: false,
      rules: {
        classifyNo: [{ required: true, message: '该项必填', trigger: 'blur' }]
      },
      form: this.getDefaultForm()
    }
  },
  watch: {
    visible(visible) {
      this.dialogVisible = visible
    },
    dialogVisible(visible) {
      this.$emit('update:visible', visible)
    },
    data: {
      handler(data) {
        if (data && data.list?.length) {
          // 数据回填
          this.form.classifyNo = data.classifyNo
          // 判断回填的业务字典表 在数据库里是否还存在，如果不存在则显示为空
          this.selectType(this.form.classifyNo)
          this.form.tableData[0].sourceField = data?.list[0].sourceField
          // this.form.tableData[1].sourceField = data?.list[1].sourceField
        }
      },
      immediate: true
    }
  },
  methods: {
    getDefaultForm() {
      return {
        classifyNo: '',
        classifyName: '',
        tableData: [
          {
            saveField: 'codex_code',
            saveFieldDesc: '字典参数值',
            sourceField: ''
          }
          // {
          //   saveField: 'codex_name',
          //   saveFieldDesc: '字典参数名称',
          //   sourceField: ''
          // }
        ]
      }
    },
    selectType(val) {
      // this.form.classifyName = this.dictionaryOptions.filter((item) => item.classifyNo === val)[0].classifyName
      const res = this.dictionaryOptions.filter((item) => item.codeType === val)
      // 这里判断赋值是为了数据回填的时候以防业务字典表里没有了
      this.form.classifyNo = res.length > 0 ? val : ''
      this.form.classifyName = res.length > 0 ? res[0].typeName : ''
    },
    // 根据分类查询业务字典
    // async findLeadCodeListByClassify (classifyNo) {
    //   const { data } = await findLeadCodeListByClassify({ classifyNo: classifyNo })
    //   this.form.tableData[0].options = data
    //   this.form.tableData[1].options = data
    // },
    handleClose() {
      this.form = this.getDefaultForm()
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
      this.dialogVisible = false
    },
    submit() {
      this.$refs.form.validate((valit) => {
        if (valit) {
          const data = {
            classifyNo: this.form.classifyNo,
            classifyName: this.form.classifyName,
            list: this.form.tableData
          }
          this.$emit('save', data, this.rowIndex)
          this.handleClose()
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.sub-title {
  font-size: 16px;
  margin-bottom: 16px;
  margin-top: 16px;
}
</style>
