<div class="card">
    <div class="text-center">
       <signature-pad id="visitsignature" class="roundCorners" :modelValue="signatureFile" @input="onInput" :customStyle="customStyle" :saveType="saveType" :saveOutput="saveOutput" ref="signaturePad" />
    </div>
</div>

import { reactive, ref, toRefs } from 'vue'
import SignaturePad from 'vue3-signature-pad'
export default {
  name: 'signature-pad',
  components: {
    SignaturePad
  },
  setup () {
    const state = reactive({
      customStyle: { backgroundColor: '#e9ecef', width: '35%', position: 'relative', padding: '0' },
      saveType: 'image/svg+xml',
      saveOutput: 'file'
    })
    const signatureDataURL = ref(null)
    const signatureFile = ref(null)
    const signaturePad = ref(null)

    const getSignaturePad = () => {
      if (!signaturePad.value) {
        throw new Error('No signature pad ref could be found')
      }
      return signaturePad.value
    }

    const clearSignature = () => {
      const signature = getSignaturePad().clearSignature()
      return signature
    }

    const saveSignature = () => {
      const signature = getSignaturePad().saveSignature()
      return signature
    }

    const onInput = (value) => {
      console.log('calling on input', value)
      if (!value) {
        signatureDataURL.value = null
        signatureFile.value = null
      } else if (value instanceof File) {
        signatureDataURL.value = null
        signatureFile.value = value
      } else {
        signatureDataURL.value = value
        signatureFile.value = null
      }
    }
    return {
      // state
      ...toRefs(state),
      signaturePad,
      signatureDataURL,
      signatureFile,
      // methods
      clearSignature,
      saveSignature,
      onInput
    }
  }
}