<!--二维码支付弹窗组件-->
<template>
  <view class="qrcode-payment-modal">
    <!-- 弹窗头部 -->
    <view class="modal-header">
      <text class="modal-title">扫码支付</text>
      <view class="close-btn" @click="handleClose">
        <text>✕</text>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="order-info">
      <view class="info-row">
        <text class="label">订单号：</text>
        <text class="value">{{ paymentData.order.order_no }}</text>
      </view>
      <view class="info-row">
        <text class="label">支付金额：</text>
        <text class="amount">¥{{ paymentData.order.total_amount }}</text>
      </view>
    </view>

    <!-- 二维码区域 -->
    <view class="qrcode-container">
      <image
        v-if="paymentData.qrcodeImage"
        :src="paymentData.qrcodeImage"
        class="qrcode-image"
        mode="aspectFit"
      />
      <text v-else class="qrcode-placeholder">二维码加载中...</text>
      <text class="qrcode-tip">请使用微信扫码完成支付</text>
    </view>

    <!-- 操作按钮 -->
    <view class="modal-buttons">
      <view class="btn secondary" @click="handleClose">取消支付</view>
      <view class="btn primary" @click="handleConfirm">确认已支付</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'QRCodePaymentDialog',
  props: {
    paymentData: {
      type: Object,
      required: true
    }
  },

  methods: {
    handleClose() {
      this.$emit('close')
    },

    handleConfirm() {
      this.$emit('confirm')
    }
  }
}
</script>

<style lang="scss" scoped>
.qrcode-payment-modal {
  background: #2A2A2A;
  border-radius: 24rpx;
  padding: 48rpx;
  width: 600rpx;
  max-width: 90vw;
}

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

.modal-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #ffffff;
}

.close-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  font-size: 32rpx;
  color: #ffffff;
  transition: all 0.3s ease;

  &:active {
    background: rgba(255, 255, 255, 0.2);
  }
}

.order-info {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 40rpx;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;

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

.label {
  font-size: 28rpx;
  color: #999999;
}

.value {
  font-size: 28rpx;
  color: #ffffff;
}

.amount {
  font-size: 40rpx;
  font-weight: 600;
  color: #FFC107;
}

.qrcode-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  background: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 40rpx;
}

.qrcode-image {
  width: 400rpx;
  height: 400rpx;
  margin-bottom: 24rpx;
}

.qrcode-placeholder {
  width: 400rpx;
  height: 400rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 24rpx;
}

.qrcode-tip {
  font-size: 26rpx;
  color: #666666;
  text-align: center;
}

.modal-buttons {
  display: flex;
  gap: 24rpx;
}

.btn {
  flex: 1;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 44rpx;
  font-size: 30rpx;
  font-weight: 500;
  transition: all 0.3s ease;

  &.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;

    &:active {
      background: rgba(255, 255, 255, 0.15);
    }
  }

  &.primary {
    background: #29D3B4;
    color: #ffffff;

    &:active {
      background: #1fb396;
    }
  }
}
</style>
