<script setup lang="ts">
import type { VbenFormProps } from '@vben/common-ui';

import type { KnowledgeType } from './config-data';

import type { VxeGridProps } from '#/adapter/vxe-table';

import { useRouter } from 'vue-router';

import { Page, useVbenDrawer } from '@vben/common-ui';

import { ElImage, ElMessageBox } from 'element-plus';

import { useVbenVxeGrid } from '#/adapter/vxe-table';

import { queryFormSchema, tableColumns } from './config-data';
import TypeDrawer from './type-drawer.vue';

const router = useRouter();

// 模拟API调用，实际项目中需要替换为真实API
const getKnowledgeTypeList = async (params: any) => {
  // 模拟数据
  const mockData = {
    rows: [
      {
        id: '1',
        name: '产品知识',
        icon: '/icon/1.png',
        description: '产品相关知识',
        admin: 'admin',
        applicableEnd: 'pc',
        applicablePost: 'admin',
        createTime: '2024-01-01 10:00:00',
        createUser: 'admin',
      },
      {
        id: '2',
        name: '技术文档',
        icon: '/icon/3.png',
        description: '技术相关文档',
        admin: 'admin',
        applicableEnd: 'dingtalk',
        applicablePost: 'tech',
        createTime: '2024-01-02 11:00:00',
        createUser: 'admin',
      },
      {
        id: '3',
        name: '常见问题',
        icon: '/icon/4.png',
        description: '常见问题解答',
        admin: 'admin',
        applicableEnd: 'pc',
        applicablePost: 'user',
        createTime: '2024-01-03 14:00:00',
        createUser: 'admin',
      },
      {
        id: '4',
        name: '用户指南',
        icon: 'carbon:book-open',
        description: '用户使用指南',
        admin: 'admin',
        applicableEnd: 'dingtalk',
        applicablePost: 'user',
        createTime: '2024-01-04 16:00:00',
        createUser: 'admin',
      },
    ],
    total: 4,
  };
  return mockData;
};

// 定义侧拉
const [TypeDrawerCom, typeDrawerApi] = useVbenDrawer({
  connectedComponent: TypeDrawer,
});

const deleteKnowledgeType = async (ids: string[]) => {
  // 模拟删除操作
  // console.log('删除知识库类别', ids);
  return { success: true };
};

// 查询表单配置
const formOptions: VbenFormProps = {
  commonConfig: {
    labelWidth: 80,
    componentProps: {
      allowClear: true,
    },
  },
  schema: queryFormSchema(),
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
};

// 列表配置
const gridOptions: VxeGridProps = {
  checkboxConfig: {
    // 高亮
    highlight: true,
    // 翻页时保留选中状态
    reserve: true,
    // 点击行选中
    trigger: 'default',
  },
  columns: tableColumns,
  size: 'medium',
  height: 'auto',
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues = {}) => {
        const resp = await getKnowledgeTypeList({
          ...formValues,
          pageNum: page.currentPage,
          pageSize: page.pageSize,
        });
        return { items: resp.rows, total: resp.total };
      },
    },
  },
  rowConfig: {
    keyField: 'id',
  },
  toolbarConfig: {
    custom: true,
    refresh: true,
    zoom: true,
  },
  id: 'knowledge-type-index',
};

// 创建列表实例
const [BasicTable, BasicTableApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
});

// 新增知识库类别
const handleAdd = () => {
  // 调用抽屉组件的open方法
  typeDrawerApi.setData({ isUpdate: false }).open();
};

// 编辑知识库类别
const handleEdit = (row: KnowledgeType) => {
  // 调用抽屉组件的open方法
  typeDrawerApi.setData({ id: row.id, isUpdate: true }).open();
};

// 查看知识库类别详情
const handleView = (row: KnowledgeType) => {
  // 实际项目中可以跳转到详情页面

  router.push(`/knowledge/detail/${row.id}`);
};

// 删除知识库类别
const handleDelete = async (row: KnowledgeType) => {
  try {
    await ElMessageBox.confirm(`确认删除知识库类别"${row.name}"吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    });
    await deleteKnowledgeType([row.id]);
    await BasicTableApi.reload();
  } catch {
    // 取消删除操作
  }
};
</script>

<template>
  <Page :auto-content-height="true">
    <BasicTable table-title="知识库类别列表">
      <!-- 自定义图标列 -->
      <template #icon="{ row }">
        <ElImage style="width: 30px; height: 30px" :src="row.icon" />
      </template>

      <!-- 自定义操作列 -->
      <template #action="{ row }">
        <el-button size="small" type="info" plain @click="handleView(row)">
          查看
        </el-button>
        <el-button size="small" type="primary" plain @click="handleEdit(row)">
          编辑
        </el-button>
      </template>

      <!-- 自定义工具栏 -->
      <template #toolbar-tools>
        <el-button type="primary" @click="handleAdd">新增</el-button>
      </template>
    </BasicTable>

    <!-- 抽屉组件 -->
    <TypeDrawerCom />
  </Page>
</template>
