<route lang="json">
{ "style": { "navigationBarTitleText": "积分结账", "navigationBarBackgroundColor": "#fff" } }
</route>
<script lang="ts" setup>
import { ref } from 'vue'
import UQRCode from 'uqrcodejs'
import { toQrCodeString } from '@designer-hub/app/src/core/utils/common'
import { QrCodeBusinessType } from '../../../core/libs/enums'
import { getVendorAppInfo } from '../../../core/libs/requests'

const orderAmount = ref()
const pointsAmount = ref()
const { data, run: setData } = useRequest(() => getVendorAppInfo())

const generateQR = async () => {
  // 获取uQRCode实例
  const qr = new UQRCode()
  // 设置二维码内容
  // qr.data = `${orderAmount.value}|${pointsAmount.value}`
  qr.data = toQrCodeString(QrCodeBusinessType.PointsCheckout, {
    id: data.value.id,
    amount: orderAmount.value,
    points: pointsAmount.value,
    avatar: data.value.avatar.split('://')[1] || '',
    name: data.value.vendorName,
  })
  // 设置二维码大小，必须与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: { orderAmount?: string; pointsAmount?: string }) => {
  orderAmount.value = query?.orderAmount || ''
  pointsAmount.value = query?.pointsAmount || ''
  await setData()
  await generateQR()
})
</script>

<template>
  <view>
    <div class="bg-white pb-[17px]">
      <div class="flex items-center justify-center py-[30px]">
        <!-- <img class="w-[199px] h-[199px]" :src="codeImageSrc" /> -->
        <canvas id="qrcode" canvas-id="qrcode" style="width: 200px; height: 200px"></canvas>
      </div>
      <div class="flex items-center justify-between px-[16px] mb-[15px]">
        <div class="text-black/60 text-base font-normal font-['PingFang_SC'] leading-normal">
          订单金额
        </div>
        <div class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-normal">
          ￥{{ orderAmount }}
        </div>
      </div>
      <div class="flex items-center justify-between px-[16px]">
        <div class="text-black/60 text-base font-normal font-['PingFang_SC'] leading-normal">
          积分
        </div>
        <div class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-normal">
          {{ pointsAmount }}
        </div>
      </div>
    </div>
    <!-- <div class="bg-white mt-[15px]">
      <div class="flex items-center justify-between px-[16px] py-[15px]">
        <div class="flex items-center">
          <img class="w-[29px] h-[29px] rounded-full" src="https://via.placeholder.com/29x29" />
          <div
            class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-normal ml-[10px]"
          >
            李梦诗
          </div>
        </div>
        <div
          class="text-center text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal"
        >
          扫码支付中...
        </div>
      </div>
    </div> -->
  </view>
</template>

<style lang="scss" scoped></style>
