<template>
  <div class="page">
    <div class="ele-body">
      <a-card
        :bordered="false"
        :body-style="{ padding: '16px' }"
      >
        <ele-pro-table
          ref="tableRef"
          row-key="id"
          :dataSource="list"
          :columns="columns"
          :pagination="false"
        >
          <template #toolbar>
            <search />
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'avatar'">
              <a-avatar
                :size="30"
                :src="`${record.avatar}`"
                style="margin-right: 4px"
              >
                <template #icon>
                  <UserOutlined />
                </template>
              </a-avatar>
            </template>
            <template v-if="column.key === 'action'">
              <a-space>
                <a-button type="primary">选择</a-button>
              </a-space>
            </template>
          </template>
        </ele-pro-table>
      </a-card>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import type { ColumnItem } from 'ele-admin-pro/es/ele-pro-table/types';
  import Search from './components/search.vue';
  const list = ref<any[]>();
  const columns = ref<ColumnItem[]>([
    // {
    //   key: 'index',
    //   width: 48,
    //   align: 'center',
    //   fixed: 'left',
    //   hideInSetting: true,
    //   customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
    // },
    {
      title: '会员卡名称',
      dataIndex: 'title',
      key: 'title'
    },
    {
      title: '卡类型',
      dataIndex: 'actualViews',
      hideInTable: true,
      sorter: true
    },
    {
      title: '数量',
      dataIndex: 'sortNumber',
      align: 'center',
      sorter: true
    },
    {
      title: '数量统计',
      key: 'status',
      hideInTable: true,
      filterMultiple: false,
      align: 'center'
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 120,
      align: 'center',
      sorter: true
    },
    {
      title: '操作',
      key: 'action',
      width: 100,
      align: 'center'
    }
  ]);
</script>

<style scoped lang="less"></style>
