<van-popup
    show="{{ show }}"
    bind:close="onClose"
    custom-class="color-picker-popup">
    <view class="color-picker-container">
        <text class="color-picker-title">选择颜色</text>
        <!-- <view class="color-options-title">
            <text class="color-options-title-text">基础12色</text>
            <view class="color-options-title-line"></view>
        </view>
        <view class="color-options">
            <block wx:for="{{WATER_COLORS.basic12}}" wx:key="index">
                <view
                    class="color-option {{item.hex === currentColor ? 'selected' : ''}}"
                    style="background-color: {{item.hex}};"
                    bindtap="onSelectColor"
                    data-color="{{item.hex}}"></view>
            </block>
        </view>
        <view class="color-options-title">
            <text class="color-options-title-text">扩展24色</text>
            <view class="color-options-title-line"></view>
        </view> -->
        <view class="color-options">
            <block wx:for="{{extended24Colors}}" wx:key="index">
                <view
                    class="color-option {{item.hex === currentColor ? 'selected' : ''}}"
                    style="background-color: {{item.hex}};"
                    bindtap="onSelectColor"
                    data-color="{{item.hex}}"></view>
            </block>
        </view>
        <view class="btn-area">
            <!-- <view class="btn-yellow">确认选择</view> -->
            <toy-button type="primary" bind:click="onChange" width="400rpx">
                确认选择
            </toy-button>
        </view>
    </view>
</van-popup>
