Page({
    data: {
        // 选中字卡列表，复用 index 页的结构 [{ word, color }]
        cardList: [] as { word: string; color: string }[],
        showSelectWordPopup: false,

        // 田字格配置
        rows: 10,
        cols: 12,
        rowsArray: [] as number[],
        colsArray: [] as number[],
        rowHeaderWords: [] as string[],
    },

    onLoad() {
        this.initGrid();
    },

    // 输入组件回调
    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 chars = this.splitToSingleChars(text);
        const { cardList } = this.data as any;
        const exists = new Set(cardList.map((c: any) => c.word));
        const newList = [...cardList];
        chars.forEach((ch) => {
            if (!exists.has(ch)) {
                newList.push({ word: ch, color: '#141414' });
            }
        });
        this.setData({ cardList: newList }, () => this.updateRowHeaderWords());
    },

    // 选择面板
    openSelectWordPopup() {
        this.setData({ showSelectWordPopup: true });
    },
    closeSelectWordPopup() {
        this.setData({ showSelectWordPopup: false });
    },
    onChangeWord(e: any) {
        const { cardList } = e.detail || {};
        this.setData({ cardList }, () => this.updateRowHeaderWords());
    },

    // 删除与颜色
    deleteWordCard(e: any) {
        const index = e.detail && e.detail.index;
        const { cardList } = this.data as any;
        const next = cardList.filter((_: any, i: number) => i !== index);
        this.setData({ cardList: next }, () => this.updateRowHeaderWords());
    },
    onColorTap() { },

    // 校验 & 分割
    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 || [];
    },

    // 田字格
    initGrid() {
        const { rows, cols } = this.data as any;
        const rowsArray = Array.from({ length: rows }, (_, i) => i);
        const colsArray = Array.from({ length: cols }, (_, i) => i);
        this.setData({ rowsArray, colsArray });
    },
    updateRowHeaderWords() {
        const { rows, cardList } = this.data as any;
        const rowHeaderWords: string[] = [];
        for (let i = 0; i < rows; i++) {
            rowHeaderWords.push((cardList[i] && cardList[i].word) || '');
        }
        this.setData({ rowHeaderWords });
    },
});