<import-sjs name="computed" from="./index.sjs"/>
<view
  class="adc-picker-container"
  style="{{ computed.containerStyle(showToolbar, toolbarPosition) }}"
>
  <picker-toolbar
    title="{{ title }}"
    onCancel="cancelHandel"
    onConfirm="confirmHandel"
    showToolbar="{{ showToolbar }}"
    toolbarPosition="{{ toolbarPosition}}"
    cancelButtonText="{{ cancelButtonText }}"
    confirmButtonText="{{ confirmButtonText }}"
  />
  <view
    catchTouchMove="noop"
    class="adc-picker-columns"
    style="{{ computed.columnsStyle({ itemHeight, visibleItemCount }) }}"
  >
    <packer-column
      a:for="{{columnsArr}}"
      index="{{index}}"
      valueKey="{{valueKey}}"
      componentUuid="{{ componentUuid }}"
      defaultIndex="{{item.defaultIndex}}"
      itemHeight="{{itemHeight}}"
      visibleItemCount="{{visibleItemCount}}"
      columnList="{{item.values}}"
      onChange="changeHandle"
      columnIndex="column{{index}}"
    ></packer-column>
    <view class="adc-picker__mask" style="{{ computed.maskStyle({ itemHeight, visibleItemCount }) }}"/>
    <view
      class="adc-picker__frame adc-hairline--top-bottom"
      style="{{ computed.frameStyle({ itemHeight }) }}"
    />
  </view>
</view>

