<template>
  <a-drawer title="用户列表" placement="right" width="40%" :visible="showUserDrawer" @close="closeUserDrawer" :style="{ position: 'absolute' }">
    <div style="height: 100%">
      <vxe-grid ref="tableRef" v-bind="gridOptions" :radio-config="{ highlight: true }">
        <template #toolbar_buttons>
          <blockquote>
            <span> 请选择用户 </span>
            <vxe-button mode="text" status="primary" @click="handleClick()"> 确定 </vxe-button>
          </blockquote>
        </template>
      </vxe-grid>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
  import { reactive,nextTick, ref } from 'vue';
  import { VxeGridProps } from 'vxe-table';
  import { defHttp } from '/@/utils/http/axios';

  interface RowVO {
    id: string;
    username: string;
    nickname: string;
  }

  interface SrhParam {
    username: string;
    column: string;
    order: string;
    pageNo: number;
    pageSize: number;
  }

  const showUserDrawer = ref(false);
  const tableRef = ref();

  const emit = defineEmits(['callBack']);

  const srhParams = ref<SrhParam>({
    username: '',
    column: '',
    order: '',
    pageNo: 1,
    pageSize: 10,
  });

  const gridOptions = reactive<VxeGridProps<RowVO>>({
    border: true,
    height: 'auto',
    rowConfig: {
      keyField: 'id',
      useKey:true
    },
    columnConfig: {
      resizable: true,
      useKey:true
    },
    checkboxConfig: {
      reserve: true,
    },
    pagerConfig: {
      enabled: true,
      pageSize: 10,
    },
    columns: [
      { type: 'radio', width: 50 },
      { type: 'seq', width: 60 },
      { field: 'username', title: '用户账号' },
      { field: 'realname', title: '用户名称' },
    ],
    loading:false,
    toolbarConfig: {
      refresh: false,
      zoom: true,
      custom: true,
      export: true,
      print: true,
      slots: {
        buttons: 'toolbar_buttons',
      },
    },
    proxyConfig: {
      seq: true,
      props: {
        result: 'result',
        total: 'page.total',
      },
      ajax: {
        query: ({ page }) => {
          return findPageList(page.currentPage, page.pageSize);
        },
      },
    },
  });

  const findPageList = async (currentPage: number, pageSize: number) => {
    srhParams.value.pageNo = currentPage;
    srhParams.value.pageSize = pageSize;
    gridOptions.loading = true
    const retData = await setUserData();
    gridOptions.loading = false
    return {
      page: {
        total: retData.total,
      },
      result: retData.records,
    };
  };

  
  async function iniData() {
    showUserDrawer.value = true;
    nextTick();
    await findPageList(1, 10);
  }

  function closeUserDrawer() {
    showUserDrawer.value = false;
  }

  async function setUserData() {
    return await defHttp.get({ url: '/sys/user/list', params: srhParams.value });
  }

  function handleClick() {
    let ids = [];
    const $table = tableRef.value;
    if ($table) {
      const currRow = $table.getRadioRecord();
      emit('callBack', currRow);
    }
    closeUserDrawer();
    return ids;
  }

  defineExpose({
    iniData,
  });
</script>
