import { WORDS } from '../../constants/words';

Component({
    options: {},
    /**
     * 组件的属性列表
     */
    properties: {
        show: {
            type: Boolean,
            value: false,
        },
        currentTab: {
            type: Number,
            value: 0,
        },
        cardList: {
            type: Array,
            value: [],
        },
    },
    /**
     * 组件的初始数据
     */
    data: {
        wordList: WORDS,
        selectedWords: [] as string[],
    },
    lifetimes: {
        ready() {
        },
    },
    observers: {
        cardList(newVal: CardList) {
            const selectedWords = newVal.map((item) => item.word);
            this.setData({ selectedWords });
        },
    },
    /**
     * 组件的方法列表
     */
    methods: {
        onClose() {
            this.triggerEvent('onClose');
        },

        onClear() {
            this.setData({
                selectedWords: [],
            });
        },

        onChange() {
            this.triggerEvent('onChange', { selectedWords: this.data.selectedWords });
        },

        onTabChange(e: WechatMiniprogram.CustomEvent) {
            this.setData({ currentTab: e.detail });
        },

        onWordClick(e: WechatMiniprogram.TouchEvent) {
            const { word } = e.currentTarget.dataset;
            const { selectedWords } = this.data;
            let newSelectedWords = selectedWords as string[];

            // 如果是已选中的文字,直接取消选中
            if (newSelectedWords.includes(word)) {
                newSelectedWords = newSelectedWords.filter((item) => item !== word);
            } else {
                // 如果是未选中的文字,先判断是否已选满6个
                if (newSelectedWords.length >= 6) {
                    wx.showToast({
                        title: '最多选择6个字',
                        icon: 'none',
                    });
                    return;
                }
                newSelectedWords = [...newSelectedWords, word];
            }

            this.setData({
                selectedWords: newSelectedWords,
            });
        },
    },
});