<template>
  <div class="score-management-container">
    <el-card shadow="hover">
      <div class="page-header">
        <h2 class="page-title">评分管理</h2>
      </div>

      <!-- 查询栏 -->
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="比赛项目">
          <el-select
            v-model="searchForm.projectId"
            placeholder="请选择比赛项目"
            clearable
            filterable
            size="small"
            style="width: 200px"
            @change="handleSearch"
          >
            <el-option
              v-for="item in projectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="场地">
          <el-select
            v-model="searchForm.venueId"
            placeholder="请选择场地"
            clearable
            filterable
            size="small"
            style="width: 150px"
            @change="handleSearch"
          >
            <el-option
              v-for="item in venueList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="比赛人员">
          <el-input
            v-model="searchForm.playerName"
            placeholder="搜索选手姓名"
            clearable
            size="small"
            style="width: 180px"
          >
            <template #prefix>
              <i class="el-input__icon el-icon-search"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
          <el-button size="small" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格 -->
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        stripe
        size="small"
        style="width: 100%"
        :max-height="600"
      >
        <el-table-column type="index" label="序号" width="60" align="center" fixed></el-table-column>
        <el-table-column prop="projectName" label="比赛项目" min-width="180" show-overflow-tooltip fixed></el-table-column>
        <el-table-column prop="venueName" label="场地" width="120" align="center" fixed></el-table-column>
        <el-table-column prop="playerName" label="比赛人员" width="120" align="center" fixed></el-table-column>

        <!-- 动态裁判评分列 -->
        <el-table-column
          v-for="(judge, index) in judgeColumns"
          :key="'judge-' + index"
          :label="'裁判' + (index + 1) + '分数'"
          width="110"
          align="center"
        >
          <template #default="scope">
            <span :class="getScoreClass(scope.row.judgeScores[index])">
              {{ formatScore(scope.row.judgeScores[index]) }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="总裁判分数" width="120" align="center" fixed="right">
          <template #default="scope">
            <span class="total-score">{{ formatScore(scope.row.totalScore) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="150" align="center" fixed="right">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleViewDetail(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.size"
        layout="total, sizes, prev, pager, next"
        :total="pagination.total"
        small
      ></el-pagination>
    </el-card>

    <!-- 评分详情弹窗 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="评分详情"
      width="700px"
      :close-on-click-modal="false"
    >
      <div v-if="currentDetail" class="detail-content">
        <el-descriptions :column="2" border size="small">
          <el-descriptions-item label="比赛项目">{{ currentDetail.projectName }}</el-descriptions-item>
          <el-descriptions-item label="场地">{{ currentDetail.venueName }}</el-descriptions-item>
          <el-descriptions-item label="选手姓名">{{ currentDetail.playerName }}</el-descriptions-item>
          <el-descriptions-item label="队伍">{{ currentDetail.teamName }}</el-descriptions-item>
          <el-descriptions-item label="身份证">{{ currentDetail.idCard }}</el-descriptions-item>
          <el-descriptions-item label="编号">{{ currentDetail.playerNo }}</el-descriptions-item>
        </el-descriptions>

        <div class="score-section">
          <h4>裁判评分明细</h4>
          <el-table :data="currentDetail.scoreDetails" border size="small" style="margin-top: 10px">
            <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
            <el-table-column prop="judgeName" label="裁判姓名" align="center"></el-table-column>
            <el-table-column prop="score" label="评分" align="center" width="100">
              <template #default="scope">
                <span class="score-value">{{ formatScore(scope.row.score) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="deductions" label="扣分项" show-overflow-tooltip></el-table-column>
            <el-table-column prop="note" label="备注" show-overflow-tooltip></el-table-column>
            <el-table-column prop="scoreTime" label="评分时间" width="150"></el-table-column>
          </el-table>

          <div class="total-score-display">
            <span class="label">总分：</span>
            <span class="value">{{ formatScore(currentDetail.totalScore) }}</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ScoreManagement',
  data() {
    return {
      loading: false,
      searchForm: {
        projectId: null,
        venueId: null,
        playerName: ''
      },
      projectList: [
        { id: 1, name: '女子组长拳' },
        { id: 2, name: '男子组陈氏太极拳' },
        { id: 3, name: '女子组双剑（含长穗双剑）' },
        { id: 4, name: '男子组杨氏太极拳' },
        { id: 5, name: '女子组刀术' },
        { id: 6, name: '男子组棍术' },
        { id: 7, name: '女子组枪术' },
        { id: 8, name: '男子组剑术' }
      ],
      venueList: [
        { id: 1, name: '第一场地' },
        { id: 2, name: '第二场地' },
        { id: 3, name: '第三场地' },
        { id: 4, name: '第四场地' },
        { id: 5, name: '第五场地' }
      ],
      allTableData: [
        {
          id: 1,
          projectName: '男子组陈氏太极拳',
          venueName: '第一场地',
          playerName: '张三',
          teamName: '少林寺武术大学院',
          idCard: '123456789000000000',
          playerNo: '123-4567898275',
          judgeScores: [8.906, 8.905, 8.908, 8.907, 8.906],
          totalScore: 8.907
        },
        {
          id: 2,
          projectName: '女子组长拳',
          venueName: '第一场地',
          playerName: '李四',
          teamName: '武当武术学院',
          idCard: '123456789000000001',
          playerNo: '123-4567898276',
          judgeScores: [9.125, 9.130, 9.128, 9.126, 9.129],
          totalScore: 9.128
        },
        {
          id: 3,
          projectName: '男子组陈氏太极拳',
          venueName: '第二场地',
          playerName: '王五',
          teamName: '峨眉武术协会',
          idCard: '123456789000000002',
          playerNo: '123-4567898277',
          judgeScores: [8.550, 8.548, 8.552, 8.551, 8.549],
          totalScore: 8.550
        },
        {
          id: 4,
          projectName: '女子组双剑（含长穗双剑）',
          venueName: '第一场地',
          playerName: '赵六',
          teamName: '昆仑武术馆',
          idCard: '123456789000000003',
          playerNo: '123-4567898278',
          judgeScores: [9.245, 9.248, 9.246, 9.247, 9.249],
          totalScore: 9.247
        },
        {
          id: 5,
          projectName: '男子组杨氏太极拳',
          venueName: '第三场地',
          playerName: '孙七',
          teamName: '华山武术学校',
          idCard: '123456789000000004',
          playerNo: '123-4567898279',
          judgeScores: [8.785, 8.788, 8.786, 8.787, 8.785],
          totalScore: 8.786
        },
        {
          id: 6,
          projectName: '女子组刀术',
          venueName: '第二场地',
          playerName: '周八',
          teamName: '少林寺武术大学院',
          idCard: '123456789000000005',
          playerNo: '123-4567898280',
          judgeScores: [8.925, 8.928, 8.926, 8.927, 8.925],
          totalScore: 8.926
        },
        {
          id: 7,
          projectName: '男子组棍术',
          venueName: '第四场地',
          playerName: '吴九',
          teamName: '武当武术学院',
          idCard: '123456789000000006',
          playerNo: '123-4567898281',
          judgeScores: [9.015, 9.018, 9.016, 9.017, 9.015],
          totalScore: 9.016
        },
        {
          id: 8,
          projectName: '女子组枪术',
          venueName: '第三场地',
          playerName: '郑十',
          teamName: '峨眉武术协会',
          idCard: '123456789000000007',
          playerNo: '123-4567898282',
          judgeScores: [8.665, 8.668, 8.666, 8.667, 8.665],
          totalScore: 8.666
        }
      ],
      tableData: [],
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      judgeColumns: Array(5).fill(null), // 5个裁判
      detailDialogVisible: false,
      currentDetail: null
    }
  },
  mounted() {
    this.loadScoreList()
  },
  methods: {
    // 从 localStorage 加载数据
    loadScoreList() {
      const savedData = localStorage.getItem('scoreList')
      if (savedData) {
        try {
          this.allTableData = JSON.parse(savedData)
        } catch (e) {
          console.error('加载评分数据失败', e)
        }
      } else {
        // 首次加载，保存默认数据
        this.saveScoreList()
      }
      this.fetchData()
    },

    // 保存数据到 localStorage
    saveScoreList() {
      localStorage.setItem('scoreList', JSON.stringify(this.allTableData))
    },

    // 获取评分数据
    fetchData() {
      this.loading = true

      setTimeout(() => {
        // 过滤数据
        let filteredData = [...this.allTableData]

        if (this.searchForm.projectId) {
          const project = this.projectList.find(p => p.id === this.searchForm.projectId)
          if (project) {
            filteredData = filteredData.filter(item => item.projectName === project.name)
          }
        }

        if (this.searchForm.venueId) {
          const venue = this.venueList.find(v => v.id === this.searchForm.venueId)
          if (venue) {
            filteredData = filteredData.filter(item => item.venueName === venue.name)
          }
        }

        if (this.searchForm.playerName) {
          filteredData = filteredData.filter(item =>
            item.playerName.includes(this.searchForm.playerName)
          )
        }

        this.pagination.total = filteredData.length

        // 分页
        const start = (this.pagination.current - 1) * this.pagination.size
        const end = start + this.pagination.size
        this.tableData = filteredData.slice(start, end)

        this.loading = false
      }, 300)
    },

    // 查询
    handleSearch() {
      this.pagination.current = 1
      this.fetchData()
    },

    // 重置
    handleReset() {
      this.searchForm = {
        projectId: null,
        venueId: null,
        playerName: ''
      }
      this.handleSearch()
    },

    // 分页大小变化
    handleSizeChange(size) {
      this.pagination.size = size
      this.fetchData()
    },

    // 当前页变化
    handleCurrentChange(current) {
      this.pagination.current = current
      this.fetchData()
    },

    // 查看详情
    handleViewDetail(row) {
      this.currentDetail = {
        ...row,
        scoreDetails: [
          { judgeName: '裁判1', score: row.judgeScores[0], deductions: '无', note: '', scoreTime: '2025-11-29 10:30:00' },
          { judgeName: '裁判2', score: row.judgeScores[1], deductions: '无', note: '', scoreTime: '2025-11-29 10:30:05' },
          { judgeName: '裁判3', score: row.judgeScores[2], deductions: '扣分项描述', note: '动作不规范', scoreTime: '2025-11-29 10:30:10' },
          { judgeName: '裁判4', score: row.judgeScores[3], deductions: '无', note: '', scoreTime: '2025-11-29 10:30:15' },
          { judgeName: '裁判5', score: row.judgeScores[4], deductions: '无', note: '表现优秀', scoreTime: '2025-11-29 10:30:20' }
        ]
      }
      this.detailDialogVisible = true
    },

    // 格式化分数
    formatScore(score) {
      if (score === null || score === undefined) {
        return '-'
      }
      return Number(score).toFixed(3)
    },

    // 分数样式
    getScoreClass(score) {
      if (!score) return ''
      if (score >= 9.0) return 'high-score'
      if (score >= 8.5) return 'medium-score'
      return 'low-score'
    }
  }
}
</script>

<style lang="scss" scoped>
.score-management-container {
  min-height: 100%;
  padding: 15px;
  background: #fff;

  .page-header {
    margin-bottom: 15px;

    .page-title {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: #2c3e50;
    }
  }

  .search-form {
    margin-bottom: 15px;

    ::v-deep(.el-form-item__label) {
      font-weight: 500;
    }
  }

  .high-score {
    color: #67c23a;
    font-weight: 600;
  }

  .medium-score {
    color: #e6a23c;
    font-weight: 600;
  }

  .low-score {
    color: #f56c6c;
    font-weight: 600;
  }

  .total-score {
    color: #1b7c5e;
    font-weight: 700;
    font-size: 14px;
  }

  .pagination {
    margin-top: 15px;
    text-align: right;
  }

  .detail-content {
    .score-section {
      margin-top: 20px;

      h4 {
        margin: 0 0 10px;
        font-size: 14px;
        color: #333;
      }

      .score-value {
        color: #1b7c5e;
        font-weight: 600;
      }

      .total-score-display {
        margin-top: 15px;
        padding: 15px;
        background: linear-gradient(135deg, #e8f5f2 0%, #f0f9f6 100%);
        border-radius: 8px;
        text-align: center;

        .label {
          font-size: 16px;
          color: #666;
          margin-right: 10px;
        }

        .value {
          font-size: 28px;
          font-weight: 700;
          color: #1b7c5e;
        }
      }
    }
  }
}
</style>
