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

<view class="van-picker custom-class">
    <include src="./toolbar.wxml" wx:if="{{ toolbarPosition === 'top' }}"/>

    <view class="van-picker__loading" wx:if="{{ loading }}">
        <loading color="#1989fa"/>
    </view>

    <view
            catch:touchmove="noop"
            class="van-picker__columns"
            style="{{ computed.columnsStyle({ itemHeight, visibleItemCount }) }}"
    >
        <picker-column
                active-class="active-class"
                bind:change="onChange"
                class="van-picker__column"
                custom-class="column-class"
                data-index="{{ index }}"
                default-index="{{ item.defaultIndex || defaultIndex }}"
                initial-options="{{ item.values }}"
                item-height="{{ itemHeight }}"
                value-key="{{ valueKey }}"
                visible-item-count="{{ visibleItemCount }}"
                wx:for="{{ computed.columns(columns) }}"
                wx:key="index"
        />
        <view class="van-picker__mask" style="{{ computed.maskStyle({ itemHeight, visibleItemCount }) }}"/>
        <view
                class="van-picker__frame van-hairline--top-bottom"
                style="{{ computed.frameStyle({ itemHeight }) }}"
        />
    </view>

    <include src="./toolbar.wxml" wx:if="{{ toolbarPosition === 'bottom' }}"/>
</view>
