<import-sjs
  from="./index.sjs"
  name="utils" />

<view
  class="ant-collapse {{ className ? className : '' }}"
  style="{{ style }}">
  <block
    a:for="{{ items }}"
    a:for-index="index"
    a:for-item="item">
    <view
      class="ant-collapse-item {{ utils.isActive(mixin.value, index, item.disabled) ? 'ant-collapse-item-active' : '' }} {{ item.disabled ? 'ant-collapse-item-disabled' : '' }}">
      <view
        class="ant-collapse-item-title"
        data-active="{{ utils.isActive(mixin.value, index, item.disabled) }}"
        data-index="{{ index }}"
        data-id="{{ $id }}"
        onTap="onChange">
        <view class="ant-collapse-item-line">
          <view class="ant-collapse-item-title-node">
            <slot
              name="title"
              value="{{ item }}"
              index="{{ index }}"
              current="{{ mixin.value }}">
              {{ item.title }}
            </slot>
          </view>
          <view class="ant-collapse-item-brief-container">
            <view class="ant-collapse-item-brief-node">
              <slot
                name="brief"
                value="{{ item }}"
                index="{{ index }}"
                current="{{ mixin.value }}">
                {{ brief }}
              </slot>
            </view>

            <view class="ant-collapse-item-title-arrow">
              <slot
                name="icon"
                value="{{ item }}"
                index="{{ index }}"
                current="{{ mixin.value }}">
                <ant-icon
                  type="{{ utils.isActive(mixin.value, index, item.disabled) ? 'UpOutline' : 'DownOutline' }}" />
              </slot>
            </view>
          </view>
        </view>
      </view>
      <view
        class="ant-collapse-item-content-wrap {{ hasChange ? 'ant-collapse-item-content-wrap-transition' : '' }} ant-collapse-item-content-wrap{{ $id ? '-' + $id : '' }}-{{ index }}"
        onTransitionEnd="resetContentHeight"
        style="{{ utils.getStyleHeight(index, contentHeight, item.disabled) }}"
        data-index="{{ index }}">
        <view class="ant-collapse-item-content-container">
          <view
            class="ant-collapse-item-content ant-collapse-item-content{{ $id ? '-' + $id : '' }}-{{ index }}">
            <slot
              name="content"
              value="{{ item }}"
              index="{{ index }}"
              current="{{ mixin.value }}">
              {{ item.content }}
            </slot>
          </view>
        </view>
      </view>
    </view>
  </block>
</view>