<!-- component/FMScrollGroupsControl/FMScrollGroupsControl.wxml -->
<view class='fm-control-groups'>
    <cover-view class="fm-control-groups-layer fm-btn-layer" style="padding: 20rpx; cursor: pointer;" bindtap="switchLayers">
        <cover-image wx:if="{{!allLayer}}" src="{{btnUrl}}layer.png" style="width: 44rpx; height: 44rpx;"></cover-image>
        <cover-image wx:else src="{{btnUrl}}layers.png" style="width: 44rpx; height: 44rpx;"></cover-image>
    </cover-view>
    <cover-view wx:if="{{needArrow}}" bindtap="goTop" class="scroll" style="height: 18px; cursor: pointer;">
        <cover-image wx:if="{{!isTop}}" src="{{btnUrl}}arrow1.png" style="width: 20rpx; height: 12rpx; margin-left:32rpx"></cover-image>
        <cover-image wx:else src="{{btnUrl}}arrow3.png" style="width: 20rpx; height: 12rpx; margin-left:32rpx"></cover-image>
    </cover-view>
    <scroll-view class="fm-layer-list" scroll-y="true" style="overflow: hidden; height: {{scrollHeight}}rpx;" scroll-into-view="gid_{{focusGroupID}}" scroll-with-animation="true">
        <view wx:for="{{groupIDs}}" wx:key="key">
            <view id="gid_{{item.gid}}" style="display: inline-block; text-align: center; width: 84rpx; height: 84rpx; line-height: 84rpx; margin: 0px; cursor: pointer; font-size: 0.8em; font-weight: bold; color: rgb(102, 102, 102);" bindtap="switchGroup" data-gid="{{item.gid}}">
                <view style="color:{{focusGroupID == item.gid ? 'rgb(30, 130, 250)':'rgb(102, 102, 102)'}};text-transform: uppercase;">
                    {{item.gname}}
                </view>
            </view>
            <view wx:if="{{item.gid !== 1}}" style="height: 1px; border-top: 1px solid rgba(153, 153, 153, 0.45); border-right: none; border-bottom: none; border-left: none; border-image: initial; width: 60%; margin: 0px 20%;"></view>
        </view>
    </scroll-view>
    <cover-view wx:if="{{needArrow}}" class="scroll" style="height: 18px; cursor: pointer;">
        <cover-image wx:if="{{!isBottom}}" bindtap="goBottom" src="{{btnUrl}}arrow2.png" style="width: 20rpx; height: 12rpx; margin-left:32rpx"></cover-image>
        <cover-image wx:else src="{{btnUrl}}arrow4.png" style="width: 20rpx; height: 12rpx; margin-left:32rpx"></cover-image>
    </cover-view>
</view>