<template>
  <div class="comp-content">
    <Dialog
      v-model="visible"
      :diaTitle="`${data.uuid ? '编辑' : '新增'}字典`"
      :width="500"
      :height="300"
      v-bind="$attrs"
      showFooter
      @close="closeFun"
    >
      <template #default>
        <div class="form">
          <el-form ref="dictFormRef" :model="formData" label-width="auto" :rules="rules">
            <el-form-item label="字典名称" prop="dictName">
              <el-input
                v-model="formData.dictName"
                placeholder="请输入"
                clearable
                :disabled="!!data.uuid"
              />
            </el-form-item>
            <el-form-item label="字典数值" prop="dictValue">
              <el-input
                v-model="formData.dictValue"
                placeholder="请输入"
                clearable
                :disabled="!!data.uuid"
              />
            </el-form-item>
            <el-form-item label="描述">
              <el-input v-model="formData.comment" placeholder="请输入" clearable />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <div>
          <el-button @click="closeFun">关闭</el-button>
          <el-button type="primary" @click="submitFun">确定</el-button>
        </div>
      </template>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import Dialog from '@/components/common/dialog/index.vue';
import {
  addDictionaryDataApi,
  updateDictionaryDataApi,
  getDictionaryDataDetailApi,
} from '@/api/system/systemData';
import { getAllDictDataFun } from '@/utils/common';

interface Props {
  modelValue: boolean;
  classData: any;
  data: any;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  data: {},
});

const dictFormRef = ref<any>();
const emit = defineEmits(['update:modelValue', 'submit']);
const visible = ref(false);
const formData = ref<any>({});
const rules = {
  dictName: [{ required: true, message: '请输入字典名称', trigger: 'change' }],
  dictValue: [{ required: true, message: '请输入字典数值', trigger: 'change' }],
};

watch(
  () => props.modelValue,
  (val: boolean) => {
    visible.value = val;
    if (val) {
      formData.value = {};
      if (dictFormRef.value) {
        dictFormRef.value.resetFields();
      }
      if (props.data.uuid) {
        getDetailFun();
      }
    }
  }
);

const getDetailFun = () => {
  const params = {
    uuid: props.data.uuid,
  };
  getDictionaryDataDetailApi(params).then((res: any) => {
    if (res.code === 200) {
      formData.value = res.data;
    }
  });
};

const submitFun = () => {
  if (!dictFormRef.value) {
    return;
  }
  dictFormRef.value.validate((valid: any) => {
    if (valid) {
      const params = {
        dictClass: props.classData.className,
        classType: props.classData.classType,
        ...formData.value,
      };
      let apiFun = addDictionaryDataApi;
      if (props.data.uuid) {
        params.uuid = props.data.uuid;
        apiFun = updateDictionaryDataApi;
      }
      apiFun(params).then((res: any) => {
        if (res.code === 200) {
          ElMessage.success('操作成功');
          closeFun();
          emit('submit');
          getAllDictDataFun(true);
        }
      });
    }
  });
};

const closeFun = () => {
  emit('update:modelValue', false);
};
</script>
