<template>
  <div class="main-box">
    <div class="table-box">
      <ProTable
        ref="proTable"
        row-key="menuId"
        :columns="columns"
        :request-api="getTableList"
        :init-param="initParam"
        :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
        :pagination="false"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button type="primary" :icon="CirclePlus" @click="openDialog('isAdd')">添加知识体</el-button>
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <el-button v-if="scope.row.parentId === 0" type="primary" link :icon="Plus">添加知识元</el-button>
          <el-button type="primary" link :icon="EditPen" @click="openDialog(scope.row)"> 编辑 </el-button>
          <!-- <el-button
            :disabled="scope.row.menuType === 'F'"
            type="primary"
            link
            :icon="Plus"
            @click="openDialog({ parentId: scope.row.menuId })"
          >
            新增
          </el-button> -->
          <el-button type="primary" link :icon="Delete" @click="handleDelete(scope.row)"> 删除 </el-button>
        </template>
      </ProTable>
      <KnowledgeDialog ref="dialogRef" />
    </div>
  </div>
</template>
<script setup lang="ts" name="knowledgeManage">
import { ref, reactive, provide } from "vue";
import { Menu } from "@/api/interface";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import KnowledgeDialog from "./components/KnowledgeDialog.vue";
import { getMenuList, deleteMenu } from "@/api/modules/system/menu";
import { generateTree } from "@/utils";
import { Plus, CirclePlus, Delete, EditPen } from "@element-plus/icons-vue";

// ProTable 实例
const proTable = ref<ProTableInstance>();
const menuOptions = ref<Menu.TreeMenu[]>([]);

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({});
provide("menuOptions", menuOptions);

// 表格配置项
const columns = reactive<ColumnProps<Menu.ResMenuList>[]>([
  { prop: "menuName", label: "名称", align: "left", search: { el: "input" } },
  { prop: "annotation", label: "注释" },
  { prop: "createTime", label: "更新时间", search: { el: "date-range-picker", custom: true } },
  { prop: "annotation", label: "更新人" },
  { prop: "operation", label: "操作", width: 330, fixed: "right" }
]);

// 分页列表获取数据
const getTableList = (params: Menu.ReqMenuParams) => {
  return getMenuList(params).then(res => {
    menuOptions.value = generateTree(res.data as any, { idField: "menuId" }) as Menu.TreeMenu[];
    return {
      ...res,
      data: menuOptions.value
    };
  });
};
// 删除
const handleDelete = async (params: Menu.ResMenuList) => {
  await useHandleData(deleteMenu, [params.menuId], `删除菜单【${params.menuName}】`);
  proTable.value?.getTableList();
};

// 打开 drawer(新增、查看、编辑)
const dialogRef = ref<InstanceType<typeof KnowledgeDialog> | null>(null);
const openDialog = (row?: Partial<Menu.ResMenuList>) => {
  dialogRef.value?.open(row).then(proTable.value?.getTableList);
};
</script>
