<template>
  <!-- 支付成功页面 -->
  <view class="container">
    <Header :showBack="false" title=""></Header>
    <view class="content">
      <!-- 使用状态 -->
      <view class="status">
        <view class="status-text">购买成功！</view>
        <view class="detail" @click="jumpPage">查看订单详情</view>
      </view>
      <!-- 券码信息 -->
      <view class="info">
        <view class="box">
          <text class="title">{{ orderDetail.orderItems[0].prodName }}</text>
          <text class="code">{{ orderDetail.orderNumber }}</text>
        </view>
        <view class="rectangle-with-semicircles"></view>
        <view class="qrcode line">
          <!-- 二维码 -->
          <view class="qr-box">
            <image :src="qrcode" class="qr"></image>
            <text class="qr-text">请向商家出示此核销码</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import Header from '@/pages/order/components/Header/index.vue';
import { getOrderDetail, getShopDetail, getProdDetail } from '@/api/order';
import QRCode from 'qrcode';
const myOutTradeNos = ref('');
/**
 * 获取订单详情
 */
const orderDetail = ref();
onLoad((options) => {
  const { outTradeNos } = options;
  myOutTradeNos.value = outTradeNos;
  getOrderDetailFn(outTradeNos);
});
function getOrderDetailFn(orderNumber) {
  getOrderDetail({ orderNumber }).then((res) => {
    orderDetail.value = res.data.baseOrder;
    orderDetail.value.orderItems = res.data.orderItems;
    orderDetail.value.orderStore = res.data.orderStore;
    const outTradeNo = res.data.baseOrder.orderNumber;
    const indexOfDash = outTradeNo.indexOf('-');
    if (indexOfDash !== -1) {
      res.data.baseOrder.orderNumber = outTradeNo.substring(indexOfDash + 1);
    } else {
      console.log(`订单编号 ${outTradeNo} 中没有找到 "-" 符号。`);
    }
    if (
      orderDetail.value.orderStore.status === '2' ||
      orderDetail.value.orderStore.status === '3'
    ) {
      codeDetail(orderNumber);
    }
    getProductDetail(orderDetail.value.orderItems[0].prodId);
    getShopMailDetail(orderDetail.value.shopId);
  });
}
const jumpPage = () => {
  xma.navigateTo({
    url: `/pages/order/detail?orderNumber=${orderDetail.value.orderItems[0].orderNumber}`,
  });
};
const qrcode = ref('');
const codeDetail = (item) => {
  const data = {
    type: 'write-off',
    no: item,
  };
  QRCode.toDataURL(JSON.stringify(data)).then((img) => {
    console.log(img);
    qrcode.value = img;
  });
};
/**
 * 获取商品详情
 */
const prodDetail = ref();
const getProductDetail = async (id) => {
  const res = await getProdDetail({ prodId: id });
  prodDetail.value = res.data.data;
};
/**
 * 获取商铺信息
 */
const shopDetail = ref();
const getShopMailDetail = async (id) => {
  const res = await getShopDetail({ shopId: id });
  shopDetail.value = res.data.shop;
};
</script>

<style lang="scss" scoped>
page {
  background: #f3f3f3;
}

.container {
  .content {
    padding-top: 44px;
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }

  .status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 28rpx;
    .status-text {
      font-family: PingFang SC Bold;
      font-size: 42rpx;
      color: #333333;
    }

    .detail {
      font-size: 24rpx;
      color: #333;
      font-family: PingFang SC;
      box-sizing: border-box;
      padding: 8rpx 26rpx;
      border-radius: 28rpx 28rpx 28rpx 28rpx;
      border: 1rpx solid #999999;
      margin-top: 9rpx;
    }
  }

  .info {
    background-color: #fff;
    border-radius: 16rpx;
    margin: 0 20rpx;

    .box {
      padding: 20rpx 20rpx 0;
      display: flex;
      flex-direction: column;
      gap: 10rpx;

      .title {
        font-family: PingFang SC Bold;
        font-size: 32rpx;
        font-weight: bold;
        line-height: 56rpx;
        color: #333;
      }

      .code {
        font-family: PingFang SC Heavy;
        font-size: 40rpx;
        font-weight: blod;
        line-height: 56rpx;
        color: #333;
      }
    }
  }

  .line {
    border-top: 1px dashed #999;
  }

  .rectangle-with-semicircles {
    width: 100%;
    position: relative;
    z-index: 10;
    height: 20rpx;
  }

  .rectangle-with-semicircles::after {
    position: absolute;
    content: '';
    height: 32rpx;
    width: 32rpx;
    border-radius: 50%;
    background-color: #f5f5f5;
    left: 0;
    top: 50%;
    transform: translate(-50%);
  }

  .rectangle-with-semicircles::before {
    position: absolute;
    content: '';
    height: 32rpx;
    width: 32rpx;
    border-radius: 50%;
    background-color: #f5f5f5;
    right: 0;
    top: 50%;
    transform: translate(50%);
  }

  // 二维码
  .qrcode {
    padding: 30rpx 20rpx 20rpx;
    display: flex;
    flex-direction: column;
    gap: 36rpx;

    .qr-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 4rpx;

      .qr {
        width: 320rpx;
        height: 320rpx;
      }

      .qr-text {
        font-family: PingFang SC Heavy;
        font-size: 28rpx;
        font-weight: blod;
        line-height: 56rpx;
        color: #333;
      }
    }
  }
}
</style>
