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

<view
        class="van-tree-select"
        style="height: {{ utils.addUnit(height) }}"
>
    <scroll-view scroll-y class="van-tree-select__nav">
        <van-sidebar active-key="{{ mainActiveIndex }}" bind:change="onClickNav"
                     custom-class="van-tree-select__nav__inner">
            <van-sidebar-item
                    wx:for="{{ items }}"
                    wx:key="index"
                    custom-class="main-item-class"
                    active-class="main-active-class"
                    disabled-class="main-disabled-class"
                    badge="{{ item.badge }}"
                    dot="{{ item.dot }}"
                    title="{{ item.text }}"
                    disabled="{{ item.disabled }}"
            />
        </van-sidebar>
    </scroll-view>
    <scroll-view scroll-y class="van-tree-select__content">
        <slot name="content"/>
        <view
                wx:for="{{ subItems }}"
                wx:key="id"
                class="van-ellipsis content-item-class {{ utils.bem('tree-select__item', { active: wxs.isActive(activeId, item.id), disabled: item.disabled }) }} {{ wxs.isActive(activeId, item.id) ? 'content-active-class' : '' }} {{ item.disabled ? 'content-disabled-class' : '' }}"
                data-item="{{ item }}"
                bind:tap="onSelectItem"
        >
            {{ item.text }}
            <van-icon
                    wx:if="{{ wxs.isActive(activeId, item.id) }}"
                    name="{{ selectedIcon }}"
                    size="16px"
                    class="van-tree-select__selected"
            />
        </view>
    </scroll-view>
</view>
