<template>
    <div class="bgo-signature">
        <div @click="openSign">
            <slot name="trigger">
                <van-button block>点击此处进行签名</van-button>
            </slot>
        </div>

        <van-overlay :show="showSignOverlay">
            <div class="bgo-signature__wrapper">
                <div ref="wrapper" class="bgo-signature__paper">
                    <canvas ref="signCanvas"></canvas>
                </div>
                <div class="bgo-signature__actions">
                    <van-button block @click="_onCancel">取消</van-button>
                    <van-button type="primary" block @click="_onConfirm">确认</van-button>
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import SignaturePad from "signature_pad";
import WindowResizeHandlerMixin from "../../mixins/window-resize-handler.mixin";
import { showMsg } from '../../../lib/utils/common.ui';
import { rotate270Deg, getDeviceOrientation } from "./utils";

import "./index.scss";

const signaturePadDefaultOptions = {
    minWidth: 0.5,
    maxWidth: 3,
};
const supportedDataURLType = [ "image/png", "image/jpeg"];

export default {
    name: "BgoSignature",
    mixins: [
        WindowResizeHandlerMixin
    ],
    props: {
        signaturePadOptions: {
            type: Object,
            default: () => {},
        },
        dataUrlType: {
            type: String,
            default: "image/png",
            validator(value) {
                return ~supportedDataURLType.indexOf(value);
            }
        }
    },
    data() {
        this.signaturePad = null;

        return {
            showSignOverlay: false,
        }
    },
    computed: {
        finalSignaturePadOptions() {
            return {
                ...signaturePadDefaultOptions,
                ...this.signaturePadOptions,
            }
        }
    },
    watch: {
        signaturePadOptions() {
            if (!this.signaturePad) return;

            this.signaturePad.off();
            this.signaturePad = new SignaturePad(this.getCanvas(), this.finalSignaturePadOptions);
        }
    },
    methods: {
        /**
         * 窗口大小变化时重新设置画布大小
         */
        $_resizeHandler() {
            this._resetCanvas();
            this.$nextTick(this._initCanvas);
        },
        _resetCanvas() {
            const canvas = this.getCanvas()
            canvas.width = 0;
            canvas.height = 0;
        },
        _initCanvas() {
            const wrapper = this.$refs.wrapper;
            const canvas = this.getCanvas();
            const {width, height} = wrapper.getBoundingClientRect();

            canvas.width = width;
            canvas.height = height;
            if (!this.signaturePad) {
                this.signaturePad = new SignaturePad(canvas, this.finalSignaturePadOptions);
            }
            this.signaturePad.clear();
        },
        openSign() {
            this._resetCanvas();

            this.showSignOverlay = true;
            this.$nextTick(this._initCanvas);
        },
        _onCancel() {
            this.showSignOverlay = false;
            this.$emit("cancel");
        },
        _onConfirm() {
            // check if signed or not
            if (this.signaturePad.isEmpty()) {
                showMsg("未检测到签名笔迹");
                return;
            }

            let dataUrl;
            const orientation = getDeviceOrientation();
            if (orientation === "portrait") {
                // 竖屏模式，需要将签名图旋转270deg
                dataUrl = rotate270Deg(this.getCanvas()).toDataURL(this.dataUrlType);
            } else {
                dataUrl = this.signaturePad.toDataURL(this.dataUrlType);
            }
            this.$emit("confirm", dataUrl);

            this.showSignOverlay = false;
        },
        getSignaturePadInstance() {
            return this.signaturePad;
        },
        getCanvas() {
            return this.$refs.signCanvas;
        }
    }
}
</script>
