<template>
  <div class="competition-list">
    <div class="list-header">
      <h2 class="page-title">赛事管理</h2>
      <el-button type="primary" icon="el-icon-plus" @click="handleCreate">
        新建赛事
      </el-button>
    </div>

    <el-table
      :data="competitionList"
      border
      stripe
      style="width: 100%"
      class="data-table"
    >
      <el-table-column
        type="index"
        label="序号"
        width="60"
        align="center"
      />

      <el-table-column
        prop="competitionName"
        label="赛事名称"
        min-width="200"
        show-overflow-tooltip
      />

      <el-table-column
        prop="organizer"
        label="主办单位"
        min-width="150"
        show-overflow-tooltip
      />

      <el-table-column
        prop="location"
        label="举办地点"
        width="120"
      />

      <el-table-column
        prop="competitionTime"
        label="比赛时间"
        width="180"
      />

      <el-table-column
        prop="registrationTime"
        label="报名时间"
        width="180"
      />

      <el-table-column
        label="状态"
        width="100"
        align="center"
      >
        <template #default="scope">
          <el-tag
            :type="getStatusType(scope.row.status)"
            size="small"
          >
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        width="220"
        fixed="right"
        align="center"
      >
        <template #default="scope">
          <el-button
            type="primary"
            link
            size="small"
            icon="el-icon-view"
            @click="handleView(scope.row)"
          >
            查看
          </el-button>
          <el-button
            type="warning"
            link
            size="small"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            link
            size="small"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'CompetitionList',
  data() {
    return {
      competitionList: [
        {
          id: 1,
          competitionName: '2025年全国武术锦标赛',
          organizer: '国家体育总局武术运动管理中心',
          location: '北京',
          venue: '国家奥林匹克体育中心',
          registrationTime: '2025-01-01 至 2025-02-28',
          competitionTime: '2025-03-15 至 2025-03-20',
          status: 1, // 1-未开始 2-报名中 3-进行中 4-已结束
          introduction: '全国最高水平的武术竞技赛事',
          posterImages: [],
          contactPerson: '张主任',
          contactPhone: '010-12345678',
          contactEmail: 'contact@wushu.cn',
          rules: '参赛选手必须持有国家二级运动员及以上证书',
          requirements: '年龄18-35岁，身体健康',
          awards: '冠军奖金10万元，亚军5万元，季军3万元',
          regulationFiles: [],
          schedule: [
            { date: '2025-03-15', time: '09:00-12:00', event: '开幕式', venue: '主场馆' },
            { date: '2025-03-16', time: '09:00-18:00', event: '太极拳比赛', venue: 'A馆' },
            { date: '2025-03-17', time: '09:00-18:00', event: '长拳比赛', venue: 'B馆' },
          ]
        },
        {
          id: 2,
          competitionName: '2025年青少年武术大赛',
          organizer: '中国武术协会',
          location: '上海',
          venue: '上海体育馆',
          registrationTime: '2025-02-01 至 2025-03-31',
          competitionTime: '2025-04-10 至 2025-04-15',
          status: 2,
          introduction: '面向青少年的武术竞技赛事',
          posterImages: [],
          contactPerson: '李教练',
          contactPhone: '021-87654321',
          contactEmail: 'youth@wushu.org',
          rules: '年龄限制6-18岁',
          requirements: '需提供学生证明',
          awards: '设金银铜奖及优秀奖',
          regulationFiles: [],
          schedule: [
            { date: '2025-04-10', time: '09:00-12:00', event: '开幕式', venue: '主场馆' },
            { date: '2025-04-11', time: '09:00-18:00', event: '少年组比赛', venue: 'A馆' },
          ]
        },
        {
          id: 3,
          competitionName: '2025年传统武术邀请赛',
          organizer: '中华武术联合会',
          location: '杭州',
          venue: '杭州国际博览中心',
          registrationTime: '2025-03-01 至 2025-04-30',
          competitionTime: '2025-05-20 至 2025-05-25',
          status: 1,
          introduction: '传统武术项目展示与竞技',
          posterImages: [],
          contactPerson: '王馆长',
          contactPhone: '0571-23456789',
          contactEmail: 'traditional@wushu.com',
          rules: '限传统武术门派参赛',
          requirements: '需提供师承证明',
          awards: '金银铜奖及最佳表演奖',
          regulationFiles: [],
          schedule: [
            { date: '2025-05-20', time: '14:00-17:00', event: '报到', venue: '接待中心' },
            { date: '2025-05-21', time: '09:00-18:00', event: '初赛', venue: '比赛馆' },
          ]
        }
      ]
    };
  },
  mounted() {
    this.loadCompetitionList();
  },
  methods: {
    loadCompetitionList() {
      // 从 localStorage 加载数据
      const savedData = localStorage.getItem('competitionList');
      if (savedData) {
        try {
          this.competitionList = JSON.parse(savedData);
        } catch (e) {
          console.error('加载数据失败', e);
        }
      } else {
        // 首次加载，保存默认数据
        this.saveCompetitionList();
      }
    },

    saveCompetitionList() {
      localStorage.setItem('competitionList', JSON.stringify(this.competitionList));
    },

    getStatusText(status) {
      const statusMap = {
        1: '未开始',
        2: '报名中',
        3: '进行中',
        4: '已结束'
      };
      return statusMap[status] || '未知';
    },

    getStatusType(status) {
      const typeMap = {
        1: 'info',
        2: 'success',
        3: 'warning',
        4: 'danger'
      };
      return typeMap[status] || '';
    },

    handleCreate() {
      this.$router.push({
        path: '/martial/competition/create',
        query: { mode: 'create' }
      });
    },

    handleView(row) {
      this.$router.push({
        path: '/martial/competition/create',
        query: { mode: 'view', id: row.id }
      });
    },

    handleEdit(row) {
      this.$router.push({
        path: '/martial/competition/create',
        query: { mode: 'edit', id: row.id }
      });
    },

    handleDelete(row) {
      this.$confirm('确定要删除该赛事吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const index = this.competitionList.findIndex(item => item.id === row.id);
        if (index !== -1) {
          this.competitionList.splice(index, 1);
          this.saveCompetitionList();
          this.$message.success('删除成功');
        }
      }).catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.competition-list {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  min-height: calc(100vh - 120px);
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f0f0;
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.data-table {
  :deep(.el-table__header) {
    th {
      background-color: #fafafa;
      color: #333;
      font-weight: 600;
    }
  }

  :deep(.el-button--text) {
    padding: 0 8px;
  }
}
</style>
