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

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

    drawCircles: function () {
        const ctx = wx.createCanvasContext('myCanvas');
        const { texts } = this.data;

        // 绘制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.setFillStyle('white');
            ctx.fill();
            ctx.setStrokeStyle('black');
            ctx.stroke();

            if (texts[i]) {
                ctx.setFillStyle('black');
                ctx.setFontSize(20);
                ctx.setTextAlign('center');
                ctx.setTextBaseline('middle');
                ctx.fillText(texts[i], x, y);
            }
        }

        ctx.draw();
    },

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

    updateText: function (e) {
        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();
    },
});