<!--
字段关系分类表单
@Author: linqian
 * @date: 2022-09-29  14:35
 */
-->
<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="120px">
    <dg-row>
      <el-form-item label="字段分类一" prop="columnClaIdOne">
        <dg-select v-model="form.columnClaIdOne" placeholder="请选择字段分类一" :data="sortList" valueName="id" labelName="name" @change="handleChange"> </dg-select>
      </el-form-item>
      <el-form-item label="字段分类二" prop="columnClaIdTwo">
        <dg-select v-model="form.columnClaIdTwo" placeholder="请选择字段分类二" :data="sortList" valueName="id" labelName="name" @change="handleChange"> </dg-select>
      </el-form-item>
      <el-form-item label="字段关系分类" prop="label">
        <el-input v-model="form.label" placeholder="请选择字段分类一和字段分类二" disabled> </el-input>
      </el-form-item>
    </dg-row>
    <div v-footer>
        <dg-button @click="$emit('close')">取消</dg-button>
        <dg-button @click="handleSave" type="primary">保存</dg-button>
    </div>
  </el-form>
</template>

<script>
  import * as Api from "@/api/data-auth"
export default {
  props: {
    id: String
  },
  components: {},
  data() {
    return {
      form: {
        columnClaIdOne: "",
        columnClaIdTwo: "",
        label: ""
      },
      sortList: [],
      rules: {
        columnClaIdOne: [{ required: true, message: "请选择字段分类一", trigger: "blur" }],
        columnClaIdTwo: [{ required: true, message: "请选择字段分类二", trigger: "blur" }],
        label: [{ required: true, message: "请选择字段分类一和分类二", trigger: "blur" }],
      }
    };
  },
  computed: {},
  methods: {
    handleChange() {
        if (this.form.columnClaIdOne && this.form.columnClaIdTwo) {
          this.form.label = this.sortList.find(item => item.id == this.form.columnClaIdOne).name +"->"+this.sortList.find(item => item.id == this.form.columnClaIdTwo).name
        }
    },
    handleSave() {
        this.$refs.form.validate(valid => {
            if (valid) {
              if (this.form.columnClaIdOne == this.form.columnClaIdTwo) {
                this.$message.warning("字段分类一和字段分类二值不能相同");
                return;
              }
               let api;
               if (this.id) {
                api = "updateFieldRel"
               } else {
                api = "saveFieldRel"
               }
               const {label, ...params} = this.form;
               Api[api]({...params}).then(res => {
                this.$message.success("保存成功!");
                this.$emit("success");
               })
            }
        })
    }
  },
  async created() {
   const res =  await Api.getSecLevelColumn();
   this.sortList = res.data.content;
    if (this.id) {
      Api.getfieldRelDetail(this.id).then(res => {
          const { columnClaNameOne, columnClaNameTwo, ...other } = res.data.content;
          this.form = {
            ...other,
            label: columnClaNameOne+"->"+columnClaNameTwo
          }
      })
    }
  },
  mounted() {}
};
</script>

<style lang='scss'>
</style>