<template>
  <view class="poster_main">
    <hs-tabs :list="tablist" :current="useModel?.tabCurrent?.value" @onChange="method?.changeTab" />
    <!-- 添加 canvas 元素 -->
    <view class="poster_canvas">
      <canvas canvas-id="poster_firstCanvas" id="poster_firstCanvas" style="width: 345px; height: 504px"></canvas>
    </view>
    <view class="poster_qrcode">
      <canvas canvas-id="alipay_qrcode" id="alipay_qrcode" style="width: 170px; height: 170px"></canvas>
      <!-- icon="https://gc-prod-1385694945.cos.ap-shanghai.myqcloud.com/uploads/cs-test/01KNKA35CD6S4SZA10X3J19MS2.png" -->
    </view>
    <view class="poster_func">
      <view class="poster_func_download" @click="method.onDownloadPosters">下载海报</view>
      <!-- <view class="poster_func_link" @click="method.copyLink">复制链接</view> -->
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad, onUnload } from '@dcloudio/uni-app'
import method from './method'
import useModel from './model'
const tablist = [
  { label: '客户端', value: 'wechat' },
  { label: '其他', value: 'alipay' },
]
onUnload(() => {
  useModel.alipayQrCode.value = {}
})
onLoad((e: any) => {
  useModel.alipayQrCode.value = {}
  useModel.tabCurrent.value = 0
  useModel.orderInfo.value = e
  console.log(e, '订单信息')
  method.setCanvas(e)
})
</script>

<style setup scoped>
@import './style.scss';
</style>
