doodle-mini/miniprogram/pages/copyBook/copyBook.ts

import WordDrawService from '../../service/wordDrawService';
import { checkAndSaveImage } from '../../utils/saveImage';
import { PAPER_SIZE } from '../../constants/colors';
import { getWordsSvgData } from '../../utils/getWordsSvgJson';
import { CharacterItem } from '../../types/characterType';

Page({
    canvas: null as Canvas | null,
    ctx: null as RenderingContext | null,
    wordDrawService: null as WordDrawService | null,
    svgWords: {} as Record<string, string[]>,

    data: {
        // 选中的汉字列表
        words: [] as string[],
        showSelectWordPopup: false,
        showColorPopup: false,
        currentKey: 0,
        currentColor: '',
        boxWidth: 0,
        boxHeight: 0,
    },

    onLoad() {
        this.loadSvgWords();
        const hasShowIntroduction =
            wx.getStorageSync('hasShowIntroduction') || false;
        if (!hasShowIntroduction) {
            this.setData({
                words: ['好', '好', '学', '习', '天', '天', '向', '上']
            })
        }
    },

    async onReady() {
        await this.setCanvasBoxSize();
        await this.initCanvas()
    },

    async loadSvgWords() {
        try {
            wx.showToast({ title: '加载字体中...', icon: 'loading' });
            console.log("loadSvgWords");
            // 使用带缓存的SVG汉字数据获取函数
            const svgWordsData = await getWordsSvgData();

            console.log("svgWordsData", svgWordsData);

            this.svgWords = svgWordsData;
            wx.hideToast();

            console.log('SVG汉字数据加载成功，共', Object.keys(this.svgWords).length, '个汉字');

            const { words } = this.data as any;
            if (words && words.length > 0) {
                this.renderPracticeContent().catch(console.error);
            }
        } catch (error) {
            console.error('加载SVG汉字数据失败:', error);
            wx.hideToast();

            // 显示错误提示
            wx.showModal({
                title: '加载失败',
                content: '无法加载汉字数据，请检查网络连接后重试',
                showCancel: true,
                cancelText: '取消',
                confirmText: '重试',
                success: (res) => {
                    if (res.confirm) {
                        // 用户点击重试，重新加载
                        this.loadSvgWords();
                    }
                }
            });
        }
    },

    // 输入组件回调
    onConfirmInput(e: any) {
        const value: string = (e && e.detail && e.detail.value) || '';
        const text = (value || '').trim();
        if (!text) return;

        if (!this.isChineseText(text)) {
            wx.showToast({ title: '请输入汉字', icon: 'none' });
            return;
        }

        const { words } = this.data as any;

        // 1. 解析新输入的汉字
        const newChars = this.splitToSingleChars(text);
        if (newChars.length === 0) {
            wx.showToast({ title: '请输入有效汉字', icon: 'none' });
            return;
        }

        // 2. 检查是否超过限制
        if (words.length + newChars.length > 11) {
            wx.showToast({
                title: `最多只能添加 11 个字，当前已有 ${words.length} 个，输入了 ${newChars.length} 个`,
                icon: 'none',
                duration: 3000,
            });
            return;
        }

        // 3. 直接追加新汉字
        const updatedWords = [...words, ...newChars];

        // 4. 更新数据并提示
        this.setData({ words: updatedWords }, () => {
            this.renderPracticeContent().catch(console.error);
        });

        // 5. 显示添加结果提示
        wx.showToast({
            title: `成功添加 ${newChars.length} 个汉字`,
            icon: 'none',
            duration: 2000,
        });
    },

    // 选择面板
    openSelectWordPopup() {
        this.setData({ showSelectWordPopup: true });
    },
    closeSelectWordPopup() {
        this.setData({ showSelectWordPopup: false });
    },
    onChangeWord(e: any) {
        const selectedWords = e.detail.selectedWords as string[];
        const newWords = [...this.data.words, ...selectedWords];
        this.setData({ words: newWords, showSelectWordPopup: false }, () => {
            if (newWords && newWords.length > 0) {
                this.renderPracticeContent().catch(console.error);
            }
        });
    },

    // 删除
    deleteWordCard(e: any) {
        const { key } = e.detail;
        const { words } = this.data as any;
        const next = words.filter((_: string, index: number) => index !== key);
        this.setData({ words: next }, () => this.renderPracticeContent().catch(console.error));
    },

    // 校验 & 分割
    isChineseText(text: string): boolean {
        const chineseRegex = /^[\u4e00-\u9fff]+$/;
        return chineseRegex.test(text);
    },
    splitToSingleChars(text: string): string[] {
        const chineseRegex = /[\u4e00-\u9fff]/g;
        const matches = text.match(chineseRegex);
        return matches || [];
    },


    setCanvasBoxSize() {
        const query = wx.createSelectorQuery();
        query
            .select('#canvasWrapper')
            .boundingClientRect((rect) => {
                if (rect) {
                    const { width, height } = PAPER_SIZE['A4'];
                    const boxWidth = rect.width;
                    const boxHeight = boxWidth / (width / height);
                    this.setData({ boxWidth, boxHeight });
                }
            })
            .exec();
    },
    async initCanvas() {
        return new Promise<void>((resolve) => {
            // 然后初始化canvas
            wx.createSelectorQuery()
                .select('#canvasContent')
                .fields({
                    node: true,
                    size: true,
                })
                .exec(async (res) => {
                    if (res[0] && res[0].node) {
                        const canvas = res[0].node;
                        const ctx = canvas.getContext('2d');
                        if (ctx) {
                            this.canvas = canvas;
                            this.ctx = ctx;
                            this.wordDrawService = new WordDrawService(canvas, ctx, {
                                appName: '涂鸦丫小程序',
                                appHint: '练字|识字|涂色｜打印',
                                title: '田字格  练 字  贴',
                                subTitle: '按笔画临摹练习'
                            });

                            // 初始化时只绘制页眉和布局
                            await this.wordDrawService.drawLayout();

                            // 如果有汉字数据，绘制练字内容
                            const { words } = this.data as any;
                            if (words && words.length > 0) {
                                await this.renderPracticeContent();
                            }

                            resolve();
                        }
                    }
                });
        });
    },

    // 绘制练字内容（只绘制田字格和汉字内容）
    async renderPracticeContent() {
        if (!this.canvas || !this.wordDrawService) {
            await this.initCanvas();
            return;
        }

        const { words } = this.data as any;
        console.log("renderPracticeContent words", words);

        if (!words || words.length === 0) {
            this.wordDrawService.drawContentEmpty();
            return;
        }

        // 检查汉字是否支持
        const supportedWords = this.getSupportedWords(words);
        if (supportedWords.length === 0) {
            wx.showToast({ title: '暂不支持这些汉字', icon: 'none' });
            this.wordDrawService.drawContentEmpty();
            return;
        }

        // 处理布局和生成练字数据
        const characterData = this.processCharacterLayout(supportedWords);
        this.wordDrawService.drawPracticeContent(characterData);
    },


    /** 检查汉字是否支持，返回支持的汉字列表 */
    getSupportedWords(words: string[]): string[] {
        return words.filter(word => this.svgWords[word]);
    },

    /** 处理汉字布局，生成练字数据 */
    processCharacterLayout(words: string[]): CharacterItem[] {
        const maxRow = 11, maxCol = 9;
        let rowIndex = 0;
        const characterData: CharacterItem[] = [];
        const boundaryWords: string[] = [];

        // 按顺序处理每个汉字
        words.forEach((word: string) => {
            const strokes = this.svgWords[word];
            const strokeCount = strokes.length;
            const totalCells = 1 + strokeCount + 2; // 预览格 + 练习格 + 空白格
            const totalRows = Math.ceil(totalCells / maxCol);

            rowIndex += totalRows;

            if (rowIndex <= maxRow) {
                characterData.push({ character: word, strokes });
            } else {
                boundaryWords.push(word);
            }
        });

        // 提示超出页面的汉字
        if (boundaryWords.length > 0) {
            wx.showToast({
                title: `练字贴已超过一页，部分汉字未包含在本次生成结果中`,
                icon: 'none'
            });
        }

        return characterData;
    },

    // 下载打印练字贴
    exportToPrint() {
        const { words } = this.data as any;
        if (!this.canvas || words.length <= 0) {
            wx.showToast({ title: '请先生成练字贴', icon: 'none' });
            return;
        }
        checkAndSaveImage(this.canvas);
    },

    // 分享功能
    onShareAppMessage() {
        return {
            title: '涂鸦丫-练字|识字|打印',
            path: '/pages/copyBook/index',
        };
    },

    onShareTimeline() {
        return {
            title: '涂鸦丫-练字|识字|打印',
            query: '/pages/copyBook/index',
        };
    },
});