<template>
    <global-page :padding="24" title="签名">
        <view class="mocp-title">客户方代表签字</view>
        <view class="mocp-sign">
            <canvas
                canvas-id="canvas"
                class="canvas-inner"
                disable-scroll="true"
                @touchstart="touchStart"
                @touchmove="touchMove"
                @touchend="touchEnd"
                id="canvas"
            />
        </view>
        <view class="footer-btns">
            <view class="footer-btn">
                <global-button type="primary" size="large" :radius="5" @tap="handleSave">保存签名</global-button>
            </view>
            <view class="footer-btn">
                <global-button type="primary" size="large" :radius="5" @tap="handleSubmit" :disabled="!canvasImage">保存单据</global-button>
            </view>
            <view class="footer-btn">
                <global-button type="primary" plain size="large" :radius="5" @tap="handleClear">重新签名</global-button>
            </view>
        </view>
        <view class="mocp-title">用户签名预览</view>
        <view class="mocp-preview">
            <image :src="canvasImage" mode="widthFix" :show-loading="true" width="100%" height="100%" v-if="canvasImage"></image>
        </view>
    </global-page>
</template>
<script setup>
import { useDrawSignature } from 'mocp/hooks/use-sign/useSign'
import { canvasImage } from './constants/sign.compositions'
import { handleSubmit } from './constants/sign.functionals'
import { formData } from './constants/add.compositions'
import { onLoad } from '@dcloudio/uni-app'

const { isSigned, touchStart, touchMove, touchEnd, clear, getPath } = useDrawSignature('canvas', {
    path: formData.customerSignImg
})
onLoad(() => {
    canvasImage.value = formData.customerSignImg
})
//保存签名
const handleSave = () => {
    if (isSigned.value) {
        canvasImage.value = ''
        getPath('canvas').then((path) => {
            canvasImage.value = path
        })
    } else {
        uni.$mocpMessage.warning('请客户方代表签字')
    }
}
//重新签名
const handleClear = () => {
    canvasImage.value = ''
    clear()
}

</script>
<style lang="scss" scoped>
.mocp-sign,
.mocp-preview {
    background: #fff;
    margin-bottom: 24rpx;
}
.canvas-inner,
.mocp-preview {
    width: 100%;
    height: 300rpx;
    uni-image {
        width: 100%;
        height: 100%;
    }
}
.mocp-title {
    padding: 24rpx 0;
}
.footer-btn {
    margin-bottom: 24rpx;
}
</style>
