<template>
  <a-card :bordered="false" :body-style="{ padding: '10px 20px' }">
    <ele-pro-table
      ref="tableRef"
      size="small"
      title="换电记录"
      row-key="id"
      :columns="columns"
      :datasource="datasource"
      :scroll="{ x: 800 }"
    />
  </a-card>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import type { EleProTable } from 'ele-admin-pro/es';
  import type {
    DatasourceFunction,
    ColumnItem
  } from 'ele-admin-pro/es/ele-pro-table/types';
  import { toDateString } from 'ele-admin-pro/es';
  import { pageUsers } from '@/api/system/user';

  // 表格实例
  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);

  // 表格列配置
  const columns = ref<ColumnItem[]>([
    {
      key: 'index',
      width: 48,
      align: 'center',
      fixed: 'left',
      hideInSetting: true,
      customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
    },
    {
      title: '用户账号',
      dataIndex: 'username',
      sorter: true,
      ellipsis: true,
      defaultSortOrder: 'ascend'
    },
    {
      title: '用户名',
      dataIndex: 'nickname',
      sorter: true,
      ellipsis: true
    },
    {
      title: '性别',
      dataIndex: 'sexName',
      width: 140,
      align: 'center',
      sorter: true,
      filters: [
        {
          text: '男',
          value: '男'
        },
        {
          text: '女',
          value: '女'
        }
      ],
      filterMultiple: false,
      defaultFilteredValue: ['男']
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      sorter: true,
      ellipsis: true
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      sorter: true,
      ellipsis: true,
      customRender: ({ text }) => toDateString(text),
      width: 180
    }
  ]);

  // 表格数据源
  const datasource: DatasourceFunction = ({ page, limit, orders, filters }) => {
    return pageUsers({ ...orders, ...filters, page, limit });
  };
</script>
