<template>
    <div class="canvas_content">
        <van-nav-bar fixed title="签名">
            <template #left>
                <img src="../../assets/images/back.png" alt="" @click="goBack" />
            </template>
        </van-nav-bar>
        <div class="height_44"></div>
        <vue-esign ref="esign" :isCrop="false" :width="400" :height="600"/>
        <div class="btn">
            <div class="btn_right" @click="handleReset">
                <img src="../../assets/images/abrase.png" alt="">
                <div>清除</div>
            </div>
            <div class="btn_left" @click="handleGenerate">
                <img src="../../assets/images/save.png" alt="">
                <div>保存</div>
            </div>
        </div>
    </div>
</template>
<script>
import {dataURLtoFile} from '@/utils/common';
import {uploadEsignPng} from '@/axios/api';
import {Dialog} from 'vant'
export default {
    data() {
        return {

        }
    },
    methods: {
        handleGenerate() {
            this.$refs.esign.generate().then(res => {
                Dialog.confirm({
                    title: '提示',
                    message: '确定要保存该签名么？',
                }).then(() => {
                    let file = dataURLtoFile(res, 'esign.png');
                    let fromData = new FormData();
                    fromData.append("file", file);
                    this.$toast.submit();
                    uploadEsignPng(fromData).then(res => {
                        this.$toast.close();
                        if (res.code === 'SUCCESS') {
                            this.$toast.success('保存成功');
                            this.$router.push('informedConsentForm');
                            window.sessionStorage.setItem('esignImg', res.data.trueDownloadUrl);
                            window.sessionStorage.setItem('esignImgId', res.data.id);
                        };
                    }).catch(() => {
                        this.$toast.close();
                    });
                }).catch(() => {
                    return false;
                });
            }).catch(err => {
                Dialog.alert({
                    title: '提示',
                    message: '请签名后再保存签名图片',
                });
                return err;
            });
        },
        handleReset() {
            this.$refs.esign.reset();
        },

        goBack() {
            this.$router.go(-1);
        },
    },
}
</script>
<style lang="less" scoped>
.canvas_content {
    height: 100%;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    canvas {
        background: #fff !important;
        width: 90% !important;
        border-radius: 8px;
    }

    .btn {
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100px;

        .btn_right {
            margin-right: 50px;
            transform: rotate(90deg);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .btn_left {
            transform: rotate(90deg);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>