<template>
  <el-dialog v-model="dialogVisible" title="新增" :width="600" center align-center :close-on-click-modal="false" @closed="closed">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
      <el-form-item label="父级标准词" prop="parentStandardWordId">
        <el-cascader
          v-model="formData.parentStandardWordId"
          :options="options"
          :props="{ label: 'wordName', value: 'id', expandTrigger: 'hover', checkStrictly: true, emitPath: false }"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="标准词名称" prop="standardWordName">
        <el-input v-model="formData.standardWordName" placeholder="请输入标准词名称" maxlength="30"></el-input>
      </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>
import { Common } from "@/api/interface";
import { ref, defineExpose, inject, computed } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { addTandardWord } from "@/api/modules/annotation/lexicon";

//* 接收注入
const treeData: any = inject("treeData");
const dialogVisible = ref(false);
//* data
//* ref
const route = useRoute();
const formRef = ref<any>();
const openPromise = ref<any>({});
const formData = ref<any>({ parentStandardWordId: undefined, standardWordName: "" });
const rules = {
  standardWordName: [{ required: true, message: "请输入标准词名称", trigger: "blur" }]
};

const options: any = computed(() => {
  function filterTreeByDepth(tree: Common.ResTreeOptions[], maxDepth: number, currentDepth = 1) {
    const filteredTree: any = [];
    for (const node of tree) {
      const newNode = { ...node }; // 复制节点，以免修改原始数据
      delete newNode.children; // 删除children
      if (node.children && node.children.length > 0 && currentDepth < maxDepth) {
        newNode.children = filterTreeByDepth(node.children, maxDepth, currentDepth + 1);
      }
      filteredTree.push(newNode);
    }

    return filteredTree;
  }
  // 最多有6级标准词，最多选到第5级
  return filterTreeByDepth(treeData.value, 5);
});

// 弹窗关闭
function closed() {
  formRef.value?.resetFields();
}
// 取消
function handleCancel() {
  dialogVisible.value = false;
}
//提交
function handleSubmit() {
  formRef.value?.validate((valid: boolean) => {
    if (!valid) {
      return;
    }
    addTandardWord({
      ...formData.value,
      parentStandardWordId: formData.value.parentStandardWordId || route.query.id
    }).then(() => {
      dialogVisible.value = false;
      openPromise.value.resolve();
      ElMessage.success("新增成功");
    });
  });
}

function open() {
  dialogVisible.value = true;
  return new Promise(resolve => {
    openPromise.value.resolve = resolve;
  });
}
defineExpose({
  open
});
</script>

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