<template>
  <div class="select-account">
    <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>
<style scoped>
  .select-account {
    display: flex;
    height: 100%;
  }
</style>
