<view class="page-container">
    <view class="wrapper">
        <text class="wrapper-title">识别图形，涂一涂</text>
        <view class="btn-area">
            <toy-button
                type="green"
                bind:click="handleSelectShape"
                width="100%">
                选择图形
            </toy-button>
            <toy-button
                type="primary"
                bind:click="refreshShapeCard"
                width="100%"
                icon="refresh"
                icon-class-prefix="toy-icon">
                随机生成
            </toy-button>
        </view>
        <view class="shape-list" wx:if="{{shapeList.length > 0}}">
            <shape-card
                wx:for="{{ shapeList }}"
                wx:for-item="item"
                wx:for-index="index"
                wx:key="{{index}}"
                index="{{index}}"
                svg="{{ item.svg }}"
                fillColor="{{ item.fillColor }}"
                bind:onShapeTap="openSelectShapePopup"
                bind:onDelete="onDelete"
                bind:onColorTap="onColorTap" />
        </view>
        <view class="shape-list-empty" wx:if="{{!shapeList.length}}">
            <view class="empty-icon">
                <text class="toy-icon toy-icon-guide"></text>
            </view>
            <view class="empty-title">还没有选择图形</view>
            <view class="empty-desc"
                >请点击上方“选择图形”或使用“随机生成”开始创建</view
            >
        </view>
    </view>
    <shape-picker
        selectedShapeList="{{shapeList}}"
        show="{{showSelectShapePopup}}"
        selectedShapeIndex="{{selectedShapeIndex}}"
        bind:onClose="closeSelectShapePopup"
        bind:onChange="onChangeShape" />
    <color-picker
        show="{{showColorPopup}}"
        currentColor="{{currentColor}}"
        bind:onClose="onCloseColorPopup"
        bind:onChange="onChangeColor" />

    <view id="previewWrapper" class="wrapper">
        <text class="wrapper-title">预览打印效果</text>
        <view
            wx:if="{{!isPCDevtool}}"
            id="canvasWrapper"
            class="canvas-wrapper">
            <canvas
                type="2d"
                id="canvasContent"
                class="canvas-content"
                style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
        </view>
        <draw-ad type="focusDraw"></draw-ad>
    </view>
    <view class="empty"></view>
</view>
<share-guide-popup
    show="{{showShareDialog}}"
    bind:onClose="onCloseShareDialog"
    bind:onShareSuccess="onShareSuccess" />
<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="{{shapeList.length <= 0}}"
        icon="download"
        icon-class-prefix="toy-icon">
        下载打印
    </toy-button>
</view>
