<template>
  <div>
    <BasicTable @register="registerTable" :searchInfo="searchInfo"> </BasicTable>
  </div>
</template>
<script lang="ts" setup>
  import { reactive,  } from 'vue';

  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { getRoleListByPage, deleteRole } from '@/api/demo/system';

  defineOptions({ name: 'RoleManagement' });

  const searchInfo = reactive < Recordable > ({});

  const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
    // 表格名称
    title: '角色列表',
    // 获取数据的接口
    api: getRoleListByPage,
    // 表单列信息 BasicColumn[]
    columns: [
      {
        title: '角色名称',
        dataIndex: 'name',
        width: 200,
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        width: 180,
      },
    ],
    rowKey: 'id',
    formConfig: {
      labelWidth: 120,
      schemas: [{
        field: 'key',
        label: '关键字',
        component: 'Input',
        colProps: { span: 8 },
      }],
    },
    // 使用搜索表单
    useSearchForm: true,
    // 显示表格设置工具
    showTableSetting: false,
    // 是否显示表格边框
    bordered: true,
    // 序号列
    showIndexColumn: false,
    // 勾选列
    rowSelection: {//多选框
      type: 'checkbox',
    },
    tableSetting: { fullScreen: true },
    isCanResizeParent: true,
    // 搜索
    handleSearchInfoFn(info) {
      return info;
    },
  });

  function getRow() {
    let rows = getSelectRows();
    return rows
  }
  defineExpose({
    getRow
  })

</script>