<template>
    <div style="max-width: 260px">
      <ele-table-select
        ref="selectRef"
        :multiple="false"
        :allow-clear="true"
        placeholder="请选择"
        value-key="userId"
        label-key="nickname"
        v-model:value="selectedValue"
        :table-config="tableConfig"
        :overlay-style="{ width: '520px', maxWidth: '80%' }"
      >
        <!-- 表头工具栏 -->
        <template #toolbar>
          <user-advanced-search @search="search"/>
        </template>
      </ele-table-select>
    </div>
    <!-- <div style="margin-top: 12px">
      <a-button type="primary" @click="setInitValue">回显数据</a-button>
    </div> -->
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { listUsers } from '@/api/system/user';
  import UserAdvancedSearch from './user-advanced-search.vue';
  import type { EleTableSelect } from 'ele-admin-pro/es';
  import type { ProTableProps } from 'ele-admin-pro/es/ele-pro-table/types';
  import type { WhereType } from '../types';
  import type { User, UserParam } from '@/api/system/user/model';

  const selectedValue = ref<number[]>([]);

  // 选择框实例
  const selectRef = ref<InstanceType<typeof EleTableSelect> | null>(null);

  // 表格配置
  const tableConfig = reactive<ProTableProps>({
    datasource: ({ page, limit, where, orders }) => {
      return listUsers({ ...where, ...orders, page, limit });
    },
    columns: [
      {
        title: '用户编号',
        dataIndex: 'userId',
        sorter: true,
        showSorterTooltip: false
      },
      {
        title: '用户名',
        key: 'nickname',
        dataIndex: 'nickname',
        sorter: false,
        showSorterTooltip: false
      },
      ,
      {
        title: '手机号',
        key: 'phone',
        dataIndex: 'phone',
        sorter: false,
        showSorterTooltip: false
      }
    ],
    toolkit: ['reload', 'columns'],
    pageSize: 5,
    pageSizeOptions: ['5', '10', '15', '20'],
    size: 'small',
    rowSelection: {
      columnWidth: 38,
      preserveSelectedRowKeys: true,
      fixed: 'left'
    },
    toolsTheme: 'default',
    bordered: true,
    toolStyle: {
      padding: '0 8px'
    },
    scroll: { x: 480 }
  });

  // 搜索
  const search = (where: WhereType) => {
    selectRef.value?.reload({
      where,
      page: 1
    });
  };
</script>
