<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'
import { useUserStore } from '../../../../store'
import { storeToRefs } from 'pinia'

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

const a = (canvasContext: UniApp.CanvasContext) => {
  const qr = new UQRCode()
  // 设置二维码内容
  // qr.data = data.value.orderNo
  //   qr.data = toQrCodeString('', {
  //     no: '',
  //   })
  //   qr.data = '12324'
  qr.data = toQrCodeString(QrCodeBusinessType.PagePath, {
    path: `/pages/mine/homepage/index?id=${userInfo.value?.userId}`,
  })
  // 设置二维码大小，必须与canvas设置的宽高一致
  qr.size = 200
  qr.foregroundImageSrc = userInfo.value?.avatar
  // 调用制作二维码方法
  qr.make()
  qr.canvasContext = canvasContext
  // 调用绘制方法将二维码图案绘制到canvas上
  qr.drawCanvas()
}
const generateCode = async () => {
  nextTick(async () => {
    const currentInstance = getCurrentInstance()
    const canvasContext = uni.createCanvasContext('qrcode', currentInstance) // 如果是组件，this必须传入
    a(canvasContext)
  })
}
const generateCodeMp = async () => {
  const currentInstance = getCurrentInstance()
  nextTick(() => {
    uni
      .createSelectorQuery()
      .in(currentInstance)
      .select('#qrcode')
      .fields({ node: true, size: true }, (res) => {
        console.log(res)
      })
      .exec((res) => {
        const canvas = res[0].node
        canvas.width = 200
        canvas.height = 200
        const ctx = canvas.getContext('2d')
        a(ctx)
      })
  })
}

onLoad(async (query: { id: string }) => {
  id.value = query.id
  //   await setData()
  // #ifdef MP-WEIXIN
  await generateCodeMp()
  // #endif
  // #ifdef H5
  await generateCode()
  // #endif
})
onReady(() => {})
</script>
<template>
  <div class="flex-grow flex flex-col items-center bg-white">
    <div class="flex-grow flex flex-col justify-center">
      <div>
        <!-- #ifdef MP-WEIXIN -->
        <canvas
          type="2d"
          id="qrcode"
          canvas-id="qrcode"
          style="width: 200px; height: 200px"
        ></canvas>
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <canvas id="qrcode" canvas-id="qrcode" style="width: 200px; height: 200px"></canvas>
        <!-- #endif-->
      </div>
      <div
        class="text-center text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal my-3.5"
      >
        扫一扫上面的二维码，可查看我的主页
      </div>
    </div>
    <div class="w-full flex items-center justify-around my-10">
      <div
        class="text-center text-[#3f588f] text-base font-normal font-['PingFang_SC'] leading-normal"
      >
        扫一扫
      </div>
      <div
        class="text-center text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal"
      >
        |
      </div>
      <div
        class="text-center text-[#3f588f] text-base font-normal font-['PingFang_SC'] leading-normal"
      >
        保存图片
      </div>
    </div>
  </div>
</template>
