<view class="collapse-wrap">
    <view class="collapse-item-title-wrap" bindtap="collapseHandler">
        <view class="collapse-item-title">
            <view class="collapse-item-title-content gov-collapse-title">{{ title }}</view>
            <view s-if="{{ desc }}" class="collapse-item-title-desc gov-collapse-desc">{{ desc }}</view>
            <view s-if="{{ subTitle }}" class="collapse-item-title-desc gov-collapse-sub-title">{{ subTitle }}</view>
        </view>
        <view s-if="{{ mode === 'list-box' && content }}"
            class="collapse-item-sub-title"
            <text>{{ content }}</text>
        </view>
        <gov-icon
            class="collapse-item-arrow-down {{ expand ? 'collapse-item-arrow-up' : '' }}"
            name="arrow-down-o"
            color="#ccc"
            size="32.609rpx"
        ></gov-icon>
    </view>
    <view s-if="{{isCustomCon}}" class="{{ expand ? 'collapse-item-show-custom' : 'collapse-item-content' }}">
        <slot></slot>
    </view>
    <view
        s-else
        class="
            gov-collapse-custom collapse-item-content
            {{ expand ? 'collapse-item-show-content' : '' }}
            {{ mode === 'list-box' && 'gov-list-item' }}
            {{ mode === 'grid-box' && 'gov-margin' }}
        "
    >
        <view class="list-box" s-if="{{ mode === 'list-box' }}">
            <gov-list-item
                gov-list-item="collapse-item-list-item"
                gov-label="gov-label-gray"
                gov-content="gov-content-gray"
                s-for="item, index in dataSource"
                label="{{ item.text }}"
                content="{{ item.value }}"
                label-width="120px"
                border="{{ index !== dataSource.length - 1 }}"
            >
            </gov-list-item>
        </view>
        <block s-elif="{{ mode === 'grid-box' }}">
            <gov-list-item
                s-for="item, index in dataSource"
                data-id="{{ index }}"
                label-width="100px"
                label="{{ item.text }}"
                bindtap="itemHandler"
                gov-label="gov-label"
                gov-content="gov-content-text"
            >
                <view
                    class="item-text"
                    style="{{ item.color ? 'color:' + item.color : '' }}"
                    slot="right"
                >{{ item.value }}</view>
            </gov-list-item>
        </block>
        <view s-else class="item-default-text">
            <slot></slot>        
        </view>
    </view>
    <view class="{{ mode === 'list-box' && expand ? '' : 'item-border' }}"></view>
</view>
