<script setup>
const signatureRef = ref(null)
// const instance = getCurrentInstance()
const clear = () => {
  signatureRef.value.clear()
}
const undo = () => {
  signatureRef.value.undo()
}
const save = () => {
  const isEmpty = signatureRef.value.isEmpty()
  if (isEmpty) {
    uni.$u.toast('签名不能为空')
    return
  }
  signatureRef.value.canvasToTempFilePath({
    success: ({ tempFilePath }) => {
      uni.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        success: () => {
          uni.$u.toast('保存成功')
        },
        fail: () => {
          uni.$u.toast('保存失败')
        }
      })
    }
  })
}
</script>

<template>
  <view
    z-1
    left-0
    top-0
    right-0
    bottom-0
    m-auto
    text-40
    text-center
    color-gray
    my-12
  >
    请在下方签名
  </view>
  <view w-746 h-600 mx-auto relative border-1 border-dotted border-gray f-c-c>
    <HandwrittenSignature
      ref="signatureRef"
      style="width: 746rpx; height: 596rpx"
      disable-scroll
      :open-smooth="true"
      background-color="transparent"
      uid="0"
      pen-color="black"
      :pen-size="10"
      :min-line-width="2"
    />
  </view>
  <view mt-20>
    <button @click="clear">清空</button>
    <button @click="undo">撤消</button>
    <button @click="save">保存</button>
  </view>
</template>
