<view class="multiroom-container {{visibleStreamList.length < 6 ? 'stream-' + visibleStreamList.length : 'stream-7'}}">
    <rtc-room
        class="rtc-room"
        id="multiRoom"
        enable-camera="{{enableCamera}}"
        enable-auto-focus="{{enableAutoFocus}}"
        device-position="{{devicePosition}}"
        enable-mic="{{enableMic}}"
        enable-agc="{{enableAgc}}"
        enable-ans="{{enableAns}}"
        bitrate="{{bitrate}}"
        video-width="{{videoWidth}}"
        video-height="{{videoHeight}}"
        local-mirror="{{localMirror}}"
        sound-mode="{{soundMode}}"
        bindstatechange="handleStateChange"
        binderror="handleError">
        <rtc-room-item type="local" user-id="{{localUserId}}" class="view-container pusher-container">
            <view class="voice-container" style="margin-top: {{statusBarHeight + (navigationBarHeight-60)/2}}px">
                <image class="voice-icon {{enableMic ? voice-icon-on : 'voice-icon-off'}}"></image>
            </view>
            <view class="operation-bar">         
                <view class="btn-normal" bindtap="switchMemberListPanel">
                    <image
                        class="btn-image"
                        src="https://b.bdstatic.com/searchbox/icms/searchbox/img/list-icon.png">
                    </image>
                </view>
                <view class="btn-normal btn-hangup" bindtap="hangUp">
                    <image
                        class="btn-image"
                        src="https://b.bdstatic.com/searchbox/icms/searchbox/img/hangup.png">
                    </image>
                </view>
                <view class="btn-normal" bindtap="switchSettingPanel">
                    <image
                        class="btn-image"
                        src="https://b.bdstatic.com/searchbox/icms/searchbox/img/setting-icon.png">
                    </image>
                </view>
            </view>
            <view s-if="{{!enableCamera}}" class="camera-off-mask">
                <view class="camera-off-container">
                    <image
                        class="camera-off-image"
                        src="https://b.bdstatic.com/searchbox/icms/searchbox/img/off-camera.png">
                    </image>
                    <view class="camera-off-text">本地摄像头未打开</view>
                </view>
            </view>
        </rtc-room-item>
        <view s-for="item in visibleStreamList trackBy item.userId">
            <rtc-room-item
                type="remote"
                user-id="{{item.userId}}"
                class="view-container remote-view {{item.fullscreen ? 'full' : ''}}">
                <view class="voice-container" style="margin-top:{{statusBarHeight + (navigationBarHeight-60)/2}}px">
                    <image class="voice-icon {{enableMic ? voice-icon-on : 'voice-icon-off'}}"></image>
                </view>
                <view class="operation-bar">
                    <view class="btn-normal {{!item.playAudio ? 'btn-active' : ''}}" data-user-id="{{item.userId}}" bindtap="handleSubscribeRemoteAudio">
                        <image
                            class="btn-image"
                            src="{{item.playAudio
                                ? 'https://b.bdstatic.com/searchbox/icms/searchbox/img/speaker-on.png'
                                : 'https://b.bdstatic.com/searchbox/icms/searchbox/img/speaker-off.png'}}">
                        </image>
                    </view>
                    <view class="btn-normal {{!item.playVideo ? 'btn-active' : ''}}" data-user-id="{{item.userId}}" bindtap="handleSubscribeRemoteVideo">
                        <image
                            class="btn-image"
                            src="{{item.playVideo
                                ? 'https://b.bdstatic.com/searchbox/icms/searchbox/img/pause-icon.png'
                                : 'https://b.bdstatic.com/searchbox/icms/searchbox/img/play-icon.png'}}">
                        </image>
                    </view>
                    <view class="btn-normal {{item.fullscreen ? 'btn-active' : ''}}" data-user-id="{{item.userId}}" bindtap="toggleFullscreen">
                        <image
                            class="btn-image"
                            src="{{item.fullscreen
                                ? 'https://b.bdstatic.com/searchbox/icms/searchbox/img/full-off.png'
                                : 'https://b.bdstatic.com/searchbox/icms/searchbox/img/full-on.png'}}">
                        </image>
                    </view>
                </view>
                <view s-if="{{!item.playVideo}}" class="pause-mask">
                    <view class="pause-content">{{item.userId}}视频已暂停</view>
                </view>
            </rtc-room-item>
        </view>
    </rtc-room>
    <view class="panel setting-panel {{panelName === 'setting-panel' ? '' : 'none'}} swan-security-padding-bottom">
        <view class="panel-header">本地设置</view>
        <view class="panel-body">
            <scroll-view class="scroll-container" scroll-y="true">
            <view class="panel-section">
                <view class="setting-option">
                    <view class="label">摄像头</view>
                    <switch class="setting-switch" checked="{{enableCamera}}" data-key="enableCamera" bindchange="setPusherProperty"/>
                </view>
                <view class="setting-option">
                    <view class="label">后置摄像头</view>
                    <switch class="setting-switch" checked="{{devicePosition == 'back' ? true : false}}" data-key="devicePosition" bindchange="setPusherProperty"/>
                </view>
            </view>
            <view class="panel-section">
                <view class="setting-option">
                    <view class="label">麦克风</view>
                    <switch class="setting-switch" checked="{{enableMic}}" data-key="enableMic" bindchange="setPusherProperty"/>
                </view>
            </view>
            <view class="panel-section">
                <view class="setting-option">
                    <view class="label">噪声抑制</view>
                    <switch class="setting-switch" checked="{{enableAgc}}" data-key="enableAgc" data-value="true" bindchange="setPusherProperty"/>
                </view>
                <view class="setting-option">
                    <view class="label">自动增益</view>
                    <switch class="setting-switch" checked="{{enableAns}}" data-key="enableAns" data-value="true" bindchange="setPusherProperty"/>
                </view>
            </view>
            </scroll-view>
        </view>
    </view>
    <view class="panel memberlist-panel {{panelName === 'memberlist-panel' ? '' : 'none'}}">
        <view class="panel-header">成员列表</view>
        <view class="panel-body">
            <view class="panel-tips" s-if="{{visibleStreamList.length === 0}}">暂无成员</view>
            <scroll-view class="scroll-container" scroll-y="true">
                <view class="member-item" s-for="item in visibleStreamList">
                    <view class="member-id">{{item.userId}}</view>
                </view>
            </scroll-view>
        </view>
    </view>
    <view class="panel-mask {{panelName === '' ? 'none' : ''}}" bindtap="handleMaskerClick"></view>
</view>