<template>
  <view class="container">
    <view class="order-detail">
      <!-- 配送地址信息 -->
      <view v-if="userAddrDto" class="delivery-addr">
        <view class="user-info">
          <text class="item">{{ userAddrDto.receiver }}</text> <!-- 显示收件人姓名 -->
          <text class="item">{{ userAddrDto.mobile }}</text> <!-- 显示联系电话 -->
        </view>
        <view class="addr">
          {{ userAddrDto.province }}{{ userAddrDto.city }}{{ userAddrDto.area }}{{ userAddrDto.addr }} <!-- 显示详细地址 -->
        </view>
      </view>

      <!-- 商品信息 -->
      <view v-if="orderItemDtos" class="prod-item">
        <block v-for="(item, index) in orderItemDtos" :key="index">
          <view class="item-cont" :data-prodid="item.prodId" @tap="toProdPage">
            <view class="prod-pic">
              <image :src="item.pic" /> <!-- 显示商品图片 -->
            </view>
            <view class="prod-info">
              <view class="prodname">{{ item.prodName }}</view> <!-- 显示商品名称 -->
              <view class="prod-info-cont">
                <text class="number">数量：{{ item.prodCount }}</text> <!-- 显示商品数量 -->
                <text class="info-item">{{ item.skuName }}</text> <!-- 显示SKU信息 -->
              </view>
              <view class="price-nums clearfix">
                <text class="prodprice">
                  <text class="symbol">￥</text> <!-- 显示价格符号 -->
                  <text class="big-num">{{ wxs.parsePrice(item.price)[0] }}</text> <!-- 显示整数部分 -->
                  <text class="small-num">.{{ wxs.parsePrice(item.price)[1] }}</text> <!-- 显示小数部分 -->
                </text>
                <view class="btn-box" />
              </view>
            </view>
          </view>
        </block>
      </view>

      <!-- 订单信息 -->
      <view class="order-msg">
        <view class="msg-item">
          <view class="item">
            <text class="item-tit">订单编号：</text>
            <text class="item-txt">{{ orderNumber }}</text> <!-- 显示订单编号 -->
          </view>
          <view class="item">
            <text class="item-tit">下单时间：</text>
            <text class="item-txt">{{ createTime }}</text> <!-- 显示下单时间 -->
          </view>
        </view>
        <view class="msg-item">
          <view class="item">
            <text class="item-tit">支付方式：</text>
            <text class="item-txt">微信支付</text> <!-- 固定显示支付方式为微信支付 -->
          </view>
          <view class="item">
            <text class="item-tit">配送方式：</text>
            <text class="item-txt">普通配送</text> <!-- 固定显示配送方式为普通配送 -->
          </view>
          <view class="item" v-if="!!remarks">
            <text class="item-tit">订单备注：</text>
            <text class="item-txt remarks">{{ remarks }}</text> <!-- 显示订单备注，如果有 -->
          </view>
        </view>
      </view>

      <!-- 订单金额详情 -->
      <view class="order-msg">
        <view class="msg-item">
          <view class="item">
            <view class="item-tit">订单总额：</view>
            <view class="item-txt price">
              <text class="symbol">￥</text>
              <text class="big-num">{{ wxs.parsePrice(total)[0] }}</text> <!-- 显示订单总额的整数部分 -->
              <text class="small-num">.{{ wxs.parsePrice(total)[1] }}</text> <!-- 显示订单总额的小数部分 -->
            </view>
          </view>
          <view class="item">
            <view class="item-tit">运费：</view>
            <view class="item-txt price">
              <text class="symbol">￥</text>
              <text class="big-num">{{ wxs.parsePrice(transfee)[0] }}</text> <!-- 显示运费的整数部分 -->
              <text class="small-num">.{{ wxs.parsePrice(transfee)[1] }}</text> <!-- 显示运费的小数部分 -->
            </view>
          </view>
          <view class="item">
            <view class="item-tit">优惠券：</view>
            <view class="item-txt price">
              <text class="symbol">-￥</text>
              <text class="big-num">{{ wxs.parsePrice(reduceAmount)[0] }}</text> <!-- 显示优惠券的整数部分 -->
              <text class="small-num">.{{ wxs.parsePrice(reduceAmount)[1] }}</text> <!-- 显示优惠券的小数部分 -->
            </view>
          </view>
          <view class="item payment">
            <view class="item-txt price">
              实付款：
              <text class="symbol">￥</text>
              <text class="big-num">{{ wxs.parsePrice(actualTotal)[0] }}</text> <!-- 显示实付款的整数部分 -->
              <text class="small-num">.{{ wxs.parsePrice(actualTotal)[1] }}</text> <!-- 显示实付款的小数部分 -->
            </view>
          </view>
        </view>
      </view>

      <!-- 底部栏 -->
      <view v-if="status === 5 || status === 6" class="order-detail-footer">
        <text v-if="status === 5 || status === 6" class="dele-order" @tap="delOrderList">
          删除订单
        </text> <!-- 如果订单状态为已完成或已取消，则显示删除订单按钮 -->
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  import { onLoad, uni } from '@dcloudio/uni-app'; // 假设已经正确导入了必要的模块

  // 引入处理数字的工具函数
  const wxs = number();

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad((options) => {
    loadOrderDetail(options.orderNum); // 加载订单详情
  });

  /**
   * 跳转商品详情页
   * @param e - 触发事件对象
   */
  const toProdPage = (e) => {
    const prodid = e.currentTarget.dataset.prodid; // 获取商品ID
    uni.navigateTo({
      url: '/pages/prod/prod?prodid=' + prodid // 导航到商品详情页
    });
  };

  // 定义响应式数据
  const remarks = ref(''); // 订单备注
  const orderItemDtos = ref([]); // 商品列表
  const reduceAmount = ref(''); // 优惠券金额
  const transfee = ref(''); // 运费
  const status = ref(0); // 订单状态
  const actualTotal = ref(0); // 实付款
  const userAddrDto = ref(null); // 收货地址信息
  const orderNumber = ref(''); // 订单编号
  const createTime = ref(''); // 下单时间
  const total = ref(0); // 商品总额

  /**
   * 加载订单数据
   * @param orderNum - 订单编号
   */
  const loadOrderDetail = (orderNum) => {
    uni.showLoading(); // 显示加载提示
    http.request({
      url: '/p/myOrder/orderDetail', // API 端点 URL
      method: 'GET', // 请求方法
      data: {
        orderNumber: orderNum // 请求参数
      }
    })
      .then(({ data }) => {
        orderNumber.value = orderNum;
        actualTotal.value = data.actualTotal;
        userAddrDto.value = data.userAddrDto;
        remarks.value = data.remarks;
        orderItemDtos.value = data.orderItemDtos;
        createTime.value = data.createTime;
        status.value = data.status;
        transfee.value = data.transfee;
        reduceAmount.value = data.reduceAmount;
        total.value = data.total;
        uni.hideLoading(); // 隐藏加载提示
      });
  };

  /**
   * 删除已完成||已取消的订单
   */
  const delOrderList = () => {
    uni.showModal({
      title: '', // 提示框标题
      content: '确定要删除此订单吗？', // 提示内容
      confirmColor: '#eb2444', // 确认按钮颜色
      success(res) {
        if (res.confirm) {
          uni.showLoading(); // 显示加载提示
          http.request({
            url: '/p/myOrder/' + orderNumber.value, // API 端点 URL
            method: 'DELETE' // 请求方法
          })
            .then(() => {
              uni.hideLoading(); // 隐藏加载提示
              uni.showToast({
                title: res || '删除成功', // 成功提示
                icon: 'none'
              });
              setTimeout(() => {
                uni.redirectTo({
                  url: '/pages/orderList/orderList' // 重定向到订单列表页
                });
              }, 1000); // 1秒后跳转
            });
        }
      }
    });
  };
</script>

<style scoped lang="scss">
  @use './order-detail.scss'; /* 引入外部的 SCSS 文件，以定义组件的样式 */
</style>
