<template>
  <view class="quick-recharge-panel">
    <view class="panel-title">请选择充值金额</view>
    <view class="amount-grid">
      <view
        v-for="(amount, index) in amounts"
        :key="index"
        class="amount-item"
        :class="{ selected: selectedIndex === index }"
        @click="selectAmount(amount, index)"
      >
        <view class="amount-value">
          <text class="amount-number">{{ formatAmount(amount) }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'QuickRechargePanel',
  props: {
    // 预设金额数组
    amounts: {
      type: Array,
      default: () => [100, 200, 500, 1000, 2000, 5000],
    },
    // 货币符号
    currencySymbol: {
      type: String,
      default: '',
    },
    // 默认选中的索引
    defaultSelected: {
      type: Number,
      default: -1,
    },
  },
  data() {
    return {
      selectedIndex: this.defaultSelected,
    }
  },
  methods: {
    selectAmount(amount, index) {
      this.selectedIndex = index
      this.$emit('amount-selected', {
        amount,
        index,
      })
    },
    // 清空选中状态
    clear() {
      this.selectedIndex = -1
    },
    // 格式化金额显示千分位
    formatAmount(amount) {
      return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
  },
}
</script>

<style lang="scss" scoped>
.quick-recharge-panel {
  margin-top: 20rpx;
  padding: 20rpx;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0px 2px 20rpx 0px rgba(204, 204, 204, 0.3);
}

.panel-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 30rpx;
  text-align: center;
}

.amount-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.amount-item {
  position: relative;
  padding: 24rpx 10rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2rpx solid transparent;

  &:hover {
    transform: translateY(-2rpx);
    box-shadow: 0px 4px 20rpx 0px rgba(0, 91, 172, 0.15);
  }

  &.selected {
    background: linear-gradient(135deg, #005bac 0%, #0070d4 100%);
    color: #fff;
    border-color: #005bac;
    box-shadow: 0px 4px 20rpx 0px rgba(0, 91, 172, 0.3);

    .amount-value {
      color: #fff;
    }
  }

  &:active {
    transform: translateY(0);
  }
}

.amount-value {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #333333;
}

.currency-symbol {
  font-size: 24rpx;
  margin-right: 4rpx;
  opacity: 0.8;
}

.amount-number {
  font-size: 52rpx;
  font-weight: 700;
  letter-spacing: 2rpx;
}

// 响应式设计
@media (max-width: 375px) {
  .amount-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .amount-item {
    padding: 25rpx 15rpx;
  }

  .amount-number {
    font-size: 40rpx;
  }
}
</style>
