<template>
  <view class="container">
    <!-- 自定义导航栏 -->
    <view class="nav-bar">
      <view class="nav-title">评分系统</view>
      <view class="nav-right">
        <view class="icon-menu">···</view>
        <view class="icon-close">⊗</view>
      </view>
    </view>

    <!-- 比赛信息 -->
    <view class="match-info">
      <view class="match-title">
        2025年全国武术散打锦标赛暨第十七届世界武术锦标赛选拔赛
      </view>
      <view class="match-time">比赛时间：2025年6月25日 9:00</view>
    </view>

    <!-- 场地和项目选择 -->
    <view class="venue-section">
      <view class="venue-header">
        <view class="venue-tab active">第一场地</view>
      </view>

      <view class="project-section">
        <view class="project-btn active">男子组陈氏太极拳</view>
      </view>
    </view>

    <!-- 已评分统计 -->
    <view class="score-stats">
      <text class="stats-text">已评分：</text>
      <text class="stats-number">2/30</text>
    </view>


    <!-- 选手列表 -->
    <view class="player-list">
      <!-- 第一个选手 - 显示我的评分和总分 -->
      <view class="player-card">
        <view class="player-header">
          <view class="player-name">张三</view>
          <view class="player-scores">
            <text class="my-score">我的评分：8.906</text>
            <text class="total-score">总分：8.907</text>
          </view>
        </view>
        <view class="player-info">
          <view class="info-item">身份证：123456789000000000</view>
          <view class="info-item">队伍：少林寺武术大学院</view>
          <view class="info-item">编号：123-45678​98275</view>
        </view>
      </view>

      <!-- 第二个选手 - 裁判长功能 -->
      <view class="player-card">
        <view class="player-header">
          <view class="player-name">张三</view>
          <view class="action-area">
            <button class="score-btn" @click="goToScoreDetail">评分</button>
          </view>
        </view>
        <view class="player-info">
          <view class="info-item">身份证：123456789000000000</view>
          <view class="info-item">队伍：少林寺武术大学院</view>
          <view class="info-item">编号：123-45678​98275</view>
        </view>
      </view>

      <!-- 第三个选手 - 简单样式 -->
      <view class="player-card">
        <view class="player-header">
          <view class="player-name">张三</view>
          <button class="score-btn" @click="goToScoreDetail">评分</button>
        </view>
        <view class="player-info">
          <view class="info-item">身份证：123456789000000000</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  methods: {
    goToScoreDetail() {
      uni.navigateTo({
        url: '/pages/score-detail/score-detail'
      })
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 40rpx;
}

/* 导航栏 */
.nav-bar {
  height: 90rpx;
  background: linear-gradient(135deg, #1B7C5E 0%, #2A9D7E 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 30rpx;
}

.nav-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 2rpx;
}

.nav-right {
  position: absolute;
  right: 30rpx;
  display: flex;
  align-items: center;
  gap: 30rpx;
}

.icon-menu,
.icon-close {
  width: 60rpx;
  height: 60rpx;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #FFFFFF;
  font-weight: bold;
}

/* 比赛信息 */
.match-info {
  padding: 30rpx;
  background-color: #F5F5F5;
}

.match-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  line-height: 1.6;
  margin-bottom: 10rpx;
}

.tip-text {
  font-size: 24rpx;
  color: #FF4D6A;
  margin-bottom: 10rpx;
}

.match-time {
  font-size: 28rpx;
  color: #666666;
}

/* 场地和项目区域 */
.venue-section {
  background-color: #FFFFFF;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.venue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 4rpx solid #1B7C5E;
}

.venue-tab {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  position: relative;
}

.venue-tab.active::after {
  content: '';
  position: absolute;
  bottom: -24rpx;
  left: 0;
  right: 0;
  height: 4rpx;
  background-color: #1B7C5E;
}

.refresh-hint {
  font-size: 24rpx;
  color: #FF4D6A;
}

.project-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.project-btn {
  padding: 20rpx 40rpx;
  background-color: #FFFFFF;
  border: 2rpx solid #1B7C5E;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #1B7C5E;
  font-weight: 500;
}

.project-btn.active {
  background-color: #1B7C5E;
  color: #FFFFFF;
}

.project-tip {
  font-size: 22rpx;
  color: #FF4D6A;
  flex: 1;
  margin-left: 20rpx;
  line-height: 1.5;
}

/* 评分统计 */
.score-stats {
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  color: #333333;
}

.stats-text {
  color: #666666;
}

.stats-number {
  color: #1B7C5E;
  font-weight: 600;
}

.warning-tip {
  padding: 0 30rpx 20rpx;
  font-size: 24rpx;
  color: #FF4D6A;
}

/* 选手列表 */
.player-list {
  padding: 0 30rpx;
}

.player-card {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.player-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.player-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
}

.player-scores {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8rpx;
}

.my-score {
  font-size: 26rpx;
  color: #666666;
}

.total-score {
  font-size: 26rpx;
  color: #333333;
  font-weight: 600;
}

.action-area {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8rpx;
}

.chief-hint {
  font-size: 24rpx;
  color: #FF4D6A;
}

.score-btn {
  padding: 12rpx 40rpx;
  background: linear-gradient(135deg, #1B7C5E 0%, #2A9D7E 100%);
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #FFFFFF;
  font-weight: 500;
}

.score-btn:active {
  opacity: 0.9;
}

.player-info {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.info-item {
  font-size: 26rpx;
  color: #666666;
  line-height: 1.5;
}
</style>
