<template>
  <view>
    <view class="container">
      <view class="submit-order">
        <!-- 收货地址 -->
        <view class="delivery-addr"
              @tap="toAddrListPage" <!-- 点击时跳转到收货地址列表页 -->
        >
          <!-- 如果没有选择收货地址 -->
          <view
            v-if="!userAddr" <!-- 条件渲染，只有当 userAddr 为空时显示 -->
            class="addr-bg"
          >
            <view class="add-addr">
              <view class="plus-sign-img">
                <image src="@/static/images/icon/plus-sign.png" /> <!-- 加号图标 -->
              </view>
              <text>新增收货地址</text> <!-- 提示文本 -->
            </view>
            <view class="arrow empty" /> <!-- 空箭头图标 -->
          </view>

          <!-- 如果已经选择了收货地址 -->
          <view
            v-if="userAddr" <!-- 条件渲染，只有当 userAddr 不为空时显示 -->
            class="addr-bg whole"
          >
            <view class="addr-icon">
              <image src="@/static/images/icon/addr.png" /> <!-- 地址图标 -->
            </view>
            <view class="user-info">
              <text class="item">{{ userAddr.receiver }}</text> <!-- 收货人姓名 -->
              <text class="item">{{ userAddr.mobile }}</text> <!-- 收货人电话 -->
            </view>
            <view class="addr">
              {{ userAddr.province }}{{ userAddr.city }}{{ userAddr.area }}{{ userAddr.addr }} <!-- 详细地址 -->
            </view>
            <view class="arrow" /> <!-- 箭头图标 -->
          </view>
        </view>

        <!-- 商品详情 -->
        <view class="prod-item">
          <block v-for="(item, index) in orderItems" <!-- 遍历订单商品列表，动态生成每个商品项 -->
            :key="index" <!-- 使用索引作为唯一标识 -->
          >
            <view
              class="item-cont"
              :data-ordernum="item.primaryOrderNo" <!-- 传递订单编号 -->
              @tap="toOrderDetailPage" <!-- 点击时跳转到订单详情页 -->
            >
              <view class="prod-pic">
                <image :src="item.pic" /> <!-- 动态绑定商品图片路径 -->
              </view>
              <view class="prod-info">
                <view class="prodname">
                  {{ item.prodName }} <!-- 显示商品名称 -->
                </view>
                <view class="prod-info-cont">
                  {{ item.skuName }} <!-- 显示商品规格信息 -->
                </view>
                <view class="price-nums">
                  <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>
                  <text class="prodcount">x{{ item.prodCount }}</text> <!-- 显示商品数量 -->
                </view>
              </view>
            </view>
          </block>

          <!-- 商品总数和合计金额 -->
          <view class="total-num">
            <text class="prodcount">共{{ totalCount }}件商品</text> <!-- 显示商品总数 -->
            <view class="prodprice">
              合计：
              <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>

        <!-- 订单详情 -->
        <view class="order-msg">
          <view class="msg-item">
            <!-- 优惠券选择 -->
            <view class="item coupon"
                  @tap="showCouponPopup" <!-- 点击时显示优惠券弹窗 -->
            >
              <text class="item-tit">优惠券：</text>
              <text v-if="!coupons.canUseCoupons" class="item-txt">暂无可用</text> <!-- 如果没有可用优惠券，显示提示 -->
              <text class="coupon-btn">{{ coupons.totalLength ? coupons.totalLength : 0 }}张</text> <!-- 显示优惠券总数 -->
              <text class="arrow" /> <!-- 箭头图标 -->
            </view>
            <!-- 买家留言 -->
            <view class="item">
              <text>买家留言：</text>
              <input v-model="remarks" <!-- 绑定买家留言内容 -->
              placeholder="给卖家留言" <!-- 占位符提示 -->
              />
            </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(shopReduce)[0] }}</text> <!-- 显示整数部分优惠金额 -->
                <text class="small-num">.{{ wxs.parsePrice(shopReduce)[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>

      <!-- 底部栏 -->
      <view class="submit-order-footer">
        <view class="sub-order">
          <view class="item-txt">
            合计：
            <view class="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 class="footer-box"
              @tap="toPay" <!-- 点击时提交订单并支付 -->
        >
          提交订单
        </view>
      </view>
    </view>

    <!-- 选择优惠券弹窗 -->
    <view v-if="popupShow" <!-- 条件渲染，只有当 popupShow 为 true 时显示 -->
      class="popup-hide"
    >
      <view class="popup-box">
        <view class="popup-tit">
          <text>优惠券</text> <!-- 弹窗标题 -->
          <text
            class="close"
            @tap="closePopup" <!-- 点击时关闭弹窗 -->
          />
        </view>
        <!-- 优惠券选项卡 -->
        <view class="coupon-tabs">
          <view
            :class="'coupon-tab ' + (couponSts == 1 ? 'on' : '')" <!-- 动态绑定类名，选中时添加 'on' 类 -->
            data-sts="1"
            @tap="changeCouponSts" <!-- 点击时切换优惠券状态 -->
          >
            可用优惠券({{ coupons.canUseCoupons.length ? coupons.canUseCoupons.length : 0 }}) <!-- 显示可用优惠券数量 -->
          </view>
          <view
            :class="'coupon-tab ' + (couponSts == 2 ? 'on' : '')" <!-- 动态绑定类名，选中时添加 'on' 类 -->
            data-sts="2"
            @tap="changeCouponSts" <!-- 点击时切换优惠券状态 -->
          >
            不可用优惠券({{ coupons.unCanUseCoupons.length ? coupons.unCanUseCoupons.length : 0 }}) <!-- 显示不可用优惠券数量 -->
          </view>
        </view>
        <!-- 优惠券列表 -->
        <view class="popup-cnt">
          <block v-if="couponSts == 1"> <!-- 条件渲染，只有当 couponSts 为 1 时显示可用优惠券 -->
            <view
              v-for="(item, index) in coupons.canUseCoupons" <!-- 遍历可用优惠券列表，动态生成每个优惠券项 -->
              :key="index" <!-- 使用索引作为唯一标识 -->
            >
              <coupon
                :item="item" <!-- 传递优惠券数据 -->
                order="true" <!-- 标记为订单页面使用 -->
                can-use="true" <!-- 标记为可用优惠券 -->
                @check-coupon="checkCoupon" <!-- 点击时触发选择优惠券的方法 -->
              />
            </view>
          </block>
          <block v-if="couponSts == 2"> <!-- 条件渲染，只有当 couponSts 为 2 时显示不可用优惠券 -->
            <view
              v-for="(item, index) in coupons.unCanUseCoupons" <!-- 遍历不可用优惠券列表，动态生成每个优惠券项 -->
              :key="index" <!-- 使用索引作为唯一标识 -->
            >
              <coupon
                :item="item" <!-- 传递优惠券数据 -->
                order="true" <!-- 标记为订单页面使用 -->
                can-use="false" <!-- 标记为不可用优惠券 -->
              />
            </view>
          </block>
          <view class="botm-empty" /> <!-- 空占位符 -->
        </view>
        <!-- 确认按钮 -->
        <view
          v-if="couponSts == 1" <!-- 条件渲染，只有当 couponSts 为 1 时显示确认按钮 -->
          class="coupon-ok"
        >
          <text @tap="choosedCoupon">确定</text> <!-- 点击时选择优惠券并关闭弹窗 -->
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  // 引入 number 函数，用于处理数字格式化（假设此函数用于解析价格）
  const wxs = number()

  // 定义订单入口变量，0 表示从购物车进入，1 表示立即购买
  let orderEntry = '0'

  /**
   * 生命周期函数--监听页面加载
   * @param options - 页面加载时传递的参数
   */
  onLoad((options) => {
    // 根据传递的参数设置订单入口
    orderEntry = options.orderEntry
  })

  // 定义用户收货地址的响应式变量
  const userAddr = ref(null)

  /**
   * 生命周期函数--监听页面显示
   */
  onShow(() => {
    // 获取当前页面栈
    const pages = getCurrentPages()
    // 获取当前页面实例
    const currPage = pages[pages.length - 1]
    // 如果页面携带了选中的地址信息，则更新 userAddr
    if (currPage.selAddress === 'yes') {
      userAddr.value = currPage.item
    }
    // 加载订单数据
    loadOrderData()
  })

  // 定义已选择优惠券ID的数组
  let couponIds = []

  // 定义优惠券、总金额、实际支付金额、订单商品列表、商品总数、运费和店铺优惠的响应式变量
  const coupons = ref({})
  const total = ref(0)
  const actualTotal = ref(0)
  const orderItems = ref([])
  const totalCount = ref(0)
  const transfee = ref(0)
  const shopReduce = ref('')

  /**
   * 加载订单数据
   */
  const loadOrderData = () => {
    let addrId = 0
    // 如果有选择的收货地址，则获取其 ID
    if (userAddr.value != null) {
      addrId = userAddr.value.addrId
    }

    // 显示加载中提示
    uni.showLoading({
      mask: true
    })

    // 发送请求以确认订单数据
    http.request({
      url: '/p/order/confirm',
      method: 'POST',
      data: {
        addrId,
        // 根据订单入口类型，传递不同的数据
        orderItem: orderEntry === '1' ? JSON.parse(uni.getStorageSync('orderItem')) : undefined,
        basketIds: orderEntry === '0' ? JSON.parse(uni.getStorageSync('basketIds')) : undefined,
        couponIds, // 传递已选择的优惠券ID
        userChangeCoupon: 1 // 标记用户是否更改了优惠券
      }
    })
      .then(({ data }) => {
        // 隐藏加载中提示
        uni.hideLoading()

        // 初始化订单商品列表
        let orderItemsData = []
        // 遍历商品折扣信息，合并到订单商品列表中
        data.shopCartOrders[0].shopCartItemDiscounts?.forEach(itemDiscount => {
          orderItemsData = orderItems.value?.concat(itemDiscount.shopCartItems)
        })

        // 处理优惠券信息
        if (data.shopCartOrders[0].coupons) {
          const canUseCoupons = [] // 可用优惠券
          const unCanUseCoupons = [] // 不可用优惠券

          // 分类优惠券
          data.shopCartOrders[0].coupons?.forEach(coupon => {
            if (coupon.canUse) {
              canUseCoupons.push(coupon)
            } else {
              unCanUseCoupons.push(coupon)
            }
          })

          // 更新优惠券状态
          coupons.value = {
            totalLength: data.shopCartOrders[0].coupons.length, // 总优惠券数量
            canUseCoupons, // 可用优惠券列表
            unCanUseCoupons // 不可用优惠券列表
          }
        }

        // 更新订单相关数据
        orderItems.value = orderItemsData
        actualTotal.value = data.actualTotal
        total.value = data.total
        totalCount.value = data.totalCount
        userAddr.value = data.userAddr
        transfee.value = data.shopCartOrders[0].transfee
        shopReduce.value = data.shopCartOrders[0].shopReduce
      })
      .catch(err => {
        // 隐藏加载中提示
        uni.hideLoading()
        // 处理优惠券选择错误
        chooseCouponErrHandle(err)
      })
  }

  /**
   * 优惠券选择出错处理方法
   * @param res - 错误响应对象
   */
  const chooseCouponErrHandle = (res) => {
    // 如果是优惠券不能共用的错误
    if (res.statusCode == 601) {
      // 显示错误提示
      uni.showToast({
        title: res.data,
        icon: 'none',
        duration: 3000,
        success: () => {
          // 清空已选择的优惠券ID
          couponIds = []
        }
      })
      // 延迟重新加载订单数据
      setTimeout(() => {
        loadOrderData()
      }, 2500)
    }
  }

  /**
   * 提交订单
   */
  const toPay = () => {
    // 如果没有选择收货地址，提示用户选择
    if (!userAddr.value) {
      uni.showToast({
        title: '请选择地址',
        icon: 'none'
      })
      return
    }
    // 调用提交订单的方法
    submitOrder()
  }

  // 定义买家留言的响应式变量
  const remarks = ref('')

  /**
   * 提交订单
   */
  const submitOrder = () => {
    // 显示加载中提示
    uni.showLoading({
      mask: true
    })

    // 发送请求以提交订单
    http.request({
      url: '/p/order/submit',
      method: 'POST',
      data: {
        orderShopParam: [{
          remarks: remarks.value, // 买家留言
          shopId: 1 // 店铺ID（此处硬编码为1，可能需要根据实际情况调整）
        }]
      }
    })
      .then(({ data }) => {
        // 隐藏加载中提示
        uni.hideLoading()
        // 模拟支付
        normalPay(data.orderNumbers)
      })
  }

  /**
   * 模拟支付，直接提交成功
   * @param orderNumbers - 订单编号列表
   */
  const normalPay = (orderNumbers) => {
    // 显示加载中提示
    uni.showLoading({
      mask: true
    })

    // 发送请求以模拟支付
    http.request({
      url: '/p/order/normalPay',
      method: 'POST',
      data: {
        orderNumbers
      }
    })
      .then(({ data }) => {
        // 隐藏加载中提示
        uni.hideLoading()
        if (data) {
          // 如果支付成功，显示成功提示并跳转到支付结果页
          uni.showToast({
            title: '模拟支付成功',
            icon: 'none'
          })
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/pay-result/pay-result?sts=1&orderNumbers=' + orderNumbers
            })
          }, 1200)
        } else {
          // 如果支付失败，显示失败提示
          uni.showToast({
            title: '支付失败！',
            icon: 'none'
          })
        }
      })
  }

  // 定义优惠券状态的响应式变量（1表示可用优惠券，2表示不可用优惠券）
  const couponSts = ref(1)

  /**
   * 切换优惠券状态
   * @param e - 事件对象
   */
  const changeCouponSts = (e) => {
    // 更新优惠券状态
    couponSts.value = e.currentTarget.dataset.sts
  }

  // 定义弹窗显示状态的响应式变量
  const popupShow = ref(false)

  /**
   * 显示优惠券弹窗
   */
  const showCouponPopup = () => {
    popupShow.value = true
  }

  /**
   * 关闭优惠券弹窗
   */
  const closePopup = () => {
    popupShow.value = false
  }

  /**
   * 跳转到地址选择页面
   */
  const toAddrListPage = () => {
    // 导航到地址选择页面，并传递订单标识
    uni.navigateTo({
      url: '/pages/delivery-address/delivery-address?order=0'
    })
  }

  /**
   * 确认选择好的优惠券
   */
  const choosedCoupon = () => {
    // 重新加载订单数据以应用选择的优惠券
    loadOrderData()
    // 关闭优惠券弹窗
    popupShow.value = false
  }

  /**
   * 处理优惠券子组件发过来的选择事件
   * @param e - 事件对象
   */
  const checkCoupon = (e) => {
    // 获取优惠券ID
    const couponId = e.detail.couponId
    // 如果该优惠券未被选择，则添加到已选择优惠券ID列表中
    if (couponIds.indexOf(couponId) === -1) {
      couponIds.push(couponId)
    } else {
      // 如果该优惠券已被选择，则从已选择优惠券ID列表中移除
      couponIds.splice(couponIds.indexOf(couponId), 1)
    }
  }
</script>

<style scoped lang="scss">
  @use './submit-order.scss'; // 引入样式文件
</style>
