<route lang="json">
{
  "style": {
    "navigationBarTitleText": "邀请好友",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationStyle": "custom"
  }
}
</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'
import NavbarEvo from '@/components/navbar-evo.vue'

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()
  try {
    const [bg, title, contentBg, icon1, icon2, icon3, icon4, icon5, qrTitle, avatar, qrCode] =
      await Promise.all(
        [
          'https://image.zhuchaohui.com/zhucaohui/9352daa033edc343fd6cc983978857dd77386b573380871a4b7f9e9f3617f183.png',
          'https://image.zhuchaohui.com/zhucaohui/60c70b3e6387322beffff913bd39349dccbffa910f3ec867c59478fbec804be2.png',

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

          'https://image.zhuchaohui.com/zhucaohui/775bea9feb767ff5dfcc2f5d6458806d683258fa67696ec2010795463ddae183.png',
          'https://image.zhuchaohui.com/zhucaohui/a2830a1d21ec26bb92a6d70191ad0319821e98fba2d7b04a6cb36b3544a40231.png',
          'https://image.zhuchaohui.com/zhucaohui/4b0aca4d46e443e9145173f6f89a024a3e9c9a2ef9e4015ee14cbc4227e6363c.png',
          'https://image.zhuchaohui.com/zhucaohui/07881467c1ad5e700be6bb57cee6b46823ec94e3a3c2f6a521656ad34c9764a8.png',
          'https://image.zhuchaohui.com/zhucaohui/83a5845b563aa73fd9fc374acfad85110d141f68e5c874ce410e177cf0d35dbd.png',
          'https://image.zhuchaohui.com/zhucaohui/719cfe5efa705689cf924ca64fd9859d59102a8f75a3a93791b2acc34fa1af7f.png',
          data.value.headImgUrl || '',
          data.value.inviteCodeUrl || '',
        ].map((it) =>
          uni
            .getImageInfo({ src: it })
            .then(({ path }) => path)
            .catch(() =>
              uni
                .getImageInfo({
                  src: 'https://image.zhuchaohui.com/zhucaohui/6f858f282ce597abd2dd2717264b0cdde1566c4f8d5f3baa20fb7cf4c2e11a2f.png',
                })
                .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(
      [{ text: data.value?.brokerName ?? '', font: '18px PingFang_SC', color: '#000000D9' }],
      232,
    )

    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)' },
    ]
    canvas.RoundRect('#F5F5F5', 26, 282, 300, 306, 20)
    canvas.FillTexts(textSegments, 260)
    canvas.Image(qrTitle, 88, 296, 169, 51)
    canvas.Image(qrCode, 80, 360, 200, 200)

    // // 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()
  } catch (e) {
    console.log(e)
  }
})
const savePoster = () => {
  uni.canvasToTempFilePath({
    canvasId: 'qrcode',
    success: (res) => {
      uni.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: () => {
          uni.showToast({ title: '保存成功' })
        },
        fail: () => {
          uni.showToast({ title: '保存失败' })
        },
      })
    },
  })
}
</script>
<template>
  <!--  bg-[url(https://image.zhuchaohui.com/zhucaohui/a7694a131a9119b055cff320aa9c363ad2012e77229038a011110e64d1cf4da8.png)-->
  <div class="flex-grow bg-[length:100%_100%] bg-[#5379ec]! ]">
    <NavbarEvo transparent dark placeholder></NavbarEvo>
    <div class="aspect-[0.58/1]">
      <canvas class="w-full h-full" id="qrcode" canvas-id="qrcode"></canvas>
    </div>
    <div class="px-6 flex justify-between">
      <div class="flex-1">
        <wd-button plain custom-class="bg-[#4B6DEA]! border-white! text-white!" @click="savePoster">保存图片</wd-button>
      </div>
      <!--     <div> <wd-button custom-class="bg-white!"></wd-button></div>-->
    </div>
  </div>
</template>
