<template>
  <view class="container">
    <Header title="查看券码"></Header>
    <view class="content" v-if="orderDetail">
      <!-- 使用状态 -->
      <view class="status">
        <view class="status-text">{{ orderDetail.orderItems[0].prodName }}</view>
        <view class="detail">有效期：{{ orderDetail.orderStore.receiverTime }}</view>
      </view>

      <!-- 券码信息 -->
      <view class="info">
        <view class="box">
          <text class="title">{{ orderDetail.orderItems[0].prodName }}</text>
          <text class="code">{{ orderDetail.orderStore.orderNumber.slice(6) }}</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 './components/Header/index.vue';
import { getOrderDetail } from '@/api/order';
import QRCode from 'qrcode';

onLoad((options) => {
  console.log(options);
  getOrderDetailFn(options.orderNumber);
});

/**
 * 获取订单详情
 */
const orderDetail = ref();
function getOrderDetailFn(orderNumber) {
  getOrderDetail({ orderNumber }).then((res) => {
    orderDetail.value = res.data;
    if (
      orderDetail.value.orderStore.status === '2' ||
      orderDetail.value.orderStore.status === '3'
    ) {
      codeDetail(orderDetail.value.orderStore.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;
  });
};
</script>

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

.container {
  width: 375 * 2rpx;
  margin: 0 auto;

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

  .status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32rpx 20rpx;
    gap: 10rpx;

    .status-text {
      font-size: 42rpx;
      font-weight: bold;
      color: #333;
      font-family: PingFang SC;
    }

    .detail {
      font-size: 24rpx;
      color: #333;
      font-family: PingFang SC;
    }
  }

  .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>
