<!-- 新增 or 修改字典数据 -->
<template>
  <FireflyDialog :visible.sync="visible" :newTitle="!dataForm.id ? '添加字典数据' : '修改字典数据'" @close="closeDialog" append-to-body>
    <el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-position="top" @keyup.enter="submitHandle()">
      <el-form-item label="字典类型" prop="dictType">
        <el-input v-model="dataForm.dictType" :disabled="true" placeholder="请输入字典类型"></el-input>
      </el-form-item>
      <el-form-item label="字典标签" prop="dictLabel">
        <el-input v-model="dataForm.dictLabel" maxlength="30" show-word-limit placeholder="请输入字典标签"></el-input>
      </el-form-item>
      <el-form-item label="字典键值" prop="dictValue">
        <el-input v-model="dataForm.dictValue" maxlength="30" show-word-limit :disabled="!!dataForm.id" placeholder="请输入字典键值"></el-input>
      </el-form-item>
      <!-- <el-form-item label="样式属性" prop="cssClass">
        <el-input v-model="dataForm.cssClass" maxlength="30" show-word-limit placeholder="请输入样式属性"></el-input>
      </el-form-item> -->
      <el-form-item label="字典排序" prop="dictSort">
        <el-input-number v-model="dataForm.dictSort" :min="0" placeholder="请输入字典排序" />
      </el-form-item>
      <!-- <el-form-item label="回显样式" prop="listClass">
        <el-input v-model="dataForm.listClass" maxlength="30" show-word-limit placeholder="请输入回显样式"></el-input>
      </el-form-item> -->
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="dataForm.status">
          <el-radio label="1">正常</el-radio>
          <el-radio label="0">停用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否默认" prop="isDefault">
        <el-radio-group v-model="dataForm.isDefault">
          <el-radio label="Y">是</el-radio>
          <el-radio label="N">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="dataForm.remark" type="textarea" maxlength="150" show-word-limit placeholder="请输入备注"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="submitHandle()">确定</el-button>
    </template>
  </FireflyDialog>
</template>

<script>
import axios from 'axios';
import FireflyDialog from '../../../fireflyDialog/src/main.vue';
export default {
  name: 'dictDataDialog',
  components: {
    FireflyDialog
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => {
        return {};
      }
    },
    baseApi: {
      type: String,
      default: ''
    },
    TokenKey: {
      type: String,
      default: ''
    }
  },

  watch: {
    show(newVal, oldVal) {
      this.visible = newVal;
    },
    row(newVal, oldVal) {
      if (newVal) {
        this.dataForm = {
          ...this.dataForm,
          ...newVal
        };
      }
    }
  },

  data() {
    return {
      visible: false,
      dataForm: {
        id: '',
        dictType: '',
        dictLabel: '',
        dictValue: '',
        cssClass: '',
        dictSort: 0,
        listClass: '',
        status: '1',
        isDefault: 'N',
        remark: ''
      },
      dataRules: {
        dictType: [{ required: true, message: '请输入字典类型', trigger: 'blur' }],
        dictLabel: [
          { required: true, message: '请输入字典标签', trigger: 'blur' },
          { pattern: /^[^\s]+(\s+[^\s]+)*$/, message: '字典标签首尾不能输入空格', trigger: 'blur' }
        ],
        dictValue: [
          { required: true, message: '请输入字典键值', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9]+$/, message: '请输入字母或数字', trigger: 'blur' }
        ],
        dictSort: [{ required: true, message: '请输入显示排序', trigger: 'blur' }]
      }
    };
  },

  methods: {
    submitHandle() {
      this.$refs['dataFormRef'].validate(valid => {
        if (valid) {
          if (this.dataForm.id) {
            axios({
              method: 'put',
              url: `${this.baseApi}/system/dict/data`,
              headers: {
                Authorization: `Bearer ${localStorage.getItem(this.TokenKey)}`
              },
              data: this.dataForm
            })
              .then(response => {
                const { status } = response;
                if (status === 200) {
                  const res = response.data;
                  if (res.state === 200) {
                    this.$emit('refreshList');
                    this.closeDialog();
                    this.$message.success('修改成功');
                  } else {
                    this.$message.error(`${res.message}`);
                  }
                }
              })
              .catch(err => {
                console.log(err);
              });
          } else {
            axios({
              method: 'post',
              url: `${this.baseApi}/system/dict/data`,
              headers: {
                Authorization: `Bearer ${localStorage.getItem(this.TokenKey)}`
              },
              data: this.dataForm
            })
              .then(response => {
                const { status } = response;
                if (status === 200) {
                  const res = response.data;
                  if (res.state === 200) {
                    this.$emit('refreshList');
                    this.closeDialog();
                    this.$message.success('新增成功');
                  } else {
                    this.$message.error(`${res.message}`);
                  }
                }
              })
              .catch(err => {
                console.log(err);
              });
          }
        }
      });
    },

    closeDialog() {
      this.dataForm = {
        id: '',
        dictType: '',
        dictLabel: '',
        dictValue: '',
        cssClass: '',
        dictSort: 0,
        listClass: '',
        status: '1',
        isDefault: 'N',
        remark: ''
      };
      this.$emit('update:show', false);
    }
  }
};
</script>

<style lang="scss" scoped></style>
