<view class="page-container">
    <view 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>

        <!-- 数字选择区域 -->
        <view class="number-selection-area">
            <!-- 第一行：1-4 -->
            <view class="number-row">
                <view
                    wx:for="{{numberList}}"
                    wx:key="index"
                    wx:for-item="number"
                    wx:if="{{index < 4}}"
                    class="number-item {{selectedNumber === number ? 'active' : ''}}"
                    data-number="{{number}}"
                    bind:tap="onSelectNumber">
                    <view class="number-text">{{number}}</view>
                </view>
            </view>

            <!-- 第二行：5-8 -->
            <view class="number-row">
                <view
                    wx:for="{{numberList}}"
                    wx:key="index"
                    wx:for-item="number"
                    wx:if="{{index >= 4 && index < 8}}"
                    class="number-item {{selectedNumber === number ? 'active' : ''}}"
                    data-number="{{number}}"
                    bind:tap="onSelectNumber">
                    <view class="number-text">{{number}}</view>
                </view>
            </view>

            <!-- 第三行：9、10和随机按钮 -->
            <view class="number-row">
                <view class="number-column">
                    <view
                        wx:for="{{numberList}}"
                        wx:key="index"
                        wx:for-item="number"
                        wx:if="{{index >= 8}}"
                        class="number-item {{selectedNumber === number ? 'active' : ''}}"
                        data-number="{{number}}"
                        bind:tap="onSelectNumber">
                        <view class="number-text">{{number}}</view>
                    </view>
                </view>
                <view class="number-column">
                    <toy-button
                        style="width: 100%"
                        type="primary"
                        bind:click="onRandom"
                        width="100%"
                        icon="refresh"
                        icon-class-prefix="toy-icon">
                        随机
                    </toy-button>
                </view>
            </view>
        </view>
        <draw-ad type="mathDraw"></draw-ad>
    </view>
    <view class="empty"></view>
</view>
<math-bottom-buttons
    disabled="{{selectedNumber <= 0}}"
    bind:share="onShareAppMessage"
    bind:export="exportToPrint" />
<share-guide-popup
    show="{{showShareDialog}}"
    bind:onClose="onCloseShareDialog"
    bind:onShareSuccess="onShareSuccess" />
