<!--
  Canvas 页面模板
  用于统一管理 Canvas 绘制页面的通用结构
  
  使用方式：
  <import src="../../templates/canvas-page-template.wxml" />
  <template
      is="canvasPageTemplate"
      data="{{boxWidth: boxWidth, boxHeight: boxHeight, hasTypeSelector: false, adType: 'focusDraw', disabled: !hasContent, showShareDialog: showShareDialog}}" />
  
  参数说明：
  - boxWidth: Canvas 宽度
  - boxHeight: Canvas 高度
  - hasTypeSelector: 是否显示类型选择器（布尔值）
  - showTypeSelector: 条件显示类型选择器（可选，用于 countMatch、missingNumber 等页面）
  - currentModeName: 当前模式名称（类型选择器使用）
  - typeActions: 类型选项数组（类型选择器使用）
  - adType: 广告位类型（'focusDraw' 或 'mathDraw'）
  - disabled: 底部按钮是否禁用
  - showShareDialog: 是否显示分享弹窗
-->
<template name="canvasPageTemplate">
    <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>

            <!-- 类型选择器和随机生成按钮 -->
            <!-- 支持两种方式：hasTypeSelector（布尔值）或 showTypeSelector（条件显示） -->
            <math-type-selector
                wx:if="{{hasTypeSelector || showTypeSelector}}"
                current-type-name="{{currentModeName}}"
                type-actions="{{typeActions}}"
                bind:select="onSelectType"
                bind:random="onRandom" />

            <!-- 随机生成按钮（当没有类型选择器时显示） -->
            <view
                class="random-button-area"
                wx:if="{{!hasTypeSelector && !showTypeSelector}}">
                <toy-button
                    class="random-button"
                    type="primary"
                    bind:click="onRandom"
                    width="100%"
                    height="80rpx"
                    icon="refresh"
                    icon-class-prefix="toy-icon">
                    随机生成
                </toy-button>
            </view>

            <!-- 广告位 -->
            <draw-ad type="{{adType}}"></draw-ad>
        </view>
        <view class="empty"></view>
    </view>

    <!-- 底部按钮 -->
    <math-bottom-buttons
        disabled="{{disabled}}"
        bind:share="onShareAppMessage"
        bind:export="exportToPrint" />

    <!-- 分享引导弹窗 -->
    <share-guide-popup
        show="{{showShareDialog}}"
        bind:onClose="onCloseShareDialog"
        bind:onShareSuccess="onShareSuccess" />
</template>
