<van-popup
    show="{{ show }}"
    bind:close="onClose"
    custom-class="shape-picker-popup">
    <view class="shape-picker-container">
        <text class="shape-picker-title">
            选择形状{{ singleMode ? '（单选）' : '（多选）' }}
        </text>
        <view class="shape-options-wrapper">
            <view class="shape-options {{ singleMode ? 'single-mode' : '' }}">
                <view
                    wx:for="{{shapes}}"
                    wx:key="id"
                    class="shape-option {{item.checked ? 'selected' : '' }} {{ item.checkedDisabled ? 'checked-disabled' : '' }}"
                    bindtap="onSelectShape"
                    data-index="{{index}}"
                    data-shape="{{item.id}}">
                    <image
                        class="shape-svg"
                        src="{{ item.svgDataUrl }}"
                        mode="aspectFit" />
                    <text class="shape-name">{{item.name}}</text>
                    <image
                        wx:if="{{item.checked}}"
                        class="img-shape-selected"
                        src="/assets/imgs/checked.png"
                        mode="aspectFit" />
                    <image
                        wx:if="{{item.checkedDisabled}}"
                        class="img-shape-checked-disabled"
                        src="/assets/imgs/checked-disabled.png"
                        mode="aspectFit" />
                </view>
            </view>
        </view>
        <view class="btn-area">
            <toy-button
                type="primary"
                bind:click="onChange"
                width="400rpx"
                disabled="{{ totalSelected === 0 }}">
                确认选择{{ singleMode ? '' : '（' + totalSelected + '个）' }}
            </toy-button>
        </view>
    </view>
</van-popup>
