<template>
    <div style="height:73vh;">
      <vxe-grid ref="tableRef" 
      v-bind="gridOptions" 
      :radio-config="{highlight: true}"
      v-on="gridEvents"
      :columnConfig="{ resizable: true }"
      :row-config="{ isCurrent: true, isHover: true }"
      >
      </vxe-grid>
    </div>
</template>

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

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

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

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

const tableRef = ref();

const selectRow = ref<RowVO | null>(null)

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
  },
  radioConfig: {
      highlight: 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
}

const gridEvents: VxeGridListeners<RowVO> = {
  cellClick ({ row, column }) {
    selectRow.value = row
    setSelectRow(row)
    emit("callback",row)
  },
  cellDblclick ({ row, column }) {
  
  },
  radioChange({ row }) {
    selectRow.value = row;
    setSelectRow(row);
    emit("callback", row);
  } 
}

const setSelectRow = (row) => {
  const $table = tableRef.value
  if ($table) {
    $table.setRadioRow(row)
  }
}

const clearSelect = () => {
  const $table = tableRef.value
  if ($table) {
    selectRow.value = null
    $table.clearRadioRow()
  }
}

defineExpose({
  clearSelect,
  setData,
  getSelUser
});

</script>
