<template>
  <div class="orderConfirm">
    <!-- <Breadcrumb /> -->
    <el-button class="mt20 mb20" @click="router.back()">
      <el-icon><ArrowLeft /></el-icon>
      <span>{{$t('common.back')}}</span>
    </el-button>
    <div class="gap10">
      <div class="font_size24 bold">{{$t('route.recharge')}}</div>
      <!-- <span class="font_size16 color_price">{{$t('common.orderConfirmTip')}}</span> -->
    </div>
    <!-- 订单信息 -->
    <div class="border_radius_8 padding16 bg_color_fff box_shadow_card mt20">
      <div class="gap10">
        <div class="line_vertical"></div>
        <div class="font_size20 bold">{{$t('common.orderInfo')}}</div>
      </div>
      <div class="border border_radius_8 mt10">
        <div class="flex-between order_table padding16">
          <div class="flex_1 font_size18">{{$t('common.orderInfo')}}</div>
          <div class="flex_1 font_size18">{{$t('common.amount')}}（{{$t('common.RMB')}}）</div>
          <div class="flex_1 font_size18">
            {{$t('common.quantity')}}
            ({{orderInfo.orderType === 'bm_recharge' ? $t('common.baomibi') : $t('common.mibi')}})
          </div>
        </div>
        <div>
          <div class="flex-between padding16">
            <div class="flex_1 font_size18">
              <!-- <div class="flex-between">
                <img src="" alt="" style="width: 160px; height: 90px;" class="bg_color_f5">
                <div class="ml10">
                  <div class="font_size16 bold">UI界面设计教程</div>
                  <el-button type="primary" size="mini" plain class="mt5">技能标签</el-button>
                </div>
              </div> -->
              <div class="flex-column">
                <div class="gap10 cursor-pointer" @click="orderInfo.orderType = 'bm_recharge';handleOrderAmtChange()">
                  <div class="checkType" :class="{'active': orderInfo.orderType === 'bm_recharge'}"></div>
                  <div class="font_size16">{{$t('route.recharge')}}{{$t('common.baomibi')}}</div>
                </div>
                <div class="gap10 cursor-pointer mt20" @click="orderInfo.orderType = 'm_recharge';handleOrderAmtChange()">
                  <div class="checkType" :class="{'active': orderInfo.orderType === 'm_recharge'}"></div>
                  <div class="font_size16">{{$t('route.recharge')}}{{$t('common.mibi')}}</div>
                </div>
              </div>

            </div>
            <div class="flex_1 font_size18">
              <div>
                <!-- 只能输入正整数 -->
                <el-input-number v-model="orderInfo.orderAmt" :min="0" :max="1000000" :step="1" class="w100" 
                @change="handleOrderAmtChange"
                />
              </div>
              <div class="font_size16 color_price" v-if="message_recharge">{{message_recharge}}</div>
            </div>
            <div class="flex_1 font_size18 color_price">
             {{orderInfo.orderNum}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="border_radius_8 padding16 bg_color_fff box_shadow_card mt20">
      <div class="gap10">
        <div class="line_vertical"></div>
        <div class="font_size20 bold">{{$t('common.payWay')}}</div>
      </div>
      <div class="gap10 mt20">
        <div class="gap10 cursor-pointer" @click="payType = 1;pageRedirectionData='';orderInfo.payMethod = 'alipay'">
          <div class="checkType" :class="{'active': payType === 1}"></div>
          <div class="font_size16">{{$t('orderConfirm.personalPay')}}</div>
        </div>
        <div class="gap10 cursor-pointer" @click="payType = 2;orderInfo.payMethod = 'bank_transfer';pageRedirectionData='';payConfigDearchFn();">
          <div class="checkType" :class="{'active': payType === 2}"></div>
          <div class="font_size16">{{$t('orderConfirm.companyPay')}}</div>
        </div>
      </div>
      <!-- 个人支付 -->
      <div class="mt20" v-if="payType === 1">
        <div class="gap10">
          <div class="payway flex_1 gap5" 
          :class="{'active': orderInfo.payMethod === 'alipay'}" 
          @click="orderInfo.payMethod = 'alipay';pageRedirectionData=''">
            <div class="checkType"></div>
            <img :src="zhifubaoIcon" alt="" style="width: 40px; height: 40px;">
            <div class="font_size16">{{$t('orderConfirm.alipayPay')}}</div>
          </div>
          <div class="payway flex_1 gap5" 
          :class="{'active': orderInfo.payMethod === 'wechat_pay'}" 
          @click="orderInfo.payMethod = 'wechat_pay';pageRedirectionData=''">
            <div class="checkType"></div>
            <img :src="weixinIcon" alt="" style="width: 40px; height: 40px;">
            <div class="font_size16">{{$t('orderConfirm.wechatPay')}}</div>
          </div>
          <div class="payway flex_1 gap5" 
          :class="{'active': orderInfo.payMethod === 'union_pay'}" 
          @click="orderInfo.payMethod = 'union_pay';pageRedirectionData=''">
            <div class="checkType"></div>
            <img :src="yinlianIcon" alt="" style="width: 40px; height: 40px;">
            <div class="font_size16">{{$t('orderConfirm.unionPay')}}</div>
          </div>
          <div class="payway flex_1 gap5" 
          :class="{'active': orderInfo.payMethod === 'paypal'}" 
          @click="orderInfo.payMethod = 'paypal';pageRedirectionData=''">
            <div class="checkType"></div>
            <img :src="paypalIcon" alt="" style="width: 40px; height: 40px;">
            <div class="font_size16">{{$t('orderConfirm.paypalPay')}}</div>
          </div>
        </div>
        <!-- <div class="mt20">
          <div class="bold font_size18">米币</div>
          <div class="gap10 mt10">
            <div class="checkType"></div>
            <div class="font_size16">可用米币 <span class="color_price bold">2999</span></div>
            <div class="font_size16 color_price">(抵扣￥1.00)</div>
          </div>
        </div> -->
      </div>
      <!-- 对公支付 -->
      <div class="mt20" v-if="payType === 2">
        <div class="flex-between order_table padding16">
          <div class="flex_1 font_size16" v-for="item in BusinessAccount" :key="item.id">
            {{item.configName}}：{{item.configValue}}</div>
        </div>
        <div class="mt20">
          <div class="bold font_size18"> <span class="color_required">*</span> {{$t('orderConfirm.payVoucher')}}</div>
          <div class="mt20">
            <FileUploader
                ref="fileUploader"
                accept="image/*"
                :multiple="false"
                :limit="1"
                :auto-upload="true"
                list-type="picture-card"
                :data="{ directory: 'proof' }"
                buttonText=""
                v-model="images"
                tip=""
              />
          </div>
        </div>
      </div>
      <div class="mt20 flex-center-between" style="width: 300px;">
        <div class="font_size18">{{$t('orderConfirm.totalPrice')}}：</div>
        <div class="font_size16 bold">￥{{orderInfo.orderAmt}}</div>
      </div>
      <div class="mt20 flex-center-between" style="width: 300px;">
        <div class="font_size18">{{$t('orderConfirm.payAmount')}}：</div>
        <div class="font_size24 bold color_price">￥{{orderInfo.orderAmt}}</div>
      </div>
      <div class="wta-actions mt24">
        <button class="wta-btn-primary" @click="payNowFn" :disabled="loading" :class="{ 'wta-btn--loading': loading }">
          <span v-if="loading" class="wta-btn-spinner"></span>
          <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
          <span>{{$t('common.payNow')}}</span>
        </button>
      </div>
      <!-- 支付二维码 -->
      <div class="payment-qrcode mt20">
        <img 
          :src="pageRedirectionData"
          v-if="pageRedirectionData && orderInfo.payMethod == 'wechat_pay'"
          class="qrcode-image"
        />
        <iframe style="width:100%;"
          v-if="pageRedirectionData && orderInfo.payMethod == 'alipay'"
          :srcdoc="pageRedirectionData"
          frameborder="no"
          border="0"
          marginwidth="0"
          marginheight="0"
          scrolling="no"
          width="200"
          height="200"
          class="qrcode-iframe"
        ></iframe>
        <iframe style="width:100%;height:100vh"
          v-if="pageRedirectionData && orderInfo.payMethod == 'union_pay'"
          :srcdoc="pageRedirectionData"
          frameborder="no"
          border="0"
          marginwidth="0"
          marginheight="0"
          scrolling="no"
          width="200"
          height="200"
          class="qrcode-iframe"
        ></iframe>
        <!-- PayPal 支付按钮挂载容器（必须唯一ID） -->
        <div id="paypal-button-container" v-if="pageRedirectionData && orderInfo.payMethod == 'paypal'"></div>
      </div>
      <!-- <div class="mt20 font_size14">录播和体验课课程属于虚拟商品，购买后无特殊原因，不支持退款</div> -->
      <div class="mt20 gap10 cursor-pointer" @click="agreement = !agreement">
        <div class="checkType" :class="{'active': agreement}"></div>
        {{$t('common.readAndAgree')}} 
        <span class="color_theme bold" @click="router.push({name:'Agreement',query:{type:'service_agreement'}})">《{{$t('agreement.service_agreement')}}》</span> 和
        <span class="color_theme bold" @click="router.push({name:'Agreement',query:{type:'Intellectual_agreement'}})">《{{$t('agreement.Intellectual_agreement')}}》</span> 
      </div>
    </div>
  </div>
</template>
<script setup>
import zhifubaoIcon from '@/assets/imgs/pay/zhifubao.png'
import weixinIcon from '@/assets/imgs/pay/weixin.png'
import yinlianIcon from '@/assets/imgs/pay/yinlian.png'
import paypalIcon from '@/assets/imgs/pay/paypal.png'
import qianbaoIcon from '@/assets/imgs/pay/qianbao.png'

import { paySuccess } from '@/utils/util.js'
import FileUploader from '@/components/FileUploader.vue'
import { calRate, createOrder,payResult,payConfigDearch } from '@/api/order.js'
import qrcode from 'qrcode'



import { reactive, ref, onBeforeUnmount, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import DGTMessage from '@/utils/message'
import { useAppStore } from '@/pinia/appStore'
const appStore = useAppStore()
import { useI18n } from 'vue-i18n' 
const { t } = useI18n()
//获取参数
const route = useRoute()
const router = useRouter()
const query = route.query;
const id = ref(query.id || '');

//
// 支付方式
const payType = ref(1);//支付类型 1：个人支付 2：对公支付
// 协议
const agreement = ref(false);//是否同意协议
// 付款凭证
const images = ref([]);//付款凭证
// 加载状态
const loading = ref(false);//是否加载中

//支付信息
const orderId = ref('');//订单id
const message_recharge = ref('');//充值提示信息
const orderInfo = reactive({
  payMethod: 'alipay',////alipay,wechat_pay,union_pay,paypal,bank_transfer,MI,BMI
  orderType: 'bm_recharge',////m_recharge,bm_recharge,workflow_purchase,course_purchase,member_recharge,mi_mall,exchange_mi,exchange_bmi
  productId:'',
  orderNum:0,
  orderAmt:0,//输入的金额
  transferProof: '',//转账凭证
})
const pageRedirectionData = ref('');//支付二维码


//关闭页面时清除定时器
// 关闭页面时清除定时器
onBeforeUnmount(() => {
  stopPolling();
});



// 立即支付
const payNowFn = () => {
  if(!agreement.value){
    DGTMessage.warning(t('orderConfirm.pleaseAgreeAgreement'))
    return
  }
  if(orderInfo.orderAmt <= 0){
    DGTMessage.warning(t('orderConfirm.pleaseInputAmount'))
    return
  }
  orderInfo.transferProof = images.value.map(item => item.url).join(',');
  if(orderInfo.transferProof === '' && orderInfo.payMethod === 'bank_transfer'){
    DGTMessage.warning(t('orderConfirm.pleaseUploadVoucher'))
    return
  }
  loading.value = true;
  createOrder(orderInfo).then(res => {
    if(res.code === 200){
      orderId.value = res.data?.orderId || '';
      const payData = res.data?.payData || {};
      // DGTMessage.success('支付成功')
      //回退
      // router.back()
      switch(orderInfo.payMethod){
        case 'alipay':
          pageRedirectionData.value = payData.pageRedirectionData || '';
          setTimeout
          (() => {
            loading.value = false;
          }, 1000);
          startPolling();
          break;
        case 'wechat_pay':
          qrcode.toDataURL(payData.codeUrl, (err, url) => {
            if (err) {
              console.error(err)
            } else {
              pageRedirectionData.value = url
            }
          })
          loading.value = false;
          startPolling();
          break;
        case 'union_pay':
          pageRedirectionData.value = payData || '';
          loading.value = false;
          startPolling();
          break;
        case 'paypal':
          pageRedirectionData.value = payData || '';
          nextTick(() => {
            pay_paypal();
          })
          loading.value = false;
          startPolling();
          break;
        case 'bank_transfer':
          paySuccess({t,callback:router.back,msg:t('common.bankTransferSuccess')});
          loading.value = false;
          break;
      }
    }
  }).catch(() => {
    loading.value = false;
  })
  //回退
  // router.back()
};


// 支付状态轮询相关
const pollingTimer = ref(null)
const isPolling = ref(false)
const maxPollingAttempts = 100 // 最大轮询次数
const pollingAttempts = ref(0)
const pollingInterval = 3000

// 启动轮询
const startPolling = () => {
  if (isPolling.value) return
  console.log('启动轮询', orderId.value)
  isPolling.value = true
  pollingAttempts.value = 0
  pollingTimer.value = setInterval(() => {
    payResult({id:orderId.value}).then((res) => {
      if (res.code == 200 && res.data) {
        // DGTMessage.success('支付成功！');
        // 确认弹框
        paySuccess({t,callback:router.back});
        appStore.USERINFO();
        stopPolling()
      }
    })
  }, pollingInterval)
}

// 停止轮询
const stopPolling = () => {
  if (pollingTimer.value) {
    clearInterval(pollingTimer.value)
    pollingTimer.value = null
  }
  isPolling.value = false
}

const pay_paypal = () => {
  //清除上次支付按钮
  document.getElementById('paypal-button-container').innerHTML = '';
  loading.value = false;
  paypal.Buttons({
    createOrder: (data, actions) => {
      return pageRedirectionData.value
    },
    onApprove: (data, actions) => {
      return actions.order.capture().then((details) => {
        //paySuccess({t,callback:router.back});
        //stopPolling()
      });
    }
  }).render('#paypal-button-container');
}

// 计算汇率
const handleOrderAmtChange = () => {
  // 先验证输入值
  if (orderInfo.orderAmt !== null && orderInfo.orderAmt !== undefined) {
    // 确保为整数
    orderInfo.orderAmt = Math.floor(Number(orderInfo.orderAmt));
    
    // 确保为正数
    if (orderInfo.orderAmt <= 0) {
      orderInfo.orderAmt = 1;
    }
  }
  if(orderInfo.orderAmt){
    calRate({
      orderType: orderInfo.orderType,
      orderNum: orderInfo.orderAmt,
    }).then(res => {
      if(res.code === 200){
        orderInfo.orderNum = res.data?.targetAmount || 0;
        message_recharge.value = res.data?.message || 0;
      }
    })
  }else{
    orderInfo.orderNum = 0;
    message_recharge.value = '';
  }
};
// 查询汇率01-对公账户 02-提现 03-系统货币 04-米币设置
const BusinessAccount = ref([]);
const payConfigDearchFn = () => {
  payConfigDearch({
    id: "01",//01-对公账户 02-提现 03-系统货币 04-米币设置
  }).then(res => {
    if(res.code === 200){
      BusinessAccount.value = res.data || [];
    }
  })
};



</script>
<style scoped lang="scss">
.orderConfirm {
  min-height: 100vh;
  background: linear-gradient(160deg, #eef2ff 0%, #ede9fe 28%, #e8e4ff 52%, #f3e8ff 72%, #fce7f3 100%);
  padding: 20px 20px 150px;
}

// 容器
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

// 面包屑
.wta-hero__breadcrumb-wrap {
  padding: 24px 0;
}

// 主内容
.wta-body {
  padding-bottom: 48px;
}

// 页面头部
.wta-header {
  margin-bottom: 32px;
  
  .wta-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #374151;
    border-radius: 8px;
    padding: 8px 16px;
    transition: all 0.3s ease;
    
    &:hover {
      background: #f9fafb;
      border-color: #d1d5db;
    }
  }
  
  .wta-title {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
  }
  
  .wta-subtitle {
    font-size: 16px;
    color: #6b7280;
  }
}

// 卡片样式
.wta-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  }
  
  &__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    
    &-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: linear-gradient(135deg, #6366f1, #a855f7);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      flex-shrink: 0;
      
      &--purple {
        background: linear-gradient(135deg, #a855f7, #d946ef);
      }
      
      &--green {
        background: linear-gradient(135deg, #10b981, #34d399);
      }
    }
    
    &-title {
      font-size: 18px;
      font-weight: 600;
      color: #111827;
    }
    
    &-subtitle {
      font-size: 14px;
      color: #6b7280;
      margin-top: 4px;
    }
  }
  
  &__body {
    padding: 24px;
  }
}

// 订单头部
.wta-order-header {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
  
  &__item {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    text-align: center;
  }
}

// 订单内容
.wta-order-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}

// 订单类型选择
.wta-order-type {
  display: flex;
  flex-direction: column;
  gap: 16px;
  
  &__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      background: #f3f4f6;
    }
    
    &--active {
      background: #eef2ff;
      border-color: #c7d2fe;
      
      .wta-order-type__radio {
        border-color: #6366f1;
        background: #6366f1;
        
        &::after {
          opacity: 1;
        }
      }
    }
  }
  
  &__radio {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
    
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: white;
      opacity: 0;
      transition: all 0.3s ease;
    }
  }
  
  &__text {
    font-size: 14px;
    color: #111827;
  }
}

// 输入框包装器
.wta-input-wrap {
  position: relative;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: all 0.3s ease;
  
  &:hover {
    border-color: #d1d5db;
  }
}

// 输入框样式
.wta-input {
  background: transparent !important;
  border: none !important;
  color: #111827 !important;
  height: 44px;
  line-height: 44px;
  width: 100%;
  
  &::placeholder {
    color: #9ca3af !important;
  }
  
  &--has-prefix {
    padding-left: 44px !important;
  }
}

// 输入框前缀图标
.wta-input-prefix-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  transition: color 0.3s ease;
  
  .wta-input-wrap:hover & {
    color: #6366f1;
  }
}

// 字段提示
.wta-field-hint {
  margin-top: 8px;
  font-size: 14px;
  color: #6366f1;
}

// 订单数量
.wta-order-quantity {
  font-size: 16px;
  font-weight: 500;
  color: #111827;
}

// 支付类型选择
.wta-pay-type {
  display: flex;
  gap: 16px;
  
  &__item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      background: #f3f4f6;
    }
    
    &--active {
      background: #eef2ff;
      border-color: #c7d2fe;
      
      .wta-pay-type__radio {
        border-color: #6366f1;
        background: #6366f1;
        
        &::after {
          opacity: 1;
        }
      }
    }
  }
  
  &__radio {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
    
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: white;
      opacity: 0;
      transition: all 0.3s ease;
    }
  }
  
  &__text {
    font-size: 14px;
    color: #111827;
  }
}

// 支付方式选择
.wta-pay-methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

// 支付方式项
.wta-pay-method {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    background: #f3f4f6;
  }
  
  &--active {
    background: #eef2ff;
    border-color: #c7d2fe;
    
    .wta-pay-method__radio {
      border-color: #6366f1;
      background: #6366f1;
      
      &::after {
        opacity: 1;
      }
    }
  }
  
  &__radio {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
    
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: white;
      opacity: 0;
      transition: all 0.3s ease;
    }
  }
  
  &__icon {
    width: 40px;
    height: 40px;
  }
  
  &__text {
    font-size: 14px;
    color: #111827;
  }
}

// 对公账户信息
.wta-bank-transfer {
  
  .wta-bank-account {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    
    &__item {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      &-label {
        font-size: 14px;
        color: #6b7280;
        min-width: 80px;
      }
      
      &-value {
        font-size: 14px;
        color: #111827;
        word-break: break-all;
      }
    }
  }
}

// 上传区域
.wta-upload-section {
  
  .wta-field-label {
    display: flex;
    align-items: center;
    gap: 6px;
    
    .wta-required {
      color: #ef4444;
    }
    
    .wta-label-text {
      font-size: 14px;
      font-weight: 500;
      color: #111827;
    }
  }
  
  .wta-upload-area {
    margin-top: 12px;
  }
}

// 订单汇总
.wta-order-summary {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  
  &__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    &-label {
      font-size: 14px;
      color: #6b7280;
    }
    
    &-value {
      font-size: 14px;
      color: #111827;
    }
  }
  
  &__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    
    &-label {
      font-size: 16px;
      font-weight: 500;
      color: #111827;
    }
    
    &-value {
      font-size: 20px;
      font-weight: 700;
      color: #6366f1;
    }
  }
}

// 操作按钮
.wta-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

// 主要按钮
.wta-btn-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  border: none;
  color: white;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  
  &:hover {
    opacity: 0.9;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
  }
  
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  &--loading {
    cursor: not-allowed;
  }
  
  .wta-btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
}

// 支付二维码
.wta-payment-qrcode {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  
  &__title {
    font-size: 16px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 16px;
    text-align: center;
  }
  
  &__content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
  }
  
  &__image {
    width: 200px;
    height: 200px;
    border-radius: 8px;
  }
  
  &__iframe {
    width: 200px;
    height: 200px;
    border-radius: 8px;
    
    &--full {
      width: 100%;
      height: 400px;
    }
  }
  
  &__paypal {
    width: 100%;
    min-height: 200px;
  }
}

// 协议同意
.wta-agreement {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  
  &__checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-top: 2px;
    
    &--checked {
      background: #6366f1;
      border-color: #6366f1;
    }
  }
  
  &__text {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
  }
  
  &__link {
    color: #6366f1;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.3s ease;
    
    &:hover {
      color: #818cf8;
      text-decoration: underline;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .orderConfirm {
    padding: 10px;
  }
  
  .container {
    padding: 0 10px;
  }
  
  .wta-order-content {
    grid-template-columns: 1fr;
  }
  
  .wta-pay-methods {
    grid-template-columns: 1fr;
  }
  
  .wta-pay-type {
    flex-direction: column;
  }
  
  .wta-order-header {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .wta-actions {
    justify-content: center;
  }
}
.wta-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

// 主要按钮
.wta-btn-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  border: none;
  color: white;
  border-radius: 8px;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  
  &:hover {
    opacity: 0.95;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
    transform: translateY(-2px);
  }
  
  &:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
  }
  
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
  }
  
  &--loading {
    cursor: not-allowed;
  }
  
  .wta-btn-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  svg {
    transition: transform 0.3s ease;
  }
  
  &:hover svg {
    transform: translateX(2px);
  }
  
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .wta-actions {
    justify-content: center;
  }
  
  .wta-btn-primary {
    padding: 12px 24px;
    font-size: 14px;
  }
}
</style>


