<template>
    <div class="signature">
        <view class="title">签字板</view>
        <canvas class="canvas" canvas-id="signature-canvas" @touchstart="touchstart" @touchmove="touchmove"></canvas>
        <view class="operations">
            <tui-button plain @click="clear">清除</tui-button>
            <tui-button @click="save">保存</tui-button>
        </view>
    </div>
</template>
<script>
export default {
    data() {
        return {
            ctx: null,
            catchStroke: null,
            canvasWidth: 0,
            canvasHeight: 0,
        };
    },
    mounted() {
        // 初始画布
        this.initCanvas();
    },
    methods: {
        initCanvas() {
            const query = uni.createSelectorQuery().in(this);
            query
                .select(".signature")
                .boundingClientRect(res => {
                    this.canvasWidth = res.width;
                    this.canvasHeight = res.height;
                    this.ctx = uni.createCanvasContext("signature-canvas", this);
                    this.clear();

                    this.ctx.strokeStyle = "#000";
                    this.ctx.lineWidth = 2;
                    this.ctx.lineJoin = "round";
                    this.catchStroke = new CatchStroke(this.ctx);
                })
                .exec();
        },
        touchstart(e) {
            this.catchStroke.clear();
            this.catchStroke.stroke(e.touches[0].x, e.touches[0].y);
        },
        touchmove(e) {
            this.catchStroke.stroke(e.touches[0].x, e.touches[0].y);
        },
        clear() {
            this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight);
            this.ctx.fillStyle = "#fff";
            this.ctx.fill();
            this.ctx.draw();
        },
        save() {
            uni.canvasToTempFilePath({
                fileType: "jpg",
                canvasId: "signature-canvas",
                success: res => {
                    // 在H5平台下，tempFilePath 为 base64
                    this.$emit("input", res.tempFilePath);
                },
            });
        },
    },
};
class CatchStroke {
    catch = [];
    ctx;
    constructor(ctx) {
        this.ctx = ctx;
    }
    stroke(x, y) {
        this.catch.push([x, y]);
        this.ctx.beginPath();
        this.ctx.moveTo(...this.catch[0]);
        if (this.catch.length > 1) {
            this.catch.slice(1).forEach(item => {
                this.ctx.lineTo(...item);
            });
            this.ctx.stroke();
            this.ctx.draw(true);
        }
    }
    clear() {
        this.catch = [];
    }
}
</script>
<style lang="scss">
.signature {
    width: 100%;
    height: 450rpx;
    display: flex;
    flex-direction: column;
    .title {
        font-size: 30rpx;
        font-weight: bold;
        padding: 20rpx 0;
        text-align: center;
        background-color: #fff;
        border-bottom: 1px solid #eee;
    }
    .operations {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        .tui-btn {
            height: auto !important;
            line-height: 1 !important;
            padding: 20rpx;
        }
    }
    .canvas {
        width: 100%;
        flex-grow: 1;
    }
}
</style>
