<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :showCancelBtn="false"
    :showOkBtn="false"
    width="60%"
    title="查看账号"
  >
    <BasicTable @register="registerTable" :searchInfo="searchInfo" />
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { loadByRole } from '@/api/demo/system';
  import { BasicTable, useTable } from '@/components/Table';

  defineOptions({ name: 'DeptModal' });

  const emit = defineEmits(['success', 'register']);
  const rowId = ref('');
  const searchInfo = reactive<Recordable>({});

  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false });
    rowId.value = data.record.id;
    searchInfo.roleId = rowId.value;
    reload();
  });
   // 异步传参后查询历史记录表格
   const [registerTable, { reload }] = useTable({
    canResize: true,
    resizeHeightOffset: 150,
    api: loadByRole,
    columns: [
      {
        title: '用户名',
        dataIndex: 'account',
      },
      {
        title: '昵称',
        dataIndex: 'name',
      },
    ],
    rowKey: 'id',
    showTableSetting: false,
    handleSearchInfoFn(info) {
      return info;
    },
  });

  onMounted(() => {});
</script>
<style scoped>
  .select-account {
    display: flex;
    height: 100%;
  }
</style>
