<!-- 新增/编辑书目 -->
<template>
  <el-dialog
    v-model="dialogVisible"
    :title="isAdd ? '添加' : '编辑'"
    :width="500"
    center
    align-center
    :close-on-click-modal="false"
    @closed="handleBeforeClose"
  >
    <el-form :model="formData" ref="formRef" label-width="150px" :rules="formRules" class="mt20">
      <el-form-item label="所属分类" prop="knowledgeCellName">
        <el-tree-select v-model="formData.knowledgeCellName" :data="data" filterable />
      </el-form-item>
      <el-form-item label="书名名称" prop="isKnowledgeName" maxlength="50">
        <el-input v-model="formData.annotation" placeholder="请输入分类名称" :maxlength="50" />
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input v-model="formData.author" placeholder="请输入作者" :maxlength="50" />
      </el-form-item>
      <el-form-item label="出版时间" prop="time">
        <el-input v-model="formData.time" placeholder="请输入出版时间" :maxlength="50" />
      </el-form-item>
      <el-form-item label="提要" prop="annotation">
        <el-input v-model="formData.annotation" placeholder="请输入提要" :maxlength="1000" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" class="ml30" v-throttle="handleSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup name="editBookList">
import { ref, reactive, nextTick } from "vue";
import { FormInstance, FormRules, ElMessage } from "element-plus";

//* 接收注入
const dialogVisible = ref(false);
//* data
//* ref
const formRef = ref<FormInstance>();
const openPromise = ref<any>({});
const isAdd = ref(false);
const formData = reactive<FormData>(getFormDefaultValue());
const sourceData = [
  {
    value: "1",
    label: "Level one 1",
    children: [
      {
        value: "1-1",
        label: "Level two 1-1",
        children: [
          {
            value: "1-1-1",
            label: "Level three 1-1-1"
          }
        ]
      }
    ]
  },
  {
    value: "2",
    label: "Level one 2",
    children: [
      {
        value: "2-1",
        label: "Level two 2-1",
        children: [
          {
            value: "2-1-1",
            label: "Level three 2-1-1"
          }
        ]
      },
      {
        value: "2-2",
        label: "Level two 2-2",
        children: [
          {
            value: "2-2-1",
            label: "Level three 2-2-1"
          }
        ]
      }
    ]
  },
  {
    value: "3",
    label: "Level one 3",
    children: [
      {
        value: "3-1",
        label: "Level two 3-1",
        children: [
          {
            value: "3-1-1",
            label: "Level three 3-1-1"
          }
        ]
      },
      {
        value: "3-2",
        label: "Level two 3-2",
        children: [
          {
            value: "3-2-1",
            label: "Level three 3-2-1"
          }
        ]
      }
    ]
  }
];
const data = ref(sourceData);
interface FormData {
  [key: string]: any;
}

function getFormDefaultValue(): FormData {
  return {
    knowledgeId: undefined,
    isKnowledgeName: 0,
    knowledgeCellName: undefined,
    annotation: undefined
  };
}
//* 方法

// 校验规则
let formRules = reactive<FormRules>({
  isKnowledgeName: [
    {
      required: true,
      message: "是否做为知识体名称",
      trigger: "change"
    }
  ],
  knowledgeCellName: [
    {
      required: true,
      message: "请选择上级分类",
      trigger: "change"
    }
  ],
  annotation: [{ required: true, message: "分类名称不能为空", trigger: "blur" }]
});

// 取消
function handleCancel() {
  dialogVisible.value = false;
}
function handleBeforeClose() {
  dialogVisible.value = false;
  const defaultValue = getFormDefaultValue();
  for (const key of Object.keys(defaultValue)) {
    formData[key] = defaultValue[key];
  }
  nextTick(formRef.value?.clearValidate);
}
//提交
function handleSubmit() {
  console.log("提交");
  ElMessage.success("新增成功");
  openPromise.value.resolve();
  dialogVisible.value = false;
  // formRef.value?.validate(async valid => {
  //   if (!valid) return;
  //   const params = {
  //     ...formData
  //   };
  //   if (isAdd.value) {
  //     await addMenu(params);
  //     ElMessage.success("新增成功");
  //   } else {
  //     await editMenu(params);
  //     ElMessage.success("编辑成功");
  //   }
  //   openPromise.value.resolve();
  //   dialogVisible.value = false;
  // }
}
function open(params?: FormData) {
  isAdd.value = !params?.knowledgeId;
  dialogVisible.value = true;
  if (params) {
    if (params.knowledgeId) {
      for (const key of Object.keys(formData)) {
        formData[key] = params[key];
      }
    } else {
      formData.parentId = params.parentId;
    }
  }
  return new Promise(resolve => {
    openPromise.value.resolve = resolve;
  });
}
defineExpose({
  open
});
</script>
