<!--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">
      <block wx:if="{{showReplenish}}">
        <view class="btn btn--cancel" aria-role="button" bind:tap="onSubCancel">返回</view>
        <view class="title">{{title}}: 其他</view>
        <view class="btn btn--confirm" aria-role="button" bind:tap="onSubConfirm">完成</view>
      </block>
      <block wx:else>
        <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>
      </block>
    </view>
    <view class="form-picker__content">
      <view class="input-wrapper" wx:if="{{showReplenish}}" style="height: {{itemHeight}}px; padding: {{(itemHeight - 40) / 2}}px;">
        <input placeholder="请输入" focus="{{true}}" model:value="{{replenishValue}}" adjust-position="{{false}}" bind:keyboardheightchange="onKeyboardheightchange" bind:blur="onBlur" bind:confirm="onSubConfirm" />
      </view>
      <block wx:else>
        <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">{{replenish[item.value] || item.label}}</text>
            </view>
          </grid-builder>
        </scroll-view>
      </block>
    </view>
    <view style="height: {{offset}}px;"></view>
  </t-popup>
</view>