<route lang="json">
{ "style": { "navigationBarTitleText": "兑换码", "navigationBarBackgroundColor": "#fff" } }
</route>
<script setup lang="ts">
import dayjs from 'dayjs'
import UQRCode from 'uqrcodejs'
import { getPointsOrder } from '../../../../core/libs/requests'
import { toQrCodeString } from '../../../../core/utils/common'
import { QrCodeBusinessType } from '../../../../core/libs/enums'

const id = ref()
const { data, run: setData } = useRequest(() => getPointsOrder(id.value), { initialData: {} })

const generateCode = async () => {
  // 获取uQRCode实例
  const qr = new UQRCode()
  // 设置二维码内容
  // qr.data = data.value.orderNo
  qr.data = toQrCodeString(QrCodeBusinessType.InStoreWriteOff, {
    no: data.value?.orderNo || '',
  })
  // 设置二维码大小，必须与canvas设置的宽高一致
  qr.size = 200
  // 调用制作二维码方法
  qr.make()
  // 获取canvas上下文
  const canvasContext = uni.createCanvasContext('qrcode', this) // 如果是组件，this必须传入
  // 设置uQRCode实例的canvas上下文
  qr.canvasContext = canvasContext
  // 调用绘制方法将二维码图案绘制到canvas上
  qr.drawCanvas()
}

onLoad(async (query: { id: string }) => {
  id.value = query.id
  await setData()
  await generateCode()
})
onReady(() => {})
</script>
<template>
  <div class="flex-grow flex flex-col items-center">
    <div
      class="w-[345px] h-1.5 bg-black rounded-[20px] border-2 border-[#b5b5b5] border-solid mt-14"
    ></div>
    <div class="relative top--2 w-[316px] bg-white rounded-bl-2xl rounded-br-2xl p-8.5 box-border">
      <div class="flex gap-5.5 pb-7.5 border-b-1 border-b-[#b5b5b5] border-b-dashed">
        <div class="w-[94px] h-[94px] bg-[#f6f6f6] rounded-[10px] overflow-hidden">
          <wd-img width="100%" height="100%" :src="data?.orderImgUrl"></wd-img>
        </div>
        <div class="flex-1">
          <div class="text-black text-lg font-normal font-['PingFang_SC'] leading-normal">
            {{ data?.projectName }}
          </div>
          <div class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal">
            {{ data?.orderQuantity }}张/共{{ data?.points }}积分
          </div>
          <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal">
            {{ dayjs(data?.createTime).format('YYYY/MM/DD') }}
          </div>
        </div>
      </div>
      <div>
        <div class="relative flex items-center justify-center p-6 my-7.5">
          <div
            class="absolute top-0 left-0 w-6 h-6 border-l-1 border-t-1 border-l-solid border-t-solid border-black rounded-tl-lg"
          ></div>
          <div
            class="absolute top-0 right-0 w-6 h-6 border-r-1 border-t-1 border-r-solid border-t-solid border-black rounded-tr-lg"
          />
          <div
            class="absolute bottom-0 left-0 w-6 h-6 border-l-1 border-b-1 border-l-solid border-b-solid border-black rounded-bl-lg"
          />
          <div
            class="absolute bottom-0 right-0 w-6 h-6 border-r-1 border-b-1 border-r-solid border-b-solid border-black rounded-br-lg"
          />

          <canvas id="qrcode" canvas-id="qrcode" style="width: 200px; height: 200px"></canvas>
        </div>
      </div>
    </div>
  </div>
</template>
