<!-- 新增 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="dictName">
        <el-input v-model="dataForm.dictName" maxlength="30" show-word-limit placeholder="请输入字典名称"></el-input>
      </el-form-item>
      <el-form-item label="字典类型" prop="dictType">
        <el-input v-model="dataForm.dictType" maxlength="30" show-word-limit :disabled="!!dataForm.id" 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="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: 'dictTypeDialog',
  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 = { ...newVal };
      }
    }
  },

  data() {
    return {
      visible: false,
      dataForm: {
        id: '',
        dictName: '',
        dictType: '',
        status: '1',
        remark: ''
      },
      dataRules: {
        dictName: [
          { required: true, message: '请输入字典名称', trigger: 'blur' },
          { pattern: /^[^\s]+(\s+[^\s]+)*$/, message: '字典名称首尾不能输入空格', trigger: 'blur' }
        ],
        dictType: [
          { required: true, message: '请输入字典类型', trigger: 'blur' },
          { pattern: /^[0-9a-zA-Z_]{1,}$/, message: '请输入字母数字或下划线', trigger: 'blur' }
        ]
      }
    };
  },

  methods: {
    submitHandle() {
      this.$refs['dataFormRef'].validate(valid => {
        if (valid) {
          if (this.dataForm.id) {
            axios({
              method: 'put',
              url: `${this.baseApi}/system/dict/type`,
              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/type`,
              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: '',
        dictName: '',
        dictType: '',
        status: '1',
        remark: ''
      };
      this.$emit('update:show', false);
    }
  }
};
</script>

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