<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,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'
  },
  columnConfig: {
    resizable: true
  },
  checkboxConfig: {
    reserve: true
  },
  pagerConfig: {
    enabled: true,
    pageSize: 10
  },
  columns: [
    { type: 'radio', width: 50 },
    { type: 'seq', width: 60 },
    { field: 'username', title: '用户账号'},
    { field: 'realname', title: '用户名称' }
  ],
  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;  
  const retData = await setUserData();  
  return {  
    page: {  
      total: retData.total  
    },  
    result: retData.records  
  };  
};

async function iniData() {
  showUserDrawer.value = true;
  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>
