<template>
  <nut-signature @confirm="confirm" @clear="clear"></nut-signature>
  <img v-if="imgData" :src="imgData" class="imgData" style="width: 100%" />
</template>
<script setup lang="ts">
import { useDailyStore } from '@/store/daily'
const store = useDailyStore()
import Taro, { useLoad } from '@tarojs/taro'
import { ref } from 'vue'

const _index = ref(0)
useLoad((options) => {
  console.log(options)
  _index.value = Number(options.index)
})
const imgData = ref('')
const convertToBase64 = (imgUrl: string): Promise<string> => {
  return new Promise((resolve, reject) => {
    const fs = Taro.getFileSystemManager()
    fs.readFile({
      filePath: imgUrl, // 本地路径
      encoding: 'base64',
      success(res) {
        resolve('data:image/png;base64,' + res.data) // 前缀加上 image 类型，适应 img 标签
      },
      fail(err) {
        reject(err)
      },
    })
  })
}
const confirm = async (canvas: any, data: string) => {
  if (data) {
    imgData.value = data
    console.log('imgData', canvas, data)
    try {
      const base64Image = await convertToBase64(data)
      if (_index.value === 1) {
        store.change_base64_1(base64Image)
      } else {
        store.change_base64_2(base64Image)
      }
      // console.log('Base64 Image:', base64Image)
    } catch (error) {
      console.error('Failed to convert image to Base64:', error)
    }
  }
}
const clear = () => {
  imgData.value = ''
  console.log('clear')
}
</script>