<view class="page-container">
    <view class="wrapper">
        <text class="wrapper-title">自定义涂鸦卡</text>
        <view class="word-input-box">
            <word-input bind:onConfirm="onConfirmInput" width="410rpx" />
            <toy-button
                type="green"
                bind:click="openSelectWordPopup"
                width="200rpx">
                选择文字
            </toy-button>
        </view>

        <view class="word-card-box">
            <view class="word-cards-grid" wx:if="{{cardList.length > 0}}">
                <word-card
                    wx:key="index"
                    wx:for="{{cardList}}"
                    wx:for-item="item"
                    wx:for-index="index"
                    key="{{index}}"
                    word="{{item.word}}"
                    color="{{item.color}}"
                    bind:onDelete="deleteWordCard"
                    bind:onColorTap="onColorTap" />
            </view>
            <empty-state
                wx:if="{{!cardList.length}}"
                title="还没有添加文字"
                desc="请在上方输入文字或点击“选择文字”按钮，开始创建你的涂鸦卡吧！"
                hint="提示：最多可以同时添加 6 个文字" />
        </view>
        <view class="operation-box">
            <toy-button
                type="primary"
                bind:click="refreshCardList"
                width="410rpx"
                icon="refresh"
                icon-class-prefix="toy-icon">
                随机生成
            </toy-button>
            <toy-button
                disabled="{{cardList.length <= 0}}"
                type="white"
                bind:click="clearCardList"
                width="200rpx"
                icon="clear"
                icon-class-prefix="toy-icon">
                清空
            </toy-button>
        </view>

        <!-- 趣味模板选择区域 -->
        <view class="template-section">
            <view class="template-title">选择涂色模板</view>
            <view class="template-list">
                <view
                    class="template-item {{selectedTemplate === 'grid' ? 'active' : ''}}"
                    data-template="grid"
                    bind:tap="onSelectTemplate">
                    <view class="template-checkbox">
                        <view
                            class="checkbox-icon"
                            wx:if="{{selectedTemplate === 'grid'}}"
                            >✓</view
                        >
                    </view>
                    <view class="template-name">网格模板</view>
                </view>
                <view
                    class="template-item {{selectedTemplate === 'find' ? 'active' : ''}}"
                    data-template="find"
                    bind:tap="onSelectTemplate">
                    <view class="template-checkbox">
                        <view
                            class="checkbox-icon"
                            wx:if="{{selectedTemplate === 'find'}}"
                            >✓</view
                        >
                    </view>
                    <view class="template-name">找字模板</view>
                </view>
            </view>
            <ad-custom unit-id="adunit-4efb537f971b3f7d"></ad-custom>
        </view>
    </view>
    <view id="previewWrapper" class="wrapper" wx:if="{{cardList.length > 0}}">
        <text class="wrapper-title">预览打印效果</text>
        <view id="canvasWrapper" class="canvas-wrapper">
            <canvas
                type="2d"
                id="canvasContent"
                class="canvas-content"
                style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
        </view>
    </view>
    <van-cell
        wx:if="{{env !== 'release'}}"
        is-link
        title="debug页面"
        link-type="navigateTo"
        url="/pages/debug/debug" />
    <view class="empty"></view>
    <color-picker
        show="{{showColorPopup}}"
        currentColor="{{currentColor}}"
        bind:onClose="onCloseColorPopup"
        bind:onChange="onChangeColor" />
    <word-picker
        show="{{showSelectWordPopup}}"
        cardList="{{cardList}}"
        bind:onClose="closeSelectWordPopup"
        bind:onChange="onChangeWord" />
</view>
<view class="bottom-btn-box">
    <toy-button
        openType="share"
        type="green"
        flat="{{true}}"
        bind:click="onShareAppMessage"
        width="220rpx"
        height="80rpx"
        icon="wechat"
        icon-class-prefix="toy-icon">
        分享
    </toy-button>
    <toy-button
        type="primary"
        flat="{{true}}"
        bind:click="exportToPrint"
        width="420rpx"
        height="80rpx"
        disabled="{{cardList.length <= 0}}"
        icon="download"
        icon-class-prefix="toy-icon">
        下载打印
    </toy-button>
</view>
<introduction-popup
    wx:if="{{showIntroductionPopup}}"
    bind:onClose="onCloseIntroductionPopup" />
<share-guide-popup
    show="{{showShareDialog}}"
    bind:onClose="onCloseShareDialog"
    bind:onShareSuccess="onShareSuccess" />
<add-to-miniprogram-tip />
