<!-- 赛事报名记录列表 -->
<template>
  <ele-modal
    :width="1000"
    :visible="visible"
    :maskClosable="false"
    :maxable="maxable"
    :title="'【' + (event?.name || '') + '】报名记录'"
    :body-style="{ paddingBottom: '28px' }"
    @update:visible="updateVisible"
  >
    <a-spin :spinning="loading">
      <ele-pro-table
        ref="tableRef"
        row-key="id"
        :columns="columns"
        :datasource="datasource"
        class="registration-table"
      >
        <template #toolbar>
          <a-space>
            <span class="统计信息">
              共 {{ totalCount }} 人报名，已缴费 {{ paidCount }} 人，待缴费 {{ unpaidCount }} 人
            </span>
          </a-space>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'payStatus'">
            <a-tag v-if="record.payStatus === 0" color="orange">待缴费</a-tag>
            <a-tag v-if="record.payStatus === 1" color="green">已缴费</a-tag>
            <a-tag v-if="record.payStatus === 2" color="red">已取消</a-tag>
          </template>
          <template v-if="column.key === 'realName'">
            <span>{{ record.realName || '-' }}</span>
          </template>
          <template v-if="column.key === 'phone'">
            <span>{{ record.phone || '-' }}</span>
          </template>
          <template v-if="column.key === 'idCard'">
            <span>{{ record.idCard ? record.idCard.substring(0, 4) + '****' + record.idCard.substring(record.idCard.length - 4) : '-' }}</span>
          </template>
          <template v-if="column.key === 'size'">
            <span>{{ record.size || '-' }}</span>
          </template>
          <template v-if="column.key === 'entryFee'">
            <span :class="record.entryFee > 0 ? 'text-price' : 'text-free'">
              {{ record.entryFee > 0 ? '¥' + record.entryFee : '免费' }}
            </span>
          </template>
          <template v-if="column.key === 'paidAt'">
            <span>{{ record.paidAt ? record.paidAt.substring(0, 19) : '-' }}</span>
          </template>
          <template v-if="column.key === 'createTime'">
            <span>{{ record.createTime ? record.createTime.substring(0, 19) : '-' }}</span>
          </template>
        </template>
      </ele-pro-table>
    </a-spin>
  </ele-modal>
</template>

<script lang="ts" setup>
  import { ref, computed, watch } from 'vue';
  import type { EleProTable } from 'ele-admin-pro';
  import type {
    DatasourceFunction,
    ColumnItem
  } from 'ele-admin-pro/es/ele-pro-table/types';
  import { pageShopEventRegistration } from '@/api/shop/shopEvent';
  import type { ShopEvent, ShopEventRegistration, ShopEventRegistrationParam } from '@/api/shop/shopEvent/model';

  const props = defineProps<{
    visible: boolean;
    event?: ShopEvent | null;
  }>();

  const emit = defineEmits<{
    (e: 'done'): void;
    (e: 'update:visible', visible: boolean): void;
  }>();

  const loading = ref(false);
  const maxable = ref(true);
  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);

  // 统计数据
  const totalCount = ref(0);
  const paidCount = ref(0);
  const unpaidCount = ref(0);

  // 表格数据源
  const datasource: DatasourceFunction = ({
    page,
    limit,
    where,
    orders
  }) => {
    return pageShopEventRegistration({
      ...where,
      ...orders,
      eventId: props.event?.id,
      page,
      limit
    }).then((res) => {
      // 统计
      if (res.list) {
        totalCount.value = res.total || res.list.length;
        paidCount.value = res.list.filter((item: ShopEventRegistration) => item.payStatus === 1).length;
        unpaidCount.value = res.list.filter((item: ShopEventRegistration) => item.payStatus === 0).length;
      }
      return res;
    });
  };

  // 列配置
  const columns = ref<ColumnItem[]>([
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      width: 80,
    },
    {
      title: '姓名',
      dataIndex: 'realName',
      key: 'realName',
      width: 100,
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
      width: 120,
    },
    {
      title: '身份证号',
      dataIndex: 'idCard',
      key: 'idCard',
      width: 150,
    },
    {
      title: '尺码',
      dataIndex: 'size',
      key: 'size',
      width: 80,
      align: 'center'
    },
    {
      title: '报名费',
      dataIndex: 'entryFee',
      key: 'entryFee',
      width: 100,
      align: 'center'
    },
    {
      title: '支付状态',
      dataIndex: 'payStatus',
      key: 'payStatus',
      width: 100,
      align: 'center'
    },
    {
      title: '订单号',
      dataIndex: 'orderNo',
      key: 'orderNo',
      width: 180,
      ellipsis: true
    },
    {
      title: '报名时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 160
    },
    {
      title: '缴费时间',
      dataIndex: 'paidAt',
      key: 'paidAt',
      width: 160
    }
  ]);

  const updateVisible = (value: boolean) => {
    emit('update:visible', value);
  };

  watch(
    () => props.visible,
    (visible) => {
      if (visible && props.event?.id) {
        // 刷新数据
        setTimeout(() => {
          tableRef?.value?.reload();
        }, 100);
      }
    },
    { immediate: true }
  );
</script>

<style scoped>
  .统计信息 {
    color: #666;
    font-size: 14px;
  }

  .text-price {
    color: #f5222d;
    font-weight: 500;
  }

  .text-free {
    color: #52c41a;
  }
</style>
