<view class="wv-collapse-item {{ wvInheritableApply.isActive ? 'active' : '' }} {{ wvInheritableApply.split? 'split' : 'no-split' }} {{wvInheritableApply.isActive ? 'wv-collapse-item-active' : ''}} {{wvInheritableApply.disabled ? 'wv-collapse-item-disabled' : ''}} {{wvInheritableApply.customClass}} {{wvInheritableApply.reverse ? 'reverse' : ''}} arrow-position-{{wvInheritableApply.arrowPosition}}">
  <view class="wv-collapse-item-header {{ wvInheritableApply.headerClass? wvInheritableApply.headerClass : '' }}" bindtap="onClickHeader" style="{{wvInheritableApply.headerBackground? 'background-color: ' + wvInheritableApply.headerBackground +';' : ''}}">
    <block wx:if="{{wvInheritableApply.showArrow}}">
      <view class="wv-collapse-item-arrow">
        <view class="slot-defaultable icon-area">
          <view class="slot"><slot name="icon"></slot></view>
          <view class="default-slot">
            <text class="wv-icon bi-chevron-down"></text>
          </view>
        </view>

        <view class="slot-defaultable icon-area-active">
          <view class="slot"><slot name="icon-active"></slot></view>
          <view class="default-slot">
            <text class="wv-icon bi-chevron-up"></text>
          </view>
        </view>
      </view>
    </block>
    
    <view class="wv-collapse-item-title">
      <view class="title-slot">
        <slot name="title"></slot>
      </view>
    </view>
  </view>
  
  <view class="wv-collapse-item-content {{ wvInheritableApply.contentClass? wvInheritableApply.contentClass : '' }}" style="height: {{wvInheritableApply.isActive ? (contentHeight > 0 ? contentHeight + 'px' : 'auto') : '0'}}; {{ wvInheritableApply.duration? 'transition-duration: ' + wvInheritableApply.duration +';' : '' }} {{wvInheritableApply.contentBackground? 'background-color: ' + wvInheritableApply.contentBackground +';' : ''}}">
    <view class="wv-collapse-item-content-inner">
      <slot></slot>
    </view>
  </view>
</view>
