<!--components/form-picker/form-picker.wxml-->
<wxs src="./picker.wxs" module="_" />
<view class="form-picker">
  <t-popup t-class="form-picker__inner" visible="{{ visible }}" bind:visible-change="onCancel" placement="bottom" close-on-overlay-click="{{closeOnOverlayClick}}" bind:visible-change="onVisibleChange">
    <view class="form-picker__header">
      <view class="btn btn--cancel" aria-role="button" bind:tap="onCancel">取消</view>
      <view class="title">{{title}}</view>
      <view class="btn btn--confirm" aria-role="button" bind:tap="onConfirm">确定</view>
    </view>
    <view class="form-picker__content">
      <scroll-view type="custom" scroll-y style="height: {{containerHeight}}px;">
        <grid-builder list="{{options}}" cross-axis-count="{{optionsColumns}}" cross-axis-gap="{{gap}}" main-axis-gap="{{gap}}">
          <view slot:item slot:index class="card {{_.getClassName(selected, item)}}" style="height: {{itemHeight}}px;" data-index="{{index}}" bind:tap="handle">
            <t-icon wx:if="{{_.contain(selected, item.value)}}" name="check" t-class="card__icon" ariaHidden="{{true}}" />
            <text overflow="ellipsis" max-lines="3">{{item.label}}</text>
          </view>
        </grid-builder>
      </scroll-view>
    </view>
  </t-popup>
</view>