<template>
  <el-dialog
    title="数据字典"
    :visible.sync="dialogVisible"
    width="460px"
    :before-close="handleClose"
    :destroy-on-close="true"
  >
    <el-form
      v-if="visible"
      size="mini"
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="父字典类型" prop="parentDictType">
        <el-select
          v-model="ruleForm.parentDictType"
          placeholder="请选择"
          filterable
          style="width: 100%"
          @change="updatedata"
        >
          <el-option
            v-for="(item, index) in typeList"
            :key="index"
            :label="item.remark"
            :value="item.dictType"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="父字典值" prop="parentDictCode">
        <el-select v-model="ruleForm.parentDictCode" filterable placeholder="请选择" style="width: 100%">
          <el-option
            v-for="(item, index) in parentDict"
            :key="index"
            :label="item.dictValue"
            :value="item.dictCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="父字典编码" prop="parentDictCode">
        <el-input
          :disabled="true"
          :value="
            ruleForm.parentDictCode
              ? (parentDict.find(item => item.dictCode === ruleForm.parentDictCode) || {}).dictCode
              : ''
          "
        ></el-input>
      </el-form-item>
      <el-form-item label="字典类型" prop="dictType">
        <el-select v-model="ruleForm.dictType" placeholder="请选择" filterable style="width: 100%">
          <el-option
            v-for="(item, index) in typeList"
            :key="index"
            :label="item.remark"
            :value="item.dictType"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="字典值" prop="dictValue">
        <el-input v-model="ruleForm.dictValue"></el-input>
      </el-form-item>
      <el-form-item label="字典编码" prop="dictCode">
        <el-input v-model="ruleForm.dictCode"></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="ruleForm.sortNum"></el-input>
      </el-form-item>
      <el-form-item label="说明">
        <el-input v-model="ruleForm.remark"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-switch
          v-model="ruleForm.status"
          active-value="ON"
          inactive-value="OFF"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" @click="submitForm('ruleForm')">确定</el-button>
        <el-button size="mini" @click="resetForm('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {
  dictTypeList,
  dictDetail,
  addDataDictionary,
  updateDataDictionary,
  dictListDict
} from '@/api/dataDictionary.js'
export default {
  props: {
    item: {
      type: Object,
      default: null
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      typeList: [],
      parentDict: [],
      ruleForm: {
        dictValue: '',
        dictCode: '',
        dictType: '',
        parentDictCode: '',
        parentDictType: '',
        sortNum: '',
        remark: '',
        status: 'ON'
      },
      rules: {
        dictValue: [{ required: true, message: '必填', trigger: 'blur' }],
        dictCode: [{ required: true, message: '必填', trigger: 'blur' }],
        dictType: [{ required: true, message: '必填', trigger: 'blur' }],
        status: [{ required: true, message: '必填', trigger: 'blur' }]
      }
    }
  },
  watch: {
    item() {
      if (this.item !== null) {
        dictDetail({ id: this.item.sysDictId }).then(res => {
          for (var key in this.ruleForm) {
            this.ruleForm[key] = res.data[key]
            if (key === 'parentDictType' && res.data[key]) {
              this.updatedata('nolo')
            }
          }
        })
      }
    },
    visible() {
      if (this.visible) {
        dictTypeList().then(res => {
          this.typeList = res.data
        })
      }
      this.dialogVisible = this.visible
    },
    dialogVisible() {
      this.$emit('setVisible', this.dialogVisible)
      if (!this.dialogVisible) {
        this.$nextTick(() => {
          Object.assign(this.$data, this.$options.data())
        })
      }
    }
  },
  methods: {
    updatedata(type) {
      if (type !== 'nolo') {
        this.ruleForm.parentDictCode = ''
      }
      if (this.ruleForm.parentDictType) {
        dictListDict({ dictType: this.ruleForm.parentDictType }).then(res => {
          this.parentDict = res.data
        })
      }
    },
    handleClose(done) {
      done()
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          ;[addDataDictionary, updateDataDictionary]
            [this.item ? 1 : 0]({
              ...this.ruleForm,
              sysDictId: this.item ? this.item.sysDictId : undefined
            })
            .then(res => {
              this.$emit('success')
              this.$message({
                type: 'success',
                message: `保存成功!`
              })
              this.dialogVisible = false
            })
            .catch(err => {
              console.log(err)
            })
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.dialogVisible = false
    }
  }
}
</script>

<style></style>
