<template>
  <div class="participant-list">
    <div class="list-header">
      <h2 class="page-title">参赛选手管理</h2>
      <el-button type="primary" icon="el-icon-plus" @click="handleCreate">
        添加选手
      </el-button>
    </div>

    <el-form :inline="true" :model="searchForm" class="search-form">
      <el-form-item>
        <el-input
          v-model="searchForm.keyword"
          placeholder="搜索选手姓名"
          clearable
          size="small"
          style="width: 240px"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchForm.competitionId" placeholder="选择赛事" clearable size="small" style="width: 200px">
          <el-option label="全部赛事" :value="null" />
          <el-option
            v-for="item in competitionOptions"
            :key="item.id"
            :label="item.competitionName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
      </el-form-item>
    </el-form>

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

      <el-table-column
        prop="playerName"
        label="选手姓名"
        width="120"
      />

      <el-table-column
        prop="competitionName"
        label="所属赛事"
        min-width="180"
        show-overflow-tooltip
      />

      <el-table-column
        prop="projectName"
        label="参赛项目"
        width="120"
      />

      <el-table-column
        prop="category"
        label="组别"
        width="100"
      />

      <el-table-column
        label="性别"
        width="80"
        align="center"
      >
        <template #default="scope">
          <el-tag :type="scope.row.gender === 1 ? 'primary' : 'danger'" size="small">
            {{ scope.row.gender === 1 ? '男' : '女' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="age"
        label="年龄"
        width="80"
        align="center"
      />

      <el-table-column
        prop="organization"
        label="所属单位"
        min-width="150"
        show-overflow-tooltip
      />

      <el-table-column
        prop="contactPhone"
        label="联系电话"
        width="120"
      />

      <el-table-column
        prop="orderNum"
        label="出场顺序"
        width="100"
        align="center"
      />

      <el-table-column
        label="操作"
        width="180"
        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: 'ParticipantList',
  data() {
    return {
      searchForm: {
        keyword: '',
        competitionId: null
      },
      competitionOptions: [
        { id: 1, competitionName: '2025年全国武术锦标赛' },
        { id: 2, competitionName: '2025年青少年武术大赛' },
        { id: 3, competitionName: '2025年传统武术邀请赛' }
      ],
      participantList: [
        {
          id: 1,
          competitionId: 1,
          competitionName: '2025年全国武术锦标赛',
          playerName: '张伟',
          gender: 1,
          age: 25,
          contactPhone: '13800138001',
          organization: '北京武术队',
          idCard: '110101199001011234',
          projectName: '太极拳',
          category: '成年男子组',
          orderNum: 1,
          introduction: '国家一级运动员',
          attachments: []
        },
        {
          id: 2,
          competitionId: 1,
          competitionName: '2025年全国武术锦标赛',
          playerName: '李娜',
          gender: 2,
          age: 22,
          contactPhone: '13800138002',
          organization: '上海武术队',
          idCard: '310101199201011234',
          projectName: '长拳',
          category: '成年女子组',
          orderNum: 2,
          introduction: '国家二级运动员',
          attachments: []
        },
        {
          id: 3,
          competitionId: 2,
          competitionName: '2025年青少年武术大赛',
          playerName: '王小明',
          gender: 1,
          age: 16,
          contactPhone: '13800138003',
          organization: '广州市体校',
          idCard: '440101200801011234',
          projectName: '剑术',
          category: '少年男子组',
          orderNum: 1,
          introduction: '市级青少年冠军',
          attachments: []
        },
        {
          id: 4,
          competitionId: 2,
          competitionName: '2025年青少年武术大赛',
          playerName: '赵小红',
          gender: 2,
          age: 15,
          contactPhone: '13800138004',
          organization: '深圳市体校',
          idCard: '440301200901011234',
          projectName: '刀术',
          category: '少年女子组',
          orderNum: 2,
          introduction: '省级青少年亚军',
          attachments: []
        },
        {
          id: 5,
          competitionId: 3,
          competitionName: '2025年传统武术邀请赛',
          playerName: '孙师傅',
          gender: 1,
          age: 45,
          contactPhone: '13800138005',
          organization: '武当派',
          idCard: '420101197901011234',
          projectName: '太极剑',
          category: '中年组',
          orderNum: 1,
          introduction: '武当第十五代传人',
          attachments: []
        }
      ]
    };
  },
  mounted() {
    this.loadParticipantList();
  },
  methods: {
    loadParticipantList() {
      // 从 localStorage 加载数据
      const savedData = localStorage.getItem('participantList');
      if (savedData) {
        try {
          this.participantList = JSON.parse(savedData);
        } catch (e) {
          console.error('加载数据失败', e);
        }
      } else {
        // 首次加载，保存默认数据
        this.saveParticipantList();
      }

      // 加载赛事选项
      const competitionData = localStorage.getItem('competitionList');
      if (competitionData) {
        try {
          this.competitionOptions = JSON.parse(competitionData);
        } catch (e) {
          console.error('加载赛事数据失败', e);
        }
      }
    },

    saveParticipantList() {
      localStorage.setItem('participantList', JSON.stringify(this.participantList));
    },

    handleSearch() {
      // 实现搜索逻辑
      this.loadParticipantList();
    },

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

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

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

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

<style lang="scss" scoped>
.participant-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;
}

.search-form {
  margin-bottom: 20px;
}

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

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