<!-- volc-mini-sdk/components/product-card/product.wxml -->
<view class="productContainer">
    <Drawer id="volc-dirawer-product-card-portrait" custom-drawer="product-card-drawer-shell" needCancel="{{false}}" themeColor="{{drawerLightThemeColor}}">
        <!-- 控制传给 Drawer 的真实 slot 内容，避免抽屉未打开时提前创建商品列表。 -->
        <view wx:if="{{productDrawerReady}}" class="productDrawerContainer">
            <coupon-btn-list sdkInstance="{{sdkInstance}}" showEntry="{{true}}" />
            <!-- <card-list sdkInstance="{{sdkInstance}}" productIndex="3"/> -->
            <mp-tabs tabs="{{productMenus}}" activeTab="{{activeTab}}" swiper-class="p-swiper" tab-background-color="transparent" tab-active-text-color="{{drawerLightThemeColor.FontColor}}" tab-inactive-text-color="{{drawerLightThemeColor.BackFontColor}}" bindtabclick="onTabClick" bindchange="onChange">
                <block wx:for="{{productMenus}}" wx:key="Index">
                    <card-list wx:if="{{renderedProductTabMap[index]}}" data-set="{{item}}" slot="tab-content-{{index}}" sdkInstance="{{sdkInstance}}" productIndex="{{item.Index}}" themeColor="{{drawerLightThemeColor}}" listHeight="{{480}}" />
                </block>
            </mp-tabs>
        </view>
    </Drawer>
</view>
