<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <BasicTable class="w-4/4 xl:w-5/5" @register="registerTable" @fetch-success="onFetchSuccess">
      <template #toolbar>
        <a-button type="primary" @click="handleAddForm">自定义功能数据权限</a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '编辑',
                onClick: () => {
                  handleEdit(record);
                },
              },
              {
                label: '删除',
                color: 'error',
                onClick: () => {
                  handleDelete(record);
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <MenuDrawer @register="registerDrawer" @success="handleSuccess" />
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { nextTick, onMounted, ref } from 'vue';

  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { PageWrapper } from '@/components/Page';
  import { useDrawer } from '@/components/Drawer';
  import { useMessage } from '@/hooks/web/useMessage';
  import { MenuDrawer } from './page';
  // api
  import { columns, searchFormSchema } from './index.data';
  import { getTablesListData, getDetailsData, delTableData } from '@/api/permission/data';
  import { getRoleListByPage } from '@/api/demo/system';

  const { createConfirm, createMessage } = useMessage();

  // 列表
  const [registerTable, { reload, expandAll, clearSelectedRowKeys }] = useTable({
    title: '表单列表',
    api: getTablesListData,
    columns,
    rowKey: 'id',
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    striped: false,
    // 序号列
    showIndexColumn: true,
    // 使用搜索表单
    useSearchForm: true,
    // 显示表格设置工具
    showTableSetting: true,
    bordered: true,
    beforeFetch(data) {
      console.log('beforeFetch', data);
    },
    afterFetch(data) {
      console.log('afterFetch', data);
    },
    actionColumn: {
      width: 200,
      title: '操作',
      dataIndex: 'action',
    },
    handleSearchInfoFn(info) {
      return info;
    },
  });

  // 表单列表新增和编辑弹窗
  const [registerDrawer, { openDrawer }] = useDrawer();

  // 表单列表-新增
  function handleAddForm() {
    openDrawer(true, {
      isUpdate: false,
    });
  }
  // 表单列表-编辑
  function handleEdit(record) {
    openDrawer(true, {
      record,
      isUpdate: true,
    });
  }
  // 表单列表-保存后
  function handleSuccess() {
    reload();
  }
  // 表单列表-删除
  async function handleDelete(record) {
    var query = {
      id: record.id,
    };
    createConfirm({
      iconType: 'warning',
      title: '删除',
      content: '确定要删除此条数据吗？',
      onOk: async () => {
        let result = await delTableData(query);
        if (result) {
          createMessage.success('删除成功!');
        } else {
          createMessage.error('删除失败!');
        }
        reload();
      },
    });
  }

  // 演示默认展开所有表项
  function onFetchSuccess() {
    nextTick(expandAll);
  }

  onMounted(() => {});
</script>
