<wxs module="wxs" src="./word-picker.wxs"></wxs>

<van-popup
    show="{{ show }}"
    bind:close="onClose"
    round
    closeable="{{true}}"
    close-on-click-overlay="{{true}}"
    safe-area-inset-bottom="{{false}}"
    position="bottom"
    custom-style="height:78%"
    custom-class="word-picker">
    <view class="word-picker-content">
        <view class="word-picker-title">请选择文字</view>
        <van-tabs
            wx:if="{{show}}"
            id="tabs"
            animated
            color="#93d333"
            ellipsis="{{false}}"
            line-width="90rpx"
            nav-class="nav-class"
            tab-class="tab-class"
            wrap-class="wrap-class"
            tab-active-class="tab-active-class"
            swipeable="{{true}}"
            active="{{currentTab}}"
            bind:change="onTabChange">
            <van-tab
                wx:for="{{wordList}}"
                wx:for-index="categoryIndex"
                wx:key="categoryIndex"
                title="{{wordList[categoryIndex].icon}} {{wordList[categoryIndex].categoryName}}">
                <view class="word-list-wrapper">
                    <view class="word-list">
                        <view
                            class="word-item {{wxs.isSelected(selectedWords, item) ? 'selected' : ''}}"
                            wx:for="{{wordList[categoryIndex].words}}"
                            wx:key="index"
                            data-word="{{item}}"
                            bind:tap="onWordClick">
                            <text class="word-item-text">{{item}}</text>
                            <!-- <text class="word-item-icon icon-success"></text> -->
                        </view>
                    </view>
                    <view class="word-item-empty"></view>
                </view>
            </van-tab>
        </van-tabs>
        <view class="selected-words">
            已选文字：
            <text
                class="selected-word-text"
                wx:for="{{selectedWords}}"
                wx:key="index"
                >{{item}}{{index !== selectedWords.length - 1 ? '、' :
                ''}}</text
            >
        </view>
        <view class="btn-area">
            <toy-button type="primary" bind:click="onChange" width="380rpx">
                （已选{{selectedWords.length}}个） 确定
            </toy-button>
            <toy-button
                type="white"
                bind:click="onClear"
                width="220rpx"
                icon="clear"
                icon-class-prefix="toy-icon">
                清空
            </toy-button>
        </view>
    </view>
</van-popup>
