<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';

  const selectedValue = defineModel();

  // 选择框实例
  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>
