<template>
  <!-- 定义页面的根容器 -->
  <view class="container">
    <!-- 当支付状态为失败（sts == 0）时显示的内容 -->
    <view v-if="sts == 0">
      <!-- 显示支付失败的状态信息 -->
      <view class="pay-sts fail">
        支付失败
      </view>

      <!-- 提示用户在30分钟内完成付款，否则订单会被取消 -->
      <view class="tips">
        请在
        <text class="warn">30分钟</text>内完成付款
      </view>
      <view class="tips">
        否则订单会被系统取消
      </view>

      <!-- 按钮组，提供“查看订单”和“重新支付”的操作选项 -->
      <view class="btns">
        <!-- “查看订单”按钮，点击后跳转到订单列表页面 -->
        <text class="button checkorder"
              @tap="toOrderList">
          查看订单
        </text>

        <!-- “重新支付”按钮，点击后触发重新支付的操作 -->
        <text class="button payagain"
              @tap="payAgain">
          重新支付
        </text>
      </view>
    </view>

    <!-- 当支付状态为成功（sts == 1）时显示的内容 -->
    <view v-if="sts == 1">
      <!-- 显示支付成功的状态信息 -->
      <view class="pay-sts succ">
        支付成功
      </view>

      <!-- 感谢用户的购买 -->
      <view class="tips">
        感谢您的购买
      </view>

      <!-- 按钮组，提供“查看订单”和“继续购物”的操作选项 -->
      <view class="btns">
        <!-- “查看订单”按钮，点击后跳转到订单列表页面 -->
        <text class="button checkorder"
              @tap="toOrderList">
          查看订单
        </text>

        <!-- “继续购物”按钮，点击后返回首页 -->
        <text class="button shopcontinue"
              @tap="toIndex">
          继续购物
        </text>
      </view>
    </view>
  </view>
</template>

<script setup>
  // 引入Vue的响应式数据ref
  import { ref } from 'vue';
  // 引入uni-app的API
  import { onLoad, navigateTo, switchTab, showLoading, hideLoading, requestPayment, redirectTo } from '@dcloudio/uni-app';
  // 引入HTTP请求模块（假设已经定义）
  import http from '@/utils/http';

  // 定义支付状态和订单号的响应式变量
  const sts = ref(0); // 初始状态下设置为0，表示支付失败
  const orderNumbers = ref(''); // 存储订单号

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad((options) => {
    // 根据页面加载时传递的参数设置支付状态和订单号
    sts.value = parseInt(options.sts, 10); // 将字符串转换为整数
    orderNumbers.value = options.orderNumbers;
  });

  // 定义跳转到订单列表页面的方法
  const toOrderList = () => {
    navigateTo({
      url: '/pages/orderList/orderList?sts=0' // 传递参数sts=0表示只显示未支付的订单
    });
  };

  // 定义跳转到首页的方法
  const toIndex = () => {
    switchTab({
      url: '/pages/index/index' // 跳转到首页
    });
  };

  // 定义重新支付的方法
  const payAgain = () => {
    // 显示加载中提示框，防止用户多次点击
    showLoading({
      mask: true // 遮罩层，阻止用户交互
    });

    // 发起支付请求
    http.request({
      url: '/p/order/pay', // 支付接口URL
      method: 'POST', // HTTP请求方法
      data: {
        payType: 1, // 支付类型（例如：1表示微信支付）
        orderNumbers: orderNumbers.value // 传递订单号
      }
    })
      .then(({ data }) => {
        // 请求成功后隐藏加载中提示框
        hideLoading();

        // 发起微信支付请求
        requestPayment({
          timeStamp: data.timeStamp, // 时间戳
          nonceStr: data.nonceStr, // 随机字符串
          package: data.packageValue, // 包含预支付交易会话标识
          signType: data.signType, // 签名类型
          paySign: data.paySign, // 支付签名
          success: () => {
            // 支付成功后跳转到支付结果页面，并传递支付状态和订单号
            redirectTo({
              url: `/pages/pay-result/pay-result?sts=1&orderNum=${orderNumbers.value}`
            });
          },
          fail: (err) => {
            console.error('支付失败:', err);
            // 可以在这里处理支付失败的情况，例如显示错误提示
          }
        });
      })
      .catch(err => {
        console.error('发起支付请求失败:', err);
        // 可以在这里处理发起支付请求失败的情况，例如显示错误提示
      });
  };
</script>

<style scoped lang="scss">
  /* 使用本地的SCSS文件来定义样式 */
  @use './pay-result.scss';
</style>
