<template>
  <view class="payment-container">
    <!-- 订单状态 -->
    <view class="status-card">
      <view class="status-icon" :class="orderStatus.class"></view>
      <view class="status-text">{{ orderStatus.text }}</view>
      <view class="status-desc">{{ orderStatus.desc }}</view>
    </view>
    
    <!-- 订单信息 -->
    <view class="order-card">
      <view class="card-title">订单信息</view>
      <view class="info-item">
        <text class="label">订单号</text>
        <text class="value">{{ orderInfo.orderNo || '-' }}</text>
      </view>
      <view class="info-item">
        <text class="label">设备号</text>
        <text class="value">{{ orderInfo.deviceNo || '-' }}</text>
      </view>
      <view class="info-item">
        <text class="label">创建时间</text>
        <text class="value">{{ orderInfo.createTime || '-' }}</text>
      </view>
      <view class="info-item">
        <text class="label">联系电话</text>
        <text class="value">{{ orderInfo.phone || '-' }}</text>
      </view>
    </view>
    
    <!-- 费用信息 -->
    <view class="price-card">
      <view class="card-title">费用信息</view>
      <view class="price-item">
        <text class="label">押金</text>
        <text class="value">￥{{ orderInfo.deposit || '99.00' }}</text>
      </view>
      <view class="price-item">
        <text class="label">套餐</text>
        <text class="value">{{ packageInfo.time }} (￥{{ packageInfo.price }})</text>
      </view>
      <view class="price-item">
        <text class="label">租借费用</text>
        <text class="value">￥{{ orderInfo.amount || packageInfo.price }}</text>
      </view>
      <view class="price-item total">
        <text class="label">合计</text>
        <text class="value">￥{{ totalAmount }}</text>
      </view>
    </view>
    
    <!-- 支付方式 -->
    <view class="payment-methods">
      <view class="card-title">支付方式</view>
      <view 
        v-for="(method, index) in paymentMethods" 
        :key="index"
        class="method-item"
        :class="{ active: selectedMethod === index }"
        @click="selectMethod(index)"
      >
        <view class="method-icon" :class="method.icon"></view>
        <view class="method-name">{{ method.name }}</view>
        <view class="method-check"></view>
      </view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="total-amount">
        <text>合计：</text>
        <text class="amount">￥{{ totalAmount }}</text>
      </view>
      <button class="pay-btn" @click="handlePayment">立即支付</button>
    </view>
    
    <view class="back-btn" @click="navigateBack">
        <text>返回设备详情</text>
    </view>

    methods: {

    
        navigateBack() {
            uni.redirectTo({
                url: `/pages/device/detail?deviceId=${this.deviceId}`
            })
        }
    }
  </view>
</template>

<script>
import { queryById } from '@/config/user.js'

export default {
  data() {
    return {
      orderId: null,
      orderInfo: {},
      packageInfo: {
        time: '',
        price: '0.00'
      },
      orderStatus: {
        text: '等待支付',
        desc: '请在15分钟内完成支付',
        class: 'waiting'
      },
      paymentMethods: [
        {
          name: '微信支付',
          icon: 'wechat'
        },
        {
          name: '支付宝',
          icon: 'alipay'
        }
      ],
      selectedMethod: 0
    }
  },
  computed: {
    totalAmount() {
      const deposit = parseFloat(this.orderInfo.deposit || 99)
      const amount = parseFloat(this.orderInfo.amount || this.packageInfo.price || 0)
      return (deposit + amount).toFixed(2)
    }
  },
  onLoad(options) {
    if (options && options.orderId) {
      this.orderId = options.orderId
      
      // 获取传递的套餐信息
      if (options.packageTime && options.packagePrice) {
        this.packageInfo = {
          time: options.packageTime,
          price: options.packagePrice
        }
      }
      
      this.loadOrderInfo()
    } else {
      uni.showToast({
        title: '订单信息不存在',
        icon: 'none'
      })
      setTimeout(() => {
        uni.redirectTo({
          url: '/pages/index/index'
        })
      }, 1500)
    }
  },
  methods: {
    // 加载订单信息
    async loadOrderInfo() {
      try {
        uni.showLoading({
          title: '加载中'
        })
        
        const res = await queryById(this.orderId)
        if (res.code === 200 && res.data) {
          const orderData = res.data
          this.orderInfo = {
            orderNo: orderData.orderNo || orderData.orderId,
            deviceNo: orderData.deviceNo,
            createTime: orderData.createTime,
            phone: orderData.phone,
            deposit: '99.00', // 假设押金固定为99元
            amount: orderData.amount || this.packageInfo.price || '0.00'
          }
          
          // 如果订单中没有套餐信息，但URL参数中有，则使用URL参数中的套餐信息
          if (!orderData.packageTime && this.packageInfo.time) {
            this.orderInfo.packageTime = this.packageInfo.time
            this.orderInfo.packagePrice = this.packageInfo.price
          }
        } else {
          throw new Error('获取订单信息失败')
        }
        
        uni.hideLoading()
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: error.message || '获取订单信息失败',
          icon: 'none'
        })
      }
    },
    
    // 选择支付方式
    selectMethod(index) {
      this.selectedMethod = index
    },
    
    // 处理支付
    async handlePayment() {
      try {
        uni.showLoading({
          title: '处理中'
        })
        
        console.log('开始处理支付，订单号:', this.orderId)

        // 调用后端支付API
        const res = await uni.request({
          url: `${uni.getStorageSync('baseUrl') || 'http://127.0.0.1:8080'}/app/payment/${this.orderInfo.orderNo}`,
          method: 'GET',
          header: {
            'Authorization': 'Bearer ' + uni.getStorageSync('token'),
            'Clientid': uni.getStorageSync('client_id')
          }
        })
        
        console.log('支付API返回结果:', res.data)
        
        if (res.statusCode === 200 && res.data.code === 200) {
          // 获取微信支付所需参数
          const payParams = res.data.data
          
          console.log('准备调用微信支付，参数:', payParams)
          
          // 验证支付参数是否完整
          if (!payParams.timeStamp || !payParams.nonceStr || 
              !payParams.packageValue || !payParams.paySign) {
            console.error('支付参数不完整:', payParams)
            throw new Error('支付参数不完整，请联系客服')
          }
          
          // 调用微信支付API
          uni.requestPayment({
            provider: 'wxpay',
            timeStamp: payParams.timeStamp,
            nonceStr: payParams.nonceStr,
            package: payParams.packageValue, // 后端返回的是packageValue字段
            signType: payParams.signType || 'MD5',
            paySign: payParams.paySign,
            success: (payRes) => {
              console.log('支付成功:', payRes)
              uni.hideLoading()
              // 支付成功后开始轮询订单状态
              this.pollOrderStatus()
            },
            fail: (err) => {
              console.error('支付失败:', err)
              uni.hideLoading()
              // 用户取消支付的情况，不显示错误提示
              if (err.errMsg === 'requestPayment:fail cancel') {
                console.log('用户取消了支付')
                return
              }
              uni.showToast({
                title: err.errMsg || '支付失败',
                icon: 'none'
              })
            },
            complete: () => {
              console.log('支付流程结束')
            }
          })
        } else {
          throw new Error(res.data?.msg || '支付请求失败')
        }
      } catch (error) {
        console.error('支付处理错误:', error)
        uni.hideLoading()
        uni.showToast({
          title: error.message || '支付失败',
          icon: 'none'
        })
      }
    },
    
    // 轮询订单状态
    async pollOrderStatus() {
      let retryCount = 0;
      const maxRetries = 30; // 增加最大重试次数，允许更长时间检测
      const interval = 2000; // 调整为2秒间隔
    
      const checkStatus = async () => {
        try {
          // 使用queryById方法直接查询订单状态
          const res = await queryById(this.orderId);
          console.log('轮询订单状态结果:', res);
    
          if (res.code === 200 && res.data) {
            const orderData = res.data;
            // 检查订单是否已支付成功
            if (orderData.orderStatus === 'IN_USED' || 
                orderData.orderStatus === 'PAYMENT_SUCCESSFUL') {
              console.log('支付成功，订单状态:', orderData.orderStatus);
              // 显示弹出充电宝的提示
              uni.showToast({
                title: '支付成功，充电宝已弹出',
                icon: 'success',
                duration: 2000
              });
              
              // 延迟跳转到支付成功页面
              setTimeout(() => {
                uni.redirectTo({
                  url: `/pages/order/success?orderId=${this.orderId}`
                });
              }, 1500);
              return;
            }
          }
    
          if (retryCount < maxRetries) {
            retryCount++;
            console.log(`第${retryCount}次轮询，等待订单状态更新...`);
            setTimeout(checkStatus, interval);
          } else {
            console.error('轮询订单状态超时');
            uni.showModal({
              title: '提示',
              content: '订单状态查询超时，请在"我的订单"中查看订单状态',
              showCancel: false,
              success: function(res) {
                if (res.confirm) {
                  uni.redirectTo({
                    url: '/pages/order/index'
                  });
                }
              }
            });
          }
        } catch (error) {
          console.error('查询订单状态失败:', error);
          // 出错时继续轮询，不要中断
          if (retryCount < maxRetries) {
            retryCount++;
            setTimeout(checkStatus, interval);
          } else {
            uni.showToast({
              title: '查询订单状态失败',
              icon: 'none'
            });
          }
        }
      };
    
      // 开始轮询
      checkStatus();
    },
  }
}

</script>

<style lang="scss" scoped>
.payment-container {
  min-height: 100vh;
  background: #f8f8f8;
  padding: 30rpx;
  padding-bottom: 180rpx;
  box-sizing: border-box;
  
  .status-card {
    background: #fff;
    border-radius: 24rpx;
    padding: 40rpx 30rpx;
    margin-bottom: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
    
    .status-icon {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      background: #f5f5f5;
      margin-bottom: 20rpx;
      
      &.waiting {
        background: #FFF9C4;
      }
      
      &.success {
        background: #E8F5E9;
      }
      
      &.failed {
        background: #FFEBEE;
      }
    }
    
    .status-text {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .status-desc {
      font-size: 28rpx;
      color: #999;
    }
  }
  
  .order-card, .price-card {
    background: #fff;
    border-radius: 24rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
    
    .card-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 20rpx;
      position: relative;
      padding-left: 20rpx;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 8rpx;
        height: 32rpx;
        background: #1976D2;
        border-radius: 4rpx;
      }
    }
    
    .info-item, .price-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1px solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .label {
        font-size: 28rpx;
        color: #666;
      }
      
      .value {
        font-size: 28rpx;
        color: #333;
      }
      
      &.total {
        margin-top: 10rpx;
        padding-top: 30rpx;
        border-top: 1px solid #f5f5f5;
        
        .label, .value {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
        }
        
        .value {
          color: #FF5722;
        }
      }
    }
  }
  
  .payment-methods {
    background: #fff;
    border-radius: 24rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
    
    .method-item {
      display: flex;
      align-items: center;
      padding: 30rpx 20rpx;
      border-bottom: 1px solid #f5f5f5;
      position: relative;
      
      &:last-child {
        border-bottom: none;
      }
      
      &.active {
        background: #F5F5F5;
        
        .method-check {
          background: #1976D2;
          
          &::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 12rpx;
            height: 12rpx;
            background: #fff;
            border-radius: 50%;
          }
        }
      }
      
      .method-icon {
        width: 48rpx;
        height: 48rpx;
        margin-right: 20rpx;
        
        &.wechat {
          background: url('../../static/images/wechat.svg') no-repeat center/contain;
        }
        
        &.alipay {
          background: url('../../static/images/alipay.svg') no-repeat center/contain;
        }
      }
      
      .method-name {
        flex: 1;
        font-size: 28rpx;
        color: #333;
      }
      
      .method-check {
        width: 32rpx;
        height: 32rpx;
        border-radius: 50%;
        border: 2rpx solid #ddd;
        position: relative;
      }
    }
  }
  
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    padding: 20rpx 30rpx;
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.04);
    
    .total-amount {
      font-size: 28rpx;
      color: #666;
      
      .amount {
        font-size: 36rpx;
        font-weight: 600;
        color: #FF5722;
        margin-left: 10rpx;
      }
    }
    
    .pay-btn {
      background: #1976D2;
      color: #fff;
      font-size: 32rpx;
      font-weight: 600;
      padding: 20rpx 60rpx;
      border-radius: 100rpx;
      border: none;
      
      &:active {
        opacity: 0.9;
      }
    }
  }
}
</style>