<view class="group">
    <view class="top-bar" s-if="{{fixTopBar}}">
        <view class="fixTopBarBlock" style="height:{{statusBarHeight}}px" animation="{{animationData}}"></view>
        <view animation="{{animationData}}" class="fixTopBar" style="top:{{statusBarHeight}}">
            <view class="flex">
                <view class="fixTopBarText">智能小程序示例</view>
            </view>
        </view>
    </view>
    <view class="group-hd" style="margin-top:{{statusBarHeight}}px">
        <image mode="widthFix" class="group-logo" src="https://b.bdstatic.com/searchbox/icms/searchbox/img/logo_intact.png"></image>
    </view>
    <view class="search">
        <view class="search-box" bindtap="openSearch">
            <view class="search-icon"></view>
            <text>搜索小程序能力</text>
        </view>
    </view>
    <view class="card-area">
        <view class="border-bottom">
            <tabs active-name="{{activeName}}"
                  tabs-background-color="#fff"
                  tabs-active-text-color="#000"
                  tabs-inactive-text-color="#999999"
                  tabs-underline-color="#3388FF"
                  bindtabchange="tabsChange">
                <tab-item s-for="tab in tabs" name="{{tab.name}}" label="{{tab.label}}" />
            </tabs>
        </view>
        <view s-if="serviceSupport">
            <view s-for="item, index in SmartUIItem">
                <view class="item border-bottom {{item.open ? '' : 'item-close'}}" bind:tap="toggleClick" data-index="{{index}}" data-componentId="{{item.id}}">
                    <image class="item-logo" src="{{item.icon}}"></image>
                    <text class="item-desc">{{item.name}}</text>
                    <image s-if="item.id" class="item-logo item-toggle" src="https://b.bdstatic.com/searchbox/icms/searchbox/img/right_arrow.png"></image>
                    <image s-else class="item-logo item-toggle" src="{{item.open ? 'https://b.bdstatic.com/searchbox/icms/searchbox/img/close_small.png' : 'https://b.bdstatic.com/searchbox/icms/searchbox/img/open.png'}}"></image>
                </view>
                <view s-if="item.open">
                    <view hover-class="hover" s-for="subItem in item.list" bind:tap="oneItemClick" data-id="{{subItem.id}}">
                        <view class="sub-item">
                            <text class="sub-item-desc">{{subItem.subName}}</text>
                            <text class="sub-item-desc-tra">{{subItem.subNameTra}}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view s-else>
            <view s-for="item, index in serviceSupportItem">
                <view class="item border-bottom {{item.open ? '' : 'item-close'}}" bind:tap="toggleClick" data-index="{{index}}" data-componentId="{{item.id}}">
                    <image class="item-logo" src="{{item.icon}}"></image>
                    <text class="item-desc">{{item.name}}</text>
                    <image s-if="item.id" class="item-logo item-toggle" src="https://b.bdstatic.com/searchbox/icms/searchbox/img/right_arrow.png"></image>
                    <image s-else class="item-logo item-toggle" src="{{item.open ? 'https://b.bdstatic.com/searchbox/icms/searchbox/img/close_small.png' : 'https://b.bdstatic.com/searchbox/icms/searchbox/img/open.png'}}"></image>
                </view>
                <view s-if="item.open">
                    <view hover-class="hover" s-for="subItem in item.list" bind:tap="oneItemClick" data-id="{{subItem.id}}">
                        <view class="sub-item">
                            <text class="sub-item-desc">{{subItem.subName}}</text>
                            <text class="sub-item-desc-tra">{{subItem.subNameTra}}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</view>
