<route lang="json">
{
  "style": {
    "navigationBarTitleText": "邀请好友",
    "navigationBarBackgroundColor": "#ffffff"
  }
}
</route>
<script setup lang="ts">
import { getBroker } from '../../../../core/libs/requests'
import { useUserStore } from '../../../../store/index'
import { Canvas } from '@designer-hub/app/src/core/utils/canvas'
import { storeToRefs } from 'pinia'

const currentInstance = getCurrentInstance()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const { data, run: setData } = useRequest(() =>
  getBroker({ brokerId: userInfo.value.userId!.toString() }),
)

onLoad(async () => {
  await setData()
  const [bg, title, contentBg, icon1, icon2, icon3, icon4, icon5, avatar] = await Promise.all(
    [
      'https://image.zhuchaohui.com/zhucaohui/9352daa033edc343fd6cc983978857dd77386b573380871a4b7f9e9f3617f183.png',
      'https://image.zhuchaohui.com/zhucaohui/f1f13041769ecdf462aa2ccc246fb7566bea6fe83aaf73717ee959629cfe0f8f.svg',

      'https://image.zhuchaohui.com/zhucaohui/08abd942d9f5635aa3cfd60376706bc948cdaf556417fb3396204f7cdec42e30.png',

      'https://image.zhuchaohui.com/zhucaohui/fc22d1bee4e1737dc0d592a065f277bec4a790496faa292c869f781e9c67a700.svg',
      'https://image.zhuchaohui.com/zhucaohui/85594fe5a8b12dc815b3ea062e826de086ed204f840931980cd1bf5417d8b814.svg',
      'https://image.zhuchaohui.com/zhucaohui/7c3e518ff2dcd2d4d39001e3970c492195d518c7f0015c86c00b9ac5e788e4f4.svg',
      'https://image.zhuchaohui.com/zhucaohui/11b8448cc06352f796a49fbbc67e1eacfa7f382cb2507d066cd32b6f88f164fe.svg',
      'https://image.zhuchaohui.com/zhucaohui/d9dc32881076a752a7ab72701321538ff0e10fbc0482a3b4f9e95c1b8a132aec.svg',
      data.value.headImgUrl || '',
    ].map((it) => uni.getImageInfo({ src: it }).then(({ path }) => path)),
  )

  const ctx = uni.createCanvasContext('qrcode', currentInstance)
  const { width, height } = await new Promise<any>((resolve) => {
    uni
      .createSelectorQuery()
      .in(currentInstance)
      .select('#qrcode')
      .fields({ node: true, size: true }, (res) => {
        resolve(res)
      })
      .exec()
  })
  const canvas = new Canvas(ctx, { width, height }, { width: 351 })
  canvas.FillImage(bg)
  canvas.RoundRect('#5379EC', 0, 0, 352, 607, 16)
  canvas.Image(title, 27, 31, 297, 22.3)

  canvas.Image(icon1, 28, 69, 15, 15)
  canvas.Image(icon2, 143, 69, 13, 13)
  canvas.Image(icon3, 248, 69, 13, 13)
  canvas.Image(icon4, 30, 100, 12, 12)
  canvas.Image(icon5, 141, 96, 16, 16)

  canvas.FillText('国内外设计游学', '#ffffff', 10, 46, 80)
  canvas.FillText('线上获客工具', '#ffffff', 10, 159, 80)
  canvas.FillText('设计赋能项目', '#ffffff', 10, 262, 80)
  canvas.FillText('丰富线下活动', '#ffffff', 10, 46, 109)
  canvas.FillText('周边商品好礼', '#ffffff', 10, 159, 109)

  // canvas.Circle('#D9D9D9', 136, 129, 41)

  canvas.Image(contentBg, 17, 128, 319, 461)
  canvas.CircleImage(avatar, 140, 133, 37)

  canvas.FillText(data.value.brokerName, '#000000D9', 18, 149, 228, 'center')

  canvas.FillTexts(
    ['邀请码：', data.value.inviteCode],
    ['14px PingFang SC', '18px PingFang SC'],
    ['rgba(0,0,0,0.65)', 'rgba(0,0,0,0.85)'],
    0,
    0,
    '',
  )
  // const textSegments = [
  //   { text: '邀请码：', font: '14px PingFang SC', color: 'rgba(0,0,0,0.65)' },
  //   { text: data.value.inviteCode || '', font: '18px PingFang SC', color: 'rgba(0,0,0,0.85)' },
  // ]

  // // Calculate total text width
  // let totalWidth = 0
  // textSegments.forEach((segment) => {
  //   ctx.font = segment.font
  //   totalWidth += ctx.measureText(segment.text).width
  // })

  // // Starting x position for centered text
  // let startX = (width - totalWidth) / 2
  // const y = 246 // Fixed vertical position

  // // Draw each text segment
  // textSegments.forEach((segment) => {
  //   ctx.font = segment.font
  //   ctx.fillStyle = segment.color

  //   ctx.fillText(segment.text, startX, y)
  //   startX += ctx.measureText(segment.text).width // Move x position for next segment
  // })

  ctx.draw && ctx.draw()
})
</script>
<template>
  <div class="aspect-[0.58/1]">
    <canvas class="w-full h-full" id="qrcode" canvas-id="qrcode"></canvas>
  </div>
</template>
