<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="900px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    :before-close="handleClose"
    class="payment-dialog"
  >
    <!-- 右上角关闭按钮 -->
    <div class="close-button" @click="handleCancel">
      <img src="@/assets/icons/colse.svg" alt="关闭" class="close-icon" />
    </div>
    
    <!-- 二维码支付 -->
    <div v-if="paymentStatus === 'qr-code'" class="payment-content qr-payment">
      <!-- 二维码支付主体 - 左右布局 -->
      <div class="qr-payment-container">
        <!-- 左侧二维码 -->
        <div class="qr-left">
          <!-- 二维码容器 -->
          <div class="qr-code-wrapper">
            <div class="qr-code" ref="qrCodeRef">
              <!-- 加载时显示骨架屏 -->
              <div v-if="qrCodeLoading" class="qr-loading-overlay">
                <el-skeleton animated class="qr-skeleton">
                  <template #template>
                    <el-skeleton-item variant="image" class="qr-skeleton-item" />
                  </template>
                </el-skeleton>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 右侧订单信息 -->
        <div class="qr-right">
          <div class="order-info-item">
            <span class="info-label">订单编号：</span>
            <span class="info-value">{{ orderNo }}</span>
          </div>
          
          <div class="order-info-item">
            <span class="info-label">订单内容：</span>
            <span class="info-value">{{ planInfo.name }} {{ getDurationText() }}</span>
          </div>
          
          <div class="order-info-item payment-method-item">
            <span class="info-label">支付方式：</span>
            <div class="payment-method-content">
              <img src="@/assets/icons/wechat.svg" alt="微信" class="wechat-icon-img" />
              <span class="payment-method-text">使用微信扫码支付</span>
            </div>
          </div>
          
          <div class="order-info-item amount-item">
            <span class="info-label">订单金额：</span>
            <span class="order-amount">¥{{ calculateFinalPrice() }}</span>
          </div>
        </div>
      </div>
      
      <!-- 底部温馨提示 -->
      <div class="payment-notice">
        购买后不可退款
      </div>
    </div>

    <!-- 支付确认中 -->
    <div v-else-if="paymentStatus === 'polling'" class="payment-content polling">
      <el-icon class="loading-icon"><Loading /></el-icon>
      <div class="status-text">正在确认支付...</div>
    </div>

    <!-- 支付成功 -->
    <div v-else-if="paymentStatus === 'success'" class="payment-content success">
      <el-icon class="success-icon"><CircleCheck /></el-icon>
      <div class="status-text">支付成功！</div>
      <div class="success-note">会员权限已激活，请享受您的会员服务</div>
    </div>

    <!-- 支付失败 -->
    <div v-else-if="paymentStatus === 'failed'" class="payment-content failed">
      <el-icon class="error-icon"><CircleClose /></el-icon>
      <div class="status-text">支付失败</div>
      <div class="error-note">{{ errorMessage || '请重试或联系客服' }}</div>
    </div>

    <!-- 支付超时 -->
    <div v-else-if="paymentStatus === 'timeout'" class="payment-content timeout">
      <el-icon class="warning-icon"><Warning /></el-icon>
      <div class="status-text">支付超时</div>
      <div class="timeout-note">订单已取消，请重新发起支付</div>
    </div>

    <!-- 底部操作按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <!-- 支付步骤按钮 -->
        <div class="payment-actions">
          <!-- 二维码状态按钮 - 已移除 -->

          <!-- 轮询状态按钮 -->
          <template v-if="paymentStatus === 'polling'">
            <el-button @click="handleCancel" size="large" :disabled="true">
              确认中...
            </el-button>
          </template>

          <!-- 失败状态按钮 -->
          <template v-if="paymentStatus === 'failed'">
            <el-button @click="handleCancel" size="large">关闭</el-button>
            <el-button type="primary" @click="retryPayment" size="large">
              重新支付
            </el-button>
          </template>

          <!-- 超时状态按钮 -->
          <template v-if="paymentStatus === 'timeout'">
            <el-button @click="handleCancel" size="large">关闭</el-button>
            <el-button type="primary" @click="retryPayment" size="large">
              重新支付
            </el-button>
          </template>

          <!-- 成功状态按钮 -->
          <template v-if="paymentStatus === 'success'">
            <el-button type="primary" @click="handleClose" size="large">
              完成
            </el-button>
          </template>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch, onUnmounted, nextTick } from 'vue'
import { 
  ElDialog, ElButton, ElMessage, ElSkeleton, ElSkeletonItem 
} from 'element-plus'
import { 
  Loading, CircleCheck, CircleClose, Warning
} from '@element-plus/icons-vue'
import QRCode from 'qrcode'
import { useUserStore } from '@/store/user.js'
import { 
  createMembershipOrder, 
  createWechatPayment, 
  queryPaymentStatus,
  getCurrentUser,
  closeOrder 
} from '@/api/user.js'

// Props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  planInfo: {
    type: Object,
    required: true
  },
  subscriptionType: {
    type: String,
    required: true // 'yearly', 'monthly', 'single'
  }
})

// Emits
const emit = defineEmits(['close', 'success', 'failed'])

// Store
const userStore = useUserStore()

// 响应式数据
const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => !value && emit('close')
})

const isProcessing = ref(false)

// 支付相关状态
const paymentStatus = ref('qr-code') // qr-code, polling, success, failed, timeout
const orderNo = ref('')
const orderId = ref('')
const qrCodeUrl = ref('')
const countdown = ref(300) // 5分钟倒计时
const errorMessage = ref('')
const pollingTimer = ref(null)
const countdownTimer = ref(null)
const qrCodeExpiryTimer = ref(null) // 二维码过期定时器
const qrCodeRef = ref(null)
const qrCodeLoading = ref(false) // 二维码生成加载状态

// 计算属性
const dialogTitle = computed(() => {
  return '支付订单'
})



// 计算最终价格
const calculateFinalPrice = () => {
  return props.planInfo.finalPrice
}

// 获取时长文本
const getDurationText = () => {
  return props.planInfo.durationText || '1个月'
}

// 获取折扣类型
const getDiscountType = () => {
  return props.planInfo.discountType || 'NONE'
}

// 获取折扣描述
const getDiscountDescription = () => {
  return props.planInfo.discountDescription || ''
}

// 格式化时间显示
const formatTime = (seconds) => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
}



// 更新用户信息
const updateUserInfo = async () => {
  try {
    console.log('支付成功，开始更新用户信息...')
    const userResponse = await getCurrentUser()
    if (userResponse.code === 200 && userResponse.data) {
      userStore.updateUserInfo(userResponse.data)
      console.log('用户信息更新成功:', userResponse.data)
    }
  } catch (error) {
    console.error('更新用户信息失败:', error)
    // 不影响支付成功的流程，只记录错误
  }
}

// 生成二维码
const generateQRCode = async (url) => {
  if (!url) {
    console.error('二维码URL为空')
    return
  }
  
  try {
    qrCodeLoading.value = true
    console.log('开始生成二维码，URL:', url)
    
    // 等待DOM更新，确保qrCodeRef可用
    await nextTick()
    
    if (qrCodeRef.value) {
      // 清空容器中除了加载覆盖层之外的内容
      const children = Array.from(qrCodeRef.value.children)
      children.forEach(child => {
        if (!child.classList.contains('qr-loading-overlay')) {
          child.remove()
        }
      })
      
      // 创建canvas元素
      const canvas = document.createElement('canvas')
      
      // 根据屏幕尺寸确定二维码大小
      let qrSize = 234 // PC端默认234x234px
      if (window.innerWidth <= 480) {
        qrSize = 164 // 小屏端164x164px
      } else if (window.innerWidth <= 768) {
        qrSize = 194 // 移动端194x194px
      }
      
      console.log('生成二维码，尺寸:', qrSize)
      
      // 生成二维码到canvas
      await QRCode.toCanvas(canvas, url, {
        width: qrSize,
        margin: 2,
        color: {
          dark: '#000000',
          light: '#ffffff'
        }
      })
      
      // 将canvas添加到容器中
      qrCodeRef.value.appendChild(canvas)
      console.log('二维码生成成功')
      
      // 生成成功后隐藏加载覆盖层
      qrCodeLoading.value = false
      
      // 启动二维码过期定时器（2分钟）
      startQrCodeExpiryTimer()
    } else {
      console.error('qrCodeRef不可用')
      qrCodeLoading.value = false
    }
  } catch (error) {
    console.error('生成二维码失败:', error)
    ElMessage.error('生成二维码失败')
    qrCodeLoading.value = false
  }
}

// 开始倒计时
const startCountdown = () => {
  countdown.value = 300 // 5分钟
  countdownTimer.value = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearTimers()
      paymentStatus.value = 'timeout'
    }
  }, 1000)
}

// 启动二维码过期定时器（2分钟）
const startQrCodeExpiryTimer = () => {
  // 清除已存在的过期定时器
  if (qrCodeExpiryTimer.value) {
    clearTimeout(qrCodeExpiryTimer.value)
  }
  
  // 设置2分钟（120秒）过期定时器
  qrCodeExpiryTimer.value = setTimeout(async () => {
    console.log('二维码已过期，开始关闭支付')
    
    // 提醒用户支付已关闭
    ElMessage.warning('支付超时，订单已自动关闭')
    
    // 调用关闭支付接口
    if (orderNo.value) {
      await handleCloseOrder()
    }
    
    // 退出弹窗
    await handleClose()
  }, 120000) // 2分钟 = 120,000毫秒
}

// 开始轮询支付状态
const startPolling = () => {
  pollingTimer.value = setInterval(async () => {
    try {
      const response = await queryPaymentStatus({ orderNo: orderNo.value })
      
      if (response.code === 200) {
        const status = response.data
        
        if (status === 'SUCCESS') {
          clearTimers()
          paymentStatus.value = 'success'
          ElMessage.success('支付成功！')
          
          // 更新用户信息和权限
          await updateUserInfo()
          
          setTimeout(() => {
            emit('success', {
              orderNo: orderNo.value,
              orderId: orderId.value
            })
          }, 2000)
        } else if (status === 'PAYERROR') {
          clearTimers()
          paymentStatus.value = 'failed'
          errorMessage.value = '支付失败，请重试'
          ElMessage.error(errorMessage.value)
        }
        // NOTPAY 状态继续轮询
      }
    } catch (error) {
      console.error('查询支付状态失败:', error)
    }
  }, 3000) // 每3秒查询一次
}

// 清除定时器
const clearTimers = () => {
  if (pollingTimer.value) {
    clearInterval(pollingTimer.value)
    pollingTimer.value = null
  }
  if (countdownTimer.value) {
    clearInterval(countdownTimer.value)
    countdownTimer.value = null
  }
  if (qrCodeExpiryTimer.value) {
    clearTimeout(qrCodeExpiryTimer.value)
    qrCodeExpiryTimer.value = null
  }
}

// 确认支付
const confirmPayment = async () => {
  try {
    isProcessing.value = true

    // 1. 创建会员购买订单
    const orderData = {
      planId: props.planInfo.id,
      actualPrice: calculateFinalPrice(),
      actualDurationDays: props.planInfo.durationDays,
      discountType: getDiscountType(),
      discountAmount: 0,
      discountDescription: getDiscountDescription()
    }

    console.log('创建订单数据:', orderData)
    const orderResponse = await createMembershipOrder(orderData)

    if (orderResponse.code !== 200 || !orderResponse.data.success) {
      throw new Error(orderResponse.message || '创建订单失败')
    }

    // 使用接口返回的订单号，不要自己生成
    orderNo.value = orderResponse.data.orderNo
    orderId.value = orderResponse.data?.orderId || ''
    
    console.log('使用服务器返回的订单号:', orderNo.value)

    // 2. 生成微信支付二维码
    const finalPrice = calculateFinalPrice()
    const planName = props.planInfo?.name

    if (!finalPrice || finalPrice <= 0 || isNaN(finalPrice)) {
      console.error('支付金额无效:', finalPrice)
      throw new Error(`支付金额无效: ${finalPrice}`)
    }
    if (!planName || planName.trim() === '') {
      console.error('套餐名称无效:', planName)
      throw new Error(`套餐名称无效: ${planName}`)
    }

    const description = `AI视频制作课程 - ${planName.trim()}`
    const paymentData = {
      amounts: Number(finalPrice),
      orderNo: orderNo.value,
      description: description,
      tradeType: "NATIVE",
      notifyUrl: `${window.location.origin}/user/pay/callback`
    }

    console.log('支付参数:', paymentData)
    const paymentResponse = await createWechatPayment(paymentData)

    if (paymentResponse.code !== 200 || !paymentResponse.data?.code_url) {
      throw new Error(paymentResponse.message || '生成支付二维码失败')
    }

    qrCodeUrl.value = paymentResponse.data.code_url
    paymentStatus.value = 'qr-code'

    // 生成二维码并开始倒计时和轮询
    console.log('开始生成二维码流程，URL:', qrCodeUrl.value)
    await generateQRCode(qrCodeUrl.value)
    startCountdown()
    startPolling()

  } catch (error) {
    console.error('支付流程错误:', error)
    paymentStatus.value = 'failed'
    errorMessage.value = error.message || '创建支付失败，请重试'
    ElMessage.error(errorMessage.value)
  } finally {
    isProcessing.value = false
  }
}



// 重试支付
const retryPayment = () => {
  paymentStatus.value = 'qr-code'
  orderNo.value = ''
  orderId.value = ''
  qrCodeUrl.value = ''
  errorMessage.value = ''
  qrCodeLoading.value = false
  clearTimers()
  
  // 清空之前的二维码内容（保留加载覆盖层）
  if (qrCodeRef.value) {
    const children = Array.from(qrCodeRef.value.children)
    children.forEach(child => {
      if (!child.classList.contains('qr-loading-overlay')) {
        child.remove()
      }
    })
  }
  
  // 直接重新触发支付
  nextTick(() => {
    confirmPayment()
  })
}

// 关闭订单
const handleCloseOrder = async () => {
  if (orderNo.value && (paymentStatus.value === 'qr-code' || paymentStatus.value === 'polling')) {
    try {
      console.log('关闭订单:', orderNo.value)
      const response = await closeOrder(orderNo.value)
      if (response.code === 200) {
        console.log('订单关闭成功')
      } else if (response.code === 500 && response.message === '订单不存在') {
        console.log('订单已不存在，可能已被处理')
      } else {
        console.warn('关闭订单返回非成功状态:', response)
      }
    } catch (error) {
      console.error('关闭订单失败:', error)
      // 不影响关闭弹窗流程，静默处理
    }
  }
}

// 取消支付
const handleCancel = async () => {
  await handleClose()
}

// 关闭弹窗
const handleClose = async () => {
  // 如果有未完成的支付订单，先关闭订单
  if (orderNo.value && (paymentStatus.value === 'qr-code' || paymentStatus.value === 'polling')) {
    await handleCloseOrder()
  }
  
  clearTimers()
  
  // 重置状态
  paymentStatus.value = 'qr-code'
  orderNo.value = ''
  orderId.value = ''
  qrCodeUrl.value = ''
  errorMessage.value = ''
  isProcessing.value = false
  qrCodeLoading.value = false
  
  emit('close')
}

// 监听弹窗显示状态
watch(() => props.visible, (newVal) => {
  if (newVal) {
    // 弹窗打开时重置状态
    paymentStatus.value = 'qr-code'
    qrCodeLoading.value = false
    
    // 清空之前的二维码内容（保留加载覆盖层）
    if (qrCodeRef.value) {
      const children = Array.from(qrCodeRef.value.children)
      children.forEach(child => {
        if (!child.classList.contains('qr-loading-overlay')) {
          child.remove()
        }
      })
    }
    
    // 直接进入支付流程
    nextTick(() => {
      confirmPayment()
    })
  } else {
    // 弹窗关闭时清理资源
    clearTimers()
  }
})

// 组件卸载时清理资源
onUnmounted(() => {
  clearTimers()
})
</script>

<style scoped>
/* 弹窗基础样式 */
:deep(.payment-dialog) {
  --el-dialog-border-radius: 20px;
  --el-dialog-box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  position: relative;
}

/* 关闭按钮样式 */
.close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
}

.close-button:hover {
  background: rgba(248, 250, 252, 1);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: scale(1.05);
}

.close-icon {
  width: 16px;
  height: 16px;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.close-button:hover .close-icon {
  opacity: 1;
}

:deep(.payment-dialog .el-dialog__header) {
  text-align: center;
  padding: 32px 32px 16px 32px;
  border-bottom: 1px solid #f5f7fa;
  margin-bottom: 0;
  background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
  border-radius: 20px 20px 0 0;
}

:deep(.payment-dialog .el-dialog__title) {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: -0.025em;
}

:deep(.payment-dialog .el-dialog__body) {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
  background: #ffffff;
  box-sizing: border-box;
}

:deep(.payment-dialog .el-dialog__footer) {
  padding: 24px 32px 32px 32px;
  text-align: center;
  border-top: 1px solid #f5f7fa;
  background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
  border-radius: 0 0 20px 20px;
}



/* 支付内容样式 */
.payment-content {
  background: #ffffff;
  border-radius: 16px;
 
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  gap: 20px;
}

.loading-icon {
  font-size: 48px;
  color: #3b82f6;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.status-text {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}



.qr-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
}

.wechat-icon {
  font-size: 32px;
  color: #1e40af;
}

.qr-title {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
}

/* 二维码支付布局 */
.qr-payment-container {
  display: flex;
  gap: 30px;
  width: 100%;
  align-items: flex-start; /* 顶端对齐 */
  justify-content: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 280px; /* 减小最小高度，适配新的对齐方式 */
}

.qr-left {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 二维码容器包装器 */
.qr-code-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px; /* 234px + 16px padding */
  height: 250px; /* 234px + 16px padding */
}

.qr-code {
  position: relative;
  display: inline-block;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 234px;
  height: 234px;
}

.qr-code canvas {
  width: 234px !important;
  height: 234px !important;
  border-radius: 4px;
}

/* 二维码加载覆盖层 */
.qr-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 8px;
  z-index: 10;
}

/* 二维码骨架屏样式 */
.qr-skeleton {
  width: 100%;
  height: 100%;
}

.qr-skeleton-item {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.qr-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 顶端对齐 */
  gap: 14px; /* 适配减小的高度 */
  font-size: 14px;
  min-width: 260px;
  height: 250px; /* 与减小后的二维码wrapper高度相同 */
  margin-right: 50px; /* 文字右侧边距50px */
  padding: 8px 0; /* 调整上内边距，确保与二维码顶端对齐 */
  box-sizing: border-box; /* 包含padding在高度计算内 */
}

.order-info-item {
  display: flex;
  align-items: center;
  line-height: 1.8;
  min-height: 30px;
  margin-bottom: 18px; /* 增大下边距，为订单金额对齐留出空间 */
}

.order-info-item:not(.amount-item) {
  margin-bottom: 22px; /* 非金额项的下边距更大 */
}

.info-label {
  color: #333333;
  font-weight: normal;
  white-space: nowrap;
  margin-right: 8px;
}

.info-value {
  color: #333333;
  word-break: break-all;
}

.payment-method-item {
  align-items: center;
}

.payment-method-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wechat-icon-img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.payment-method-text {
  color: #333333;
}

.amount-item {
  margin-top: auto; /* 自动推到底部，与二维码底端对齐 */
}

.amount-item .info-label {
  color: #333333;
}

.order-amount {
  color: #ff0000;
  font-size: 20px;
  font-weight: bold;
}

.payment-notice {
  margin-top: 16px;
  text-align: left;
  color: #666666;
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
}

.info-icon {
  font-size: 18px;
  color: #3b82f6;
}

.success-icon {
  font-size: 64px;
  color: #3b82f6;
}

.error-icon, .warning-icon {
  font-size: 64px;
  color: #dc2626;
}

.success-note, .error-note, .timeout-note {
  font-size: 16px;
  color: #6b7280;
  line-height: 1.6;
  text-align: center;
  max-width: 300px;
  margin: 0 auto;
}

/* 底部按钮样式 */
.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.payment-actions {
  display: flex;
  gap: 20px;
  width: 100%;
  justify-content: center;
  max-width: 400px;
}

:deep(.el-button) {
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  min-width: 120px;
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

:deep(.el-button--primary:hover) {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

/* 平板响应式设计 */
@media (max-width: 1024px) {
  :deep(.payment-dialog) {
    width: 95vw;
  }
}

/* 移动端响应式设计 */
@media (max-width: 768px) {
  :deep(.payment-dialog) {
    width: 95vw;
    margin: 2vh auto;
    max-height: 96vh;
  }
  
  /* 移动端关闭按钮 */
  .close-button {
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
  }
  
  .close-icon {
    width: 14px;
    height: 14px;
  }
  
  :deep(.payment-dialog .el-dialog__header) {
    padding: 24px 24px 12px 24px;
  }
  
  :deep(.payment-dialog .el-dialog__title) {
    font-size: 20px;
  }
  
  :deep(.payment-dialog .el-dialog__body) {
    padding: 16px;
    max-height: 65vh;
  }
  
  :deep(.payment-dialog .el-dialog__footer) {
    padding: 16px 24px 24px 24px;
  }
  
  .payment-actions {
    flex-direction: column;
    gap: 12px;
  }
  
  :deep(.el-button) {
    width: 100%;
    padding: 14px 24px;
  }
  

  

  
  .qr-payment-container {
    flex-direction: column;
    gap: 20px;
    align-items: center;
    min-height: auto;
  }
  
  .qr-code-wrapper {
    width: 210px;
    height: 210px;
  }
  
  .qr-code {
    width: 194px;
    height: 194px;
  }
  
  .qr-code canvas {
    width: 194px !important;
    height: 194px !important;
  }
  
  .qr-right {
    gap: 10px;
    min-width: auto;
    width: 100%;
    height: 210px; /* 与移动端二维码wrapper高度相同 */
    padding: 8px 0; /* 移动端适配内边距，保持顶端对齐 */
    margin-right: 0; /* 移动端取消右侧边距 */
    justify-content: flex-start; /* 确保移动端也是顶端对齐 */
  }
  
  .order-info-item {
    min-height: 24px;
    font-size: 13px;
    margin-bottom: 14px; /* 移动端适配下边距 */
  }
  
  .order-info-item:not(.amount-item) {
    margin-bottom: 16px; /* 移动端非金额项的下边距 */
  }
  
  .order-amount {
    font-size: 18px;
  }
  
  .payment-content {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  :deep(.payment-dialog .el-dialog__title) {
    font-size: 18px;
  }
  
  /* 小屏关闭按钮 */
  .close-button {
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
  }
  
  .close-icon {
    width: 12px;
    height: 12px;
  }
  
  .plan-name {
    font-size: 20px;
  }
  
  .qr-title {
    font-size: 20px;
  }
  
  .final-price {
    font-size: 24px;
  }
  
  .qr-code-wrapper {
    width: 180px;
    height: 180px;
  }
  
  .qr-code {
    width: 164px;
    height: 164px;
  }
  
  .qr-code canvas {
    width: 164px !important;
    height: 164px !important;
  }
  
  .qr-right {
    height: 180px; /* 与小屏端二维码wrapper高度相同 */
    gap: 8px;
    padding: 8px 0; /* 小屏端适配内边距，保持顶端对齐 */
    min-width: auto;
    justify-content: flex-start; /* 确保小屏端也是顶端对齐 */
  }
  
  .order-info-item {
    font-size: 12px;
    min-height: 22px;
    margin-bottom: 12px; /* 小屏端适配下边距 */
  }
  
  .order-info-item:not(.amount-item) {
    margin-bottom: 14px; /* 小屏端非金额项的下边距 */
  }
  
  .order-amount {
    font-size: 16px;
  }
  
  .payment-notice {
    font-size: 11px;
  }
  
  .qr-payment-container {
    gap: 16px;
  }
  
  .payment-content {
    padding: 12px;
  }
}
</style>