<template>
  <el-dialog
    v-model="visible"
    :title="type === 'edit' ? '修改' : '新增'"
    :before-close="fnClose"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="上级菜单">
        <el-tag>{{ parentName }}</el-tag>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="编码" prop="bianma">
        <el-input
          v-model="form.bianma"
          :disabled="type === 'edit'"
          placeholder="请输入编码"
        />
      </el-form-item>
      <el-form-item label="排序" prop="orderBy">
        <el-input v-model.number="form.orderBy" placeholder="请输入排序" />
      </el-form-item>
      <el-form-item label="备注" prop="descr">
        <el-input
          v-model="form.descr"
          :autosize="{ minRows: 1 }"
          type="textarea"
          placeholder="请输入备注"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="fnClose">取 消</el-button>
      <el-button type="primary" @click="fnSubmit">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {
  getDataDictionaryRepeat,
  setDataDictionaryAdd,
  setDataDictionaryEdit,
} from "@/request/system_management.js";
import { debounce } from "throttle-debounce";
import useFormValidate from "@/assets/js/useFormValidate.js";
import { ElMessage } from "element-plus";

const props = defineProps({
  type: {
    type: String,
    required: true,
  },
  parentName: {
    type: String,
    required: true,
  },
  parentId: {
    type: String,
    required: true,
  },
});
const emits = defineEmits(["getData"]);
const visible = defineModel("visible", { type: Boolean, required: true });
const form = defineModel("form", { type: Object, required: true });
const { formRef, validate } = useFormValidate();
const rules = {
  name: [
    { required: true, message: "字典名称不能为空", trigger: "change" },
    { min: 2, max: 30, message: "长度在2到30个字符", trigger: "blur" },
  ],
  bianma: [
    { required: true, message: "字典编码名称不能为空", trigger: "change" },
    { min: 2, max: 30, message: "长度在2到30个字符", trigger: "blur" },
  ],
  orderBy: [
    { required: true, message: "排序不能为空", trigger: ["change", "blur"] },
    {
      type: "number",
      message: "排序必须为数字",
      trigger: ["change", "blur"],
    },
  ],
};
const fnClose = () => {
  formRef.value.resetFields();
  visible.value = false;
};
const fnSubmit = debounce(
  1000,
  async () => {
    await validate();
    if (props.type === "add") {
      const { dictionaries } = await getDataDictionaryRepeat({
        bianma: form.value.bianma,
      });
      if (dictionaries) {
        ElMessage.error("添加失败，编码重复");
        return;
      }
      await setDataDictionaryAdd({
        ...form.value,
        parentId: props.parentId,
        dictionariesId: undefined,
      });
    }
    if (props.type === "edit")
      await setDataDictionaryEdit({
        ...form.value,
      });
    ElMessage.success("操作成功");
    fnClose();
    emits("getData");
  },
  { atBegin: true }
);
</script>

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