<wxs module="_" src="./util.wxs" />

<view class="{{classPrefix}} {{show ? prefix + '-is-expanded' : ''}}" style="top:{{top}}px; z-index: {{zIndex + 1}}">
  <view
    wx:if="{{show && overlay}}"
    class="{{prefix}}-mask"
    bind:tap="handleMaskClick"
    style="height: {{maskHeight}}px; z-index: {{zIndex + 1}}"
    catch:touchmove="catchtouchmove"
  ></view>
  <view
    class="{{contentClasses}} {{classPrefix}}__content"
    style="transition: all {{duration}}ms ease; z-index: {{zIndex + 1}}"
  >
    <view class="{{classPrefix}}__body" wx:if="{{show}}">
      <block wx:if="{{optionsLayout === 'columns'}}">
        <!-- 单选列表 -->
        <t-cell-group wx:if="{{!multiple}}">
          <t-radio-group value="{{value}}" bind:change="handleRadioChange">
            <t-radio
              wx:for="{{options}}"
              wx:key="index"
              icon="stroke-line"
              align="right"
              t-class="radio"
              t-class-label="radio__label radio__label--{{value == item.value ? 'active' : ''}}"
              value="{{item.value}}"
              label="{{item.label}}"
              disabled="{{item.disabled}}"
            ></t-radio>
          </t-radio-group>
        </t-cell-group>
        <!-- 多选列表 -->
        <block wx:else>
          <t-checkbox-group
            t-class="{{classPrefix}}__checkbox-group"
            custom-style="grid-template-columns: repeat({{optionsColumns}}, 1fr)"
            value="{{value}}"
            bind:change="handleRadioChange"
          >
            <block wx:for="{{options}}" wx:key="index">
              <t-checkbox
                class="{{classPrefix}}__checkbox-item"
                theme="tag"
                value="{{item.value}}"
                label="{{item.label}}"
                disabled="{{item.disabled}}"
              ></t-checkbox>
            </block>
          </t-checkbox-group>
        </block>
      </block>
      <block wx:elif="{{optionsLayout === 'tree'}}">
        <scroll-view
          scroll-y
          class="{{classPrefix}}__column {{classPrefix}}__column--{{_.getTreeClass(leafLevel - level)}}"
          wx:for="{{treeOptions}}"
          wx:key="level"
          wx:for-index="level"
        >
          <block wx:if="{{level < leafLevel}}">
            <view
              wx:for="{{treeOptions[level]}}"
              wx:key="index"
              bind:tap="handleTreeClick"
              data-level="{{level}}"
              data-value="{{item.value}}"
              class="{{classPrefix}}__tree-item {{item.value === value[level] ? classPrefix + '__tree-item--active' : '' }}"
            >
              {{item.label}}
            </view>
          </block>

          <block wx:else>
            <block wx:if="{{!multiple}}">
              <t-radio-group data-level="{{level}}" value="{{value[level]}}" bind:change="handleRadioChange">
                <t-radio
                  wx:for="{{treeOptions[level]}}"
                  wx:key="value"
                  t-class="radio"
                  t-class-label="radio__label radio__label--{{value[level] === item.value ? 'active' : ''}}"
                  value="{{item.value}}"
                  borderless
                  align="right"
                  >{{item.label}}</t-radio
                >
              </t-radio-group>
            </block>
            <block wx:elif="{{multiple}}">
              <t-checkbox-group value="{{value[level]}}" bind:change="handleRadioChange" data-level="{{level}}">
                <t-checkbox
                  wx:for="{{treeOptions[level]}}"
                  wx:key="value"
                  align="right"
                  t-class="radio"
                  t-class-label="radio__label radio__label--{{value[level] === item.value ? 'active' : ''}}"
                  borderless
                  value="{{item.value}}"
                  >{{item.label}}</t-checkbox
                >
              </t-checkbox-group>
            </block>
          </block>
        </scroll-view>
      </block>

      <slot />
    </view>
    <view class="{{classPrefix}}__foot" wx:if="{{multiple || optionsLayout === 'tree'}}">
      <t-button-group>
        <t-button block t-class="button button--reset" theme="default" disabled="{{!hasChanged}}" bindtap="handleReset"
          >重置</t-button
        >
        <t-button
          block
          t-class="button button--confirm"
          theme="primary"
          disabled="{{!hasChanged}}"
          bindtap="handleConfirm"
          >确定</t-button
        >
      </t-button-group>
    </view>
  </view>
</view>
