<view class="page-container">
    <view class="wrapper">
        <text class="wrapper-title">自定义练字贴</text>
        <view class="word-input-box">
            <word-input value="{{inputValue}}" bind:onConfirm="onConfirmInput" style="width: 100%;"/>
        </view>

        <view class="action-buttons-box">
            <toy-button
                type="green"
                bind:click="openSelectWordPopup"
                height="80rpx"
                width="410rpx"
                icon="success"
                icon-class-prefix="van-icon">
                选择文字
            </toy-button>
            <toy-button
                disabled="{{words.length <= 0}}"
                type="white"
                bind:click="clearWords"
                width="220rpx"
                height="80rpx"
                icon="clear"
                icon-class-prefix="toy-icon">
                清空
            </toy-button>
        </view>

        <view class="word-card-box">
            <view class="word-cards-grid" wx:if="{{words.length > 0}}">
                <word-card
                    disabledColor="{{true}}"
                    wx:key="index"
                    wx:for="{{words}}"
                    wx:for-item="word"
                    wx:for-index="index"
                    word="{{word}}"
                    key="{{index}}"
                    bind:onDelete="deleteWordCard"
                    bind:onColorTap="onColorTap" />
            </view>
            <empty-state
                wx:if="{{!words.length}}"
                title="还没有添加文字"
                desc='请在上方输入文字或点击"选择文字"按钮，开始创建你的练字田字格吧！'
                hint="提示：最多可以同时添加 11 个文字" />
        </view>
    </view>

    <view id="previewWrapper" class="wrapper">
        <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>
        <ad-custom unit-id="adunit-6f972b9b9bca0b9f"></ad-custom>
    </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"
            icon="download"
            icon-class-prefix="toy-icon">
            下载打印
        </toy-button>
    </view>
    <word-picker
        show="{{showSelectWordPopup}}"
        selectedWords="{{selectedWords}}"
        max="11"
        bind:onClose="closeSelectWordPopup"
        bind:onChange="onChangeWord" />
    <share-guide-popup
        show="{{showShareDialog}}"
        bind:onClose="onCloseShareDialog"
        bind:onShareSuccess="onShareSuccess" />
    <add-to-miniprogram-tip />

    <view class="empty"></view>
</view>
