<template>
  <view class="game-detail-page">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-back" @click="goBack">
        <uni-icons type="arrowleft" size="24" color="#fff"></uni-icons>
      </view>
      <view class="nav-title">对局详情</view>
      <view class="nav-actions">
        <uni-icons type="more" size="24" color="#fff"></uni-icons>
      </view>
    </view>

    <!-- 玩家信息表头 -->
    <view class="player-header">
      <view class="header-row">
        <view class="header-cell header-label">玩家 ({{ players.length }}位)</view>
        <view class="header-cell" v-for="player in players" :key="player.id">
          <view class="player-header-info">
            <image class="player-avatar" :src="player.avatar" mode="aspectFit"></image>
            <text class="player-name">{{ player.name }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 对局详情表格 -->
    <view class="detail-table">
      <!-- 总分行 -->
      <view class="table-row">
        <view class="row-label">总分</view>
        <view class="row-cells">
          <view class="score-cell" v-for="player in players" :key="player.id">
            {{ formatScore(player.totalScore) }}
          </view>
        </view>
      </view>

      <!-- 每局得分行 -->
      <view class="table-row" v-for="(round, roundIndex) in gameRounds" :key="roundIndex">
        <view class="row-label">第{{ roundIndex + 1 }}局</view>
        <view class="row-cells">
          <view class="score-cell" v-for="player in players" :key="player.id">
            {{ formatScore(getPlayerRoundScore(roundIndex, player.id)) }}
          </view>
        </view>
      </view>
    </view>

    <!-- 底部分享按钮 -->
    <view class="action-buttons">
      <button class="share-btn" @click="shareDetail">分享对局详情</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 玩家数据
const players = ref([])
// 对局记录
const gameRounds = ref([])

// 格式化分数显示
const formatScore = (score) => {
  if (score === 0) return '0'
  return score > 0 ? `+${score}` : `${score}`
}

// 获取玩家在某一局的得分
const getPlayerRoundScore = (roundIndex, playerId) => {
  if (!gameRounds.value[roundIndex]) return 0
  const playerScore = gameRounds.value[roundIndex].find(item => item.playerId === playerId)
  return playerScore ? playerScore.score : 0
}

// 计算玩家总分
const calculateTotalScores = () => {
  players.value.forEach(player => {
    let total = 0
    gameRounds.value.forEach(round => {
      const roundScore = round.find(item => item.playerId === player.id)
      if (roundScore) {
        total += roundScore.score
      }
    })
    player.totalScore = total
  })
}

// 页面加载时初始化数据
onMounted(() => {
  // 从本地存储获取玩家数据和对局记录
  const savedPlayers = uni.getStorageSync('players')
  const savedRounds = uni.getStorageSync('gameRounds')
  
  if (savedPlayers) {
    players.value = savedPlayers
  } else {
    // 如果没有数据，使用默认数据
    players.value = [
      {
        id: 1,
        name: '玩家80061',
        avatar: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.QQG4bvcAR3CJ0WeQULA9UQAAAA?w=275&h=211&c=8&rs=1&qlt=90&o=6&cb=ucfimgc1&dpr=1.5&pid=3.1&rm=2',
        totalScore: 0
      },
      {
        id: 2,
        name: '2',
        avatar: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.Pbhgd_vCFFNQWXi7y-HynAAAAA?w=209&h=209&c=7&r=0&o=7&cb=ucfimgc2&dpr=1.5&pid=1.7&rm=3',
        totalScore: 0
      }
    ]
  }
  
  if (savedRounds) {
    gameRounds.value = savedRounds
    calculateTotalScores()
  } else {
    // 如果没有数据，使用默认数据
    gameRounds.value = [
      [
        { playerId: 1, score: 3 },
        { playerId: 2, score: -3 }
      ]
    ]
    calculateTotalScores()
  }
})



// 分享对局详情
const shareDetail = () => {
  uni.showToast({
    title: '分享功能待实现',
    icon: 'none'
  })
}
</script>

<style lang="less" scoped>
.game-detail-page {
  background-color: #fff;
  min-height: 100vh;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #41479b;
  color: #fff;

  .nav-back, .nav-actions {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-title {
    font-size: 32rpx;
    font-weight: 500;
  }
}

.player-header {
  padding: 20rpx 30rpx;
  background-color: #f5f5f5;
  border-bottom: 1rpx solid #eee;

  .header-row {
    display: flex;
    align-items: center;

    .header-cell {
      flex: 1;
      display: flex;
      justify-content: center;
      
      &.header-label {
        width: 200rpx;
        flex: none;
        font-size: 28rpx;
        color: #000;
        font-weight: 500;
      }
    }

    .player-header-info {
      display: flex;
      flex-direction: column;
      align-items: center;

      .player-avatar {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        margin-bottom: 10rpx;
      }

      .player-name {
        font-size: 24rpx;
        color: #000;
      }
    }
  }
}

.detail-table {
  padding: 0 30rpx;

  .table-row {
    display: flex;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .row-label {
      width: 200rpx;
      font-size: 28rpx;
      color: #000;
      display: flex;
      align-items: center;
      font-weight: 500;
    }

    .row-cells {
      display: flex;
      flex: 1;
      
      .score-cell {
        flex: 1;
        text-align: center;
        font-size: 28rpx;
        color: #333;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;

  .share-btn {
    width: 100%;
    height: 80rpx;
    background-color: #ffc107;
    color: #333;
    font-size: 32rpx;
    font-weight: 500;
    border-radius: 8rpx;
  }
}
</style>