<template>
    <div style="height:73vh;">
      <vxe-grid ref="tableRef" v-bind="gridOptions" :radio-config="{highlight: true}">
      </vxe-grid>
    </div>
</template>

<script lang="ts" setup>
import { reactive,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 tableRef = ref();


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

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

const gridOptions = reactive<VxeGridProps<RowVO>>({
  border: true,
  height:"auto",
  rowConfig: {
    keyField: 'id'
  },
  columnConfig: {
    resizable: true
  },
  checkboxConfig: {
    reserve: true
  },
  pagerConfig: {
    enabled: true,
    pageSize: srhParams.value.pageSize
  },
  columns: [
    { type: 'radio', width: 50 },
    { type: 'seq', width: 60 },
    { field: 'username', title: '用户账号'},
    { field: 'realname', title: '用户名称' }
  ],
  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  
  const retData = await setUserData();  
  return {  
    page: {  
      total: retData.total  
    },  
    result: retData.records  
  };  
};
 async function setData() {
  findPageList(1,srhParams.value.pageSize)
}


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

}


function getSelUser() {
  const $table = tableRef.value;
  if ($table) {
    const currRow = $table.getRadioRecord()
    return currRow
  }
  return null
}

defineExpose({
  setData,
  getSelUser
});

</script>
