/**
 * 绘制书写行内容区域的参数接口
 */
interface DrawNumberWriteContentParams {
    ctx: RenderingContext;
    selectedNumber: number;
    canvasWidth: number; // 逻辑像素宽度
    startY: number; // 起始Y坐标
}

/**
 * 绘制数字书写内容区域服务
 * 绘制三条书写行，每条行有三条线（上下实线，中间虚线）
 * 第一行和第二行有数字（第一个黑色实线，后续灰色虚线），第三行空白
 */
export function drawNumberWriteContent({
    ctx,
    selectedNumber,
    canvasWidth,
    startY,
}: DrawNumberWriteContentParams): void {
    const lineSpacing = 30; // 行间距（三条线之间的间距）
    const rowHeight = lineSpacing * 2; // 每行的高度（两条实线之间的距离）
    const rowMargin = 24; // 行与行之间的间距
    const leftMargin = 24; // 左边距
    const rightMargin = 24; // 右边距
    const numberIndent = selectedNumber === 10 ? 12 : 24; // 数字缩进（避免贴边）
    const numberSpacing = 90; // 数字之间的间距
    const numberCount = 6; // 每行数字的数量（第一个实线 + 6个虚线）
    const fontSize = 76; // 数字字体大小（调整为行高的83%，避免超出上下边线）

    // 计算每行的起始Y坐标
    const rowStartY = startY + 20; // 顶部间距

    // 绘制三条书写行
    for (let rowIndex = 0; rowIndex < 5; rowIndex++) {
        const rowY = rowStartY + rowIndex * (rowHeight + rowMargin);
        const topLineY = rowY;
        const middleLineY = rowY + lineSpacing;
        const bottomLineY = rowY + rowHeight;

        // 绘制上实线（蓝色）
        ctx.strokeStyle = '#4A90E2'; // 蓝色
        ctx.lineWidth = 1;
        ctx.setLineDash([]); // 实线
        ctx.beginPath();
        ctx.moveTo(leftMargin, topLineY);
        ctx.lineTo(canvasWidth - rightMargin, topLineY);
        ctx.stroke();

        // 绘制中间虚线（橙色）
        ctx.strokeStyle = '#FF8C42'; // 橙色
        ctx.lineWidth = 1;
        ctx.setLineDash([12, 12]); // 虚线模式
        ctx.beginPath();
        ctx.moveTo(leftMargin, middleLineY);
        ctx.lineTo(canvasWidth - rightMargin, middleLineY);
        ctx.stroke();
        ctx.setLineDash([]); // 恢复实线模式

        // 绘制下实线（蓝色）
        ctx.strokeStyle = '#4A90E2'; // 蓝色
        ctx.lineWidth = 1;
        ctx.setLineDash([]); // 实线
        ctx.beginPath();
        ctx.moveTo(leftMargin, bottomLineY);
        ctx.lineTo(canvasWidth - rightMargin, bottomLineY);
        ctx.stroke();

        // 第一行和第二行绘制数字
        if (rowIndex < 3) {
            const centerY = rowY + lineSpacing; // 数字中心Y坐标（中间虚线位置）

            for (let i = 0; i < numberCount; i++) {
                const numberX = leftMargin + numberIndent + i * numberSpacing;

                if (i === 0) {
                    // 第一个数字：黑色实线
                    ctx.fillStyle = '#000000';
                    ctx.font = `bold ${fontSize}px "Microsoft Yahei"`;
                    ctx.textBaseline = 'middle';
                    ctx.textAlign = 'left';
                    ctx.fillText(String(selectedNumber), numberX, centerY);
                } else {
                    // 后续数字：灰色虚线（使用灰色填充配合透明度模拟虚线效果）
                    const savedAlpha = ctx.globalAlpha;
                    ctx.globalAlpha = 0.6; // 设置透明度模拟虚线效果
                    ctx.fillStyle = '#999999'; // 灰色
                    ctx.font = `${fontSize}px "Microsoft Yahei"`;
                    ctx.textBaseline = 'middle';
                    ctx.textAlign = 'left';
                    ctx.fillText(String(selectedNumber), numberX, centerY);
                    ctx.globalAlpha = savedAlpha; // 恢复透明度
                }
            }
        }
        // 第三行不绘制数字（空白行）
    }
}