<template>
  <view class="scoring-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">第1局</view>
      <view class="nav-actions">
        <uni-icons type="more" size="24" color="#fff"></uni-icons>
      </view>
    </view>

    <!-- 玩家计分表格 -->
    <view class="player-table">
      <view class="table-header">
        <text>玩家</text>
        <text>胜负</text>
        <text>得分</text>
      </view>
      <view class="table-row">
        <view class="player-info">
          <image class="player-avatar" src="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" mode="aspectFit"></image>
          <text class="player-name">玩家80061</text>
        </view>
        <view class="win-lose">
          <button class="win-btn" :class="{ active: isWin }" @click="isWin = true">胜</button>
          <button class="lose-btn" :class="{ active: !isWin }" @click="isWin = false">负</button>
        </view>
        <view class="score-input">
          <input type="text" v-model="score" placeholder="0" class="score-text" />
          <button class="sum-btn">∑ 合分</button>
        </view>
      </view>
    </view>

    <!-- 数字键盘 -->
    <view class="keypad">
      <view class="keypad-row">
        <button class="keypad-btn" @click="inputNumber(1)">1</button>
        <button class="keypad-btn" @click="inputNumber(2)">2</button>
        <button class="keypad-btn" @click="inputNumber(3)">3</button>
        <button class="keypad-btn" @click="inputOperator('+')">+</button>
        <button class="keypad-btn" @click="deleteLast">⌫</button>
      </view>
      <view class="keypad-row">
        <button class="keypad-btn" @click="inputNumber(4)">4</button>
        <button class="keypad-btn" @click="inputNumber(5)">5</button>
        <button class="keypad-btn" @click="inputNumber(6)">6</button>
        <button class="keypad-btn" @click="inputOperator('-')">-</button>
        <button class="keypad-btn submit-btn" @click="submitScore">提交</button>
      </view>
      <view class="keypad-row">
        <button class="keypad-btn" @click="inputNumber(7)">7</button>
        <button class="keypad-btn" @click="inputNumber(8)">8</button>
        <button class="keypad-btn" @click="inputNumber(9)">9</button>
        <button class="keypad-btn" @click="inputNumber(0)">0</button>
      </view>
    </view>
  </view>
</template>

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

const isWin = ref(true)
const score = ref('0')

// 数字键盘输入逻辑
const inputNumber = (num) => {
  score.value += num.toString()
}
const inputOperator = (op) => {
  score.value += op
}
const deleteLast = () => {
  score.value = score.value.slice(0, -1)
}

// 提交分数并跳转至结算页
const submitScore = () => {
  uni.navigateTo({
    url: '/pages/settle/index?score=' + score.value + '&isWin=' + isWin.value
  })
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}
</script>

<style lang="less" scoped>
.scoring-page {
  background-color: #f5f5f5;
  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-table {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.table-header {
  display: flex;
  justify-content: space-around;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-bottom: 1rpx solid #eee;

  text {
    flex: 1;
    text-align: center;
    font-size: 28rpx;
    font-weight: 500;
  }
}

.table-row {
  display: flex;
  padding: 20rpx;

  .player-info {
    display: flex;
    align-items: center;
    flex: 1;

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

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

  .win-lose {
    display: flex;
    flex: 1;

    .win-btn, .lose-btn {
      flex: 1;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 8rpx;
      font-size: 28rpx;
    }

    .win-btn {
      background-color: #007aff;
      color: #fff;
      border: none;
    }

    .lose-btn {
      background-color: #fff;
      color: #007aff;
      border: 1rpx solid #007aff;
    }

    .active {
      background-color: #007aff;
      color: #fff;
    }
  }

  .score-input {
    flex: 1;
    display: flex;
    align-items: center;

    .score-text {
      width: 100rpx;
      height: 60rpx;
      border: 1rpx solid #eee;
      border-radius: 8rpx;
      text-align: center;
      font-size: 32rpx;
    }

    .sum-btn {
      margin-left: 10rpx;
      height: 60rpx;
      line-height: 60rpx;
      padding: 0 20rpx;
      background-color: #41479b;
      color: #fff;
      border-radius: 8rpx;
      font-size: 24rpx;
    }
  }
}

.keypad {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx;

  .keypad-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .keypad-btn {
    width: 120rpx;
    height: 120rpx;
    border-radius: 12rpx;
    background-color: #f8f8f8;
    font-size: 36rpx;
    font-weight: 500;
  }

  .submit-btn {
    background-color: #41479b;
    color: #fff;
  }
}
</style>