<template>
  <!-- <PageWrapper dense contentFullHeight fixedHeight contentClass="flex"> -->
  <div class="select-account">
    <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
    <BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo" />
  </div>
  <!-- </PageWrapper> -->
</template>
<script lang="ts" setup>
  import { reactive, watch, defineProps } from 'vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { getAccountList, deleteAccount } from '@/api/demo/system';
  import { PageWrapper } from '@/components/Page';
  import DeptTree from './DeptTree.vue';
  import { useMessage } from '/@/hooks/web/useMessage';

  import { columns, searchFormSchema } from './account.data';

  defineOptions({ name: 'AccountManagement' });

  const searchInfo = reactive<Recordable>({});
  const [
    registerTable,
    { reload, updateTableDataRecord, getSelectRows, clearSelectedRowKeys, setSelectedRowKeys },
  ] = useTable({
    title: '账号列表',
    api: getAccountList,
    rowKey: 'id',
    columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
      autoSubmitOnEnter: true,
    },
    rowSelection: {
      //多选框
      type: 'checkbox',
    },
    useSearchForm: true,
    showTableSetting: false,
    bordered: true,
    tableSetting: { fullScreen: true },
    isCanResizeParent: true,
    handleSearchInfoFn(info) {
      console.log('handleSearchInfoFn', info);
      return info;
    },
  });
  const props = defineProps({
    selectListValue: {
      type: Object,
      default: () => {
        return [];
      },
    },
  });
  watch(
    () => props.selectListValue,
    (newVal: any) => {
      setSelectedRowKeys(newVal);
    },
  );
  function handleSelect(orgId = '') {
    searchInfo.orgId = orgId;
    reload();
  }

  function getRow() {
    let rows = getSelectRows();
    return rows;
  }
  defineExpose({
    getRow,
  });
</script>
<style scoped>
  .select-account {
    display: flex;
    height: 100%;
  }
</style>
