Page({
    canvas: null as WechatMiniprogram.Canvas | null,
    ctx: null as CanvasRenderingContext2D | null,

    data: {
        showModal: false,
        texts: ['', '', '', ''],
    },

    onReady: function () {
        this.initCanvas();
    },

    initCanvas() {
        const query = wx.createSelectorQuery();
        query
            .select('#textCanvas')
            .fields({ node: true, size: true })
            .exec((res) => {
                const canvas = res[0].node;
                const ctx = canvas.getContext('2d');
                this.canvas = canvas;
                this.ctx = ctx;
                const dpi = 300; // 明确声明 DPI
                const mmToInch = 25.4;
                const width = (210 / mmToInch) * dpi; // 2480px
                const height = (297 / mmToInch) * dpi; // 3508px
                const pixelRatio = wx.getWindowInfo().pixelRatio;

                // 设置画布实际像素为 A4 尺寸
                canvas.width = width;
                canvas.height = height;

                // 适配屏幕显示（非必须，仅用于预览）
                canvas.style = canvas.style || {};
                canvas.style.width = `${width / pixelRatio}px`;
                canvas.style.height = `${height / pixelRatio}px`;

                // 缩放上下文以适配高清屏
                ctx.scale(pixelRatio, pixelRatio);
                this.drawCircles();
            });
    },

    setCanvasSize() { },

    drawCircles: function () {
        if (!this.canvas) {
            return;
        }
        const ctx = this.ctx as CanvasRenderingContext2D;
        const { texts } = this.data;

        // 清空画布
        ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

        // 绘制4个圆圈
        for (let i = 0; i < 4; i++) {
            const x = 50 + i * 100;
            const y = 50;
            ctx.beginPath();
            ctx.arc(x, y, 40, 0, 2 * Math.PI);
            ctx.fillStyle = 'white';
            ctx.fill();
            ctx.strokeStyle = 'black';
            ctx.stroke();

            if (texts[i]) {
                ctx.fillStyle = 'black';
                ctx.font = '20px sans-serif';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText(texts[i], x, y);
            }
        }
    },

    showInput: function () {
        this.setData({ showModal: true });
    },

    updateText: function (e: WechatMiniprogram.CustomEvent) {
        const index = e.currentTarget.dataset.index;
        const value = e.detail.value;
        const { texts } = this.data;
        texts[index] = value;
        this.setData({ texts });
    },

    confirmInput: function () {
        this.setData({ showModal: false });
        this.drawCircles();
    },
});