﻿<template>
  <div class="page-shell">
    <div class="section-title">我的报名</div>
    <div class="section-subtitle">查看报名状态与签到情况</div>

    <a-table :columns="columns" :data="rows" row-key="id" :pagination="false">
      <template #status="{ record }">
        <a-tag :color="statusColor(record.status)">{{ statusText(record.status) }}</a-tag>
      </template>
      <template #checkinStatus="{ record }">
        <a-tag :color="record.checkinStatus === 'CHECKED' ? 'green' : 'gray'">
          {{ record.checkinStatus === 'CHECKED' ? '已签到' : '未签到' }}
        </a-tag>
      </template>
      <template #action="{ record }">
        <a-button size="mini" type="text" v-if="record.status === 'SIGNED'" @click="cancel(record.activityId)">取消报名</a-button>
        <span v-else>—</span>
      </template>
    </a-table>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { Message } from '@arco-design/web-vue';
import { mySignups } from '../api/me';
import { cancelSignup } from '../api/activities';

const rows = ref([]);

const columns = [
  { title: '活动名称', dataIndex: 'activityTitle' },
  { title: '节气', dataIndex: 'term' },
  { title: '地点', dataIndex: 'location' },
  { title: '活动时间', dataIndex: 'startTime' },
  { title: '报名状态', slotName: 'status' },
  { title: '签到状态', slotName: 'checkinStatus' },
  { title: '操作', slotName: 'action' }
];

const fetchList = async () => {
  const res = await mySignups();
  rows.value = res.data || [];
};

const statusText = (value) => {
  return value === 'SIGNED' ? '已报名' : '已取消';
};

const statusColor = (value) => {
  return value === 'SIGNED' ? 'green' : 'gray';
};

const cancel = async (activityId) => {
  await cancelSignup(activityId);
  Message.success('已取消报名');
  await fetchList();
};

onMounted(fetchList);
</script>
