<wxs module="utils" src="./index.wxs"/>

<view class="van-cascader__header" wx:if="{{ showHeader }}">
    <slot name="title" wx:if="{{ useTitleSlot }}"></slot>
    <text class="van-cascader__title" wx:else>{{ title }}</text>
    <van-icon
            bind:tap="onClose"
            class="van-cascader__close-icon"
            name="{{ closeIcon }}"
            wx:if="{{ closeable }}"
    />
</view>

<van-tabs
        active="{{ activeTab }}"
        bind:click="onClickTab"
        border="{{ false }}"
        color="{{ activeColor }}"
        custom-class="van-cascader__tabs"
        ellipsis="{{ ellipsis }}"
        swipeable="{{ swipeable }}"
        tab-class="van-cascader__tab"
        wrap-class="van-cascader__tabs-wrap"
>
    <van-tab
            style="width: 100%;"
            title="{{ tab.selected ? tab.selected[textKey] : placeholder }}"
            title-style="{{ !tab.selected ? 'color: #969799;font-weight:normal;' : '' }}"
            wx:for="{{ tabs }}"
            wx:for-index="tabIndex"
            wx:for-item="tab"
            wx:key="tabIndex"
    >
        <!-- 暂不支持 -->
        <!-- <slot name="options-top"></slot> -->

        <view class="van-cascader__options">
            <view
                    bind:tap="onSelect"
                    class="{{ option.className }} {{ utils.optionClass(tab, valueKey, option) }}"
                    data-option="{{ option }}"
                    data-tab-index="{{ tabIndex }}"
                    style="{{ utils.optionStyle({ tab, valueKey, option, activeColor }) }}"
                    wx:for="{{ tab.options }}"
                    wx:for-item="option"
                    wx:key="index"
            >
                <text>{{ option[textKey] }}</text>
                <van-icon name="success" size="18" wx:if="{{ utils.isSelected(tab, valueKey, option) }}"/>
            </view>
        </view>
        <!-- 暂不支持 -->
        <!-- <slot name="options-bottom"></slot> -->
    </van-tab>
</van-tabs>
