<view class="wrap">
    <custom chineseName="筛选" engName="filter"></custom>
    <view class="filter">
        <view class="card-area" s-for="item, index in headerArray">
            <view class="top-description border-bottom">{{item.title}}</view>
            <view class="content content-{{index}}">
                <smt-filter-header
                    border="{{false}}"
                    font-color="{{item.fontColor}}"
                    icon-color="{{item.iconColor}}"
                    selections="{{item.selections}}"
                    filter-id="{{index + 1}}"
                />
            </view>
        </view>
        <view class="card-area" s-for="item, index in filterData">
            <view class="top-description border-bottom">{{item.title}}</view>
            <view class="content">
                <smt-filter-header
                    data-index="{{index}}"
                    selections="{{item.selections}}"
                    bind:select="selHdl"
                    bind:expand="expandHdl"
                    filter-id="{{index + 6}}"
                />
                <view class="body-wrap">
                    <smt-filter-body
                        s-if="item.type === 'custom'"
                        class="{{item.class || 'filter-body'}}"
                        filter-id="{{index + 6}}"
                        selections="{{item.selections}}">
                        <block slot="custom">
                            <view class="scroll">
                                <view class="custom-content" s-for="item in customTitleArray" key="{{item}}">
                                    <view class="custom-header {{!customData[item].showIcon ? 'no-icon' : ''}}" data-key="{{item}}" bindtap="panelExpandHdl">
                                        <view
                                            s-if="customData[item].label"
                                            class="custom-content-label">{{customData[item].label}}
                                        </view>
                                        <block s-if="customData[item].showIcon">
                                            <gov-icon name="{{customData[item].spread ? 'arrow-up-o' : 'arrow-down-o'}}" color="#ccc" size="25.362rpx"></gov-icon>
                                        </block>
                                    </view>
                                    <view class="checkbox-group-wrap {{
                                                customData[item].spread
                                                ? 'filter-checkbox-default'
                                                : 'filter-checkbox-spread'
                                            }}">
                                        <smt-checkbox-group
                                            s-if="customData[item].type === 'checkbox-group'"
                                            checkbox-group-class="filter-checkbox-group"
                                            column="{{customData[item].column}}"
                                            options="{{customData[item].options}}"
                                            value="{{customData[item].value}}"
                                            data-key="{{item}}"
                                            itemStyle="{{customData[item].itemStyle}}"
                                            bind:change="changeHdl"
                                        />
                                    </view>
                                </view>
                            </view>
                            <view class="submit-panel">
                                <button
                                    class="btn reset"
                                    type="default"
                                    bindtap="resetHdl"
                                    disabled="{{resetDisabled}}"
                                >重置</button>
                                <button
                                    class="btn submit"
                                    type="primary"
                                    bindtap="ensureHdl"
                                >确定</button>
                            </view>
                        </block>
                    </smt-filter-body>
                    <smt-filter-body
                        s-else
                        class="{{item.class || 'filter-body'}}"
                        filter-id="{{index + 6}}"
                        selections="{{item.selections}}"
                    />
                </view>
                <view s-if="item.type === 'fillback'" class="{{item.showFillBackBtn ? '' : 'border-top'}}">
                    <view class="fill-back-tips">
                        将数据“上海市”回填到筛选器一中，数据“东厂社区”回填到筛选器三中
                    </view>
                    <view class="fill-back-button">
                        <button class="fillback-first-btn" data-btn-index="1" bindtap="fillback" type="primary">回填筛选器一</button>
                        <button class="fillback-last-btn" data-btn-index="2" bindtap="fillback" type="primary">回填筛选器三</button>
                    </view>
                </view>
            </view>
        </view>
        <view class="tips">
            注：筛选器展开列表最大高度不能超过1000px
        </view>
    </view>
</view>