<template>
    <view>
        <!-- template grid -->
        <template v-if="compName === 'grid'">
            <view class="template-grid">
                <view class="grid-scroll-container" @touchstart="_handleGridTouchStart" @touchend="_handleGridTouchEnd">
                    <!-- <view id="grid-container-id" class="grid-container {{visibleStreamList.length < 4 ? 'stream-' + visibleStreamList.length : visibleStreamList.length%2 == 0? 'stream-odd':'stream-even'}}"> -->
                    <view id="grid-container-id" :class="'grid-container ' + (visibleStreamList.length < 4 ? 'stream-' + visibleStreamList.length : 'stream-3')">
                        <view
                            :class="
                                'view-container pusher-container ' + (pusher.isVisible && ((gridCurrentPage === 1 && gridPlayerPerPage > 3) || gridPlayerPerPage < 4) ? '' : 'none')
                            "
                        >
                            <live-pusher
                                class="pusher"
                                :url="pusher.url"
                                :mode="pusher.mode"
                                :autopush="pusher.autopush"
                                :enable-camera="pusher.enableCamera"
                                :enable-mic="pusher.enableMic"
                                :muted="!pusher.enableMic"
                                :enable-agc="pusher.enableAgc"
                                :enable-ans="pusher.enableAns"
                                :enable-ear-monitor="pusher.enableEarMonitor"
                                :auto-focus="pusher.enableAutoFocus"
                                :zoom="pusher.enableZoom"
                                :min-bitrate="pusher.minBitrate"
                                :max-bitrate="pusher.maxBitrate"
                                :video-width="pusher.videoWidth"
                                :video-height="pusher.videoHeight"
                                :beauty="pusher.beautyLevel"
                                :whiteness="pusher.whitenessLevel"
                                :orientation="pusher.videoOrientation"
                                :aspect="pusher.videoAspect"
                                :device-position="pusher.frontCamera"
                                :remote-mirror="pusher.enableRemoteMirror"
                                :local-mirror="pusher.localMirror"
                                :background-mute="pusher.enableBackgroundMute"
                                :audio-quality="pusher.audioQuality"
                                :audio-volume-type="pusher.audioVolumeType"
                                :audio-reverb-type="pusher.audioReverbType"
                                :waiting-image="pusher.waitingImage"
                                :debug="debug"
                                @statechange="_pusherStateChangeHandler"
                                @netstatus="_pusherNetStatusHandler"
                                @error="_pusherErrorHandler"
                                @bgmstart="_pusherBGMStartHandler"
                                @bgmprogress="_pusherBGMProgressHandler"
                                @bgmcomplete="_pusherBGMCompleteHandler"
                            />
                            <view class="no-video" v-if="!pusher.enableCamera">
                                <image class="image" src="/static/components/trtc-room/template/grid/static/mute-camera-white.png"></image>
                            </view>
                            <view class="no-audio" v-if="!pusher.enableMic">
                                <image class="image" src="/static/components/trtc-room/template/grid/static/mute-mic-white.png"></image>
                            </view>
                            <view class="operation-bar">
                                <view class="btn-normal" @tap="_switchMemberListPanel">
                                    <image class="btn-image" src="/static/components/trtc-room/template/grid/static/list.png"></image>
                                </view>
                                <view class="btn-normal" @tap="_switchSettingPanel">
                                    <image class="btn-image" src="/static/components/trtc-room/template/grid/static/setting.png"></image>
                                </view>
                                <view class="btn-normal btn-hangup" @tap="_hangUp">
                                    <image class="btn-image" src="/static/components/trtc-room/template/grid/static/hangup.png"></image>
                                </view>

                                <view class="btn-normal" @tap="switchCamera">
                                    <image class="btn-image" src="/static/components/trtc-room/template/grid/static/switch.png"></image>
                                </view>
                                <view class="btn-normal" @tap="_toggleIMPanel">
                                    <image class="btn-image" src="/static/components/trtc-room/template/grid/static/im.png"></image>
                                </view>
                            </view>
                        </view>

                        <view
                            :class="'view-container player-container ' + (item.isVisible ? '' : 'none')"
                            :id="'player-' + item.streamID"
                            :data-userid="item.userID"
                            :data-streamtype="item.streamType"
                            @tap="_doubleTabToggleFullscreen"
                            v-for="(item, index) in visibleStreamList"
                            :key="index"
                        >
                            <live-player
                                class="player"
                                :id="item.streamID"
                                :data-userid="item.userID"
                                :data-streamid="item.streamID"
                                :data-streamtype="item.streamType"
                                :src="item.src"
                                mode="RTC"
                                :autoplay="item.autoplay"
                                :mute-audio="item.muteAudio"
                                :mute-video="item.muteVideo"
                                :orientation="item.orientation"
                                :object-fit="item.objectFit"
                                :background-mute="item.enableBackgroundMute"
                                :min-cache="item.minCache"
                                :max-cache="item.maxCache"
                                :sound-mode="item.soundMode"
                                :enable-recv-message="item.enableRecvMessage"
                                :auto-pause-if-navigate="item.autoPauseIfNavigate"
                                :auto-pause-if-open-native="item.autoPauseIfOpenNative"
                                :debug="debug"
                                @statechange="_playerStateChange"
                                @fullscreenchange="_playerFullscreenChange"
                                @netstatus="_playerNetStatus"
                                @audiovolumenotify="_playerAudioVolumeNotify"
                            />

                            <view class="no-video" v-if="item.muteVideo">
                                <image class="image" src="/static/components/trtc-room/template/grid/static/display-pause-white.png"></image>
                                <view class="text">
                                    <p>{{ item.userID }}</p>
                                </view>
                            </view>

                            <view class="no-video" v-if="!item.hasVideo && !item.muteVideo">
                                <image class="image" src="/static/components/trtc-room/template/grid/static/mute-camera-white.png"></image>
                                <view class="text">
                                    <p>{{ item.userID }}</p>
                                </view>
                                <view class="text">
                                    <p>对方摄像头未打开</p>
                                </view>
                            </view>

                            <view class="no-audio" v-if="!item.hasAudio">
                                <image class="image" src="/static/components/trtc-room/template/grid/static/mute-mic-white.png"></image>
                            </view>

                            <view class="audio-volume" v-if="item.hasAudio">
                                <image class="image" src="/static/components/trtc-room/template/grid/static/micro-open.png"></image>
                                <view class="audio-active" :style="'height:' + item.volume + '%'">
                                    <image class="image" src="/static/components/trtc-room/template/grid/static/audio-active.png"></image>
                                </view>
                            </view>

                            <view class="operation-bar">
                                <view class="btn-normal" @tap.stop.prevent="_handleSubscribeRemoteAudio" :data-user-i-d="item.userID" :data-stream-type="item.streamType">
                                    <image class="btn-image" :src="item.muteAudio ? './static/audio-false.png' : './static/audio-true.png'"></image>
                                </view>
                                <!-- <view class="btn-normal" catchtap="_handleSubscribeRemoteVideo" data-user-i-d="{{item.userID}}" data-stream-type="{{item.streamType}}">
              <image class="btn-image" src="{{item.muteVideo? './static/display-pause-false.png': './static/display-play-true.png'}}"></image>
            </view> -->
                                <view class="btn-normal" @tap="_toggleFullscreen" :data-user-i-d="item.userID" :data-stream-type="item.streamType">
                                    <image class="btn-image" src="/static/components/trtc-room/template/grid/static/fullscreen.png"></image>
                                </view>
                            </view>

                            <!-- <progress class="volume-progress" percent="{{item.volume}}" stroke-width="4"/> -->
                        </view>
                        <view class="view-container player-container player-placeholder" v-for="(item, index) in gridPagePlaceholderStreamList" :key="index">
                            <image class="image" src="/static/components/trtc-room/template/grid/static/mute-camera-white.png"></image>
                        </view>
                    </view>
                </view>
                <!-- <view class="slide-up-tips">
      <image class="image" src="./static/slide-up.png"></image>
      <view class="text">
        <p>上滑查看更多</p>
      </view>
    </view> -->
                <view class="pages-container" v-if="gridPageCount > 1">
                    <view :class="'page-item ' + (index + 1 === gridCurrentPage ? 'current' : '')" v-for="(item, index) in gridPageCount" :key="index"></view>
                </view>
                <view :class="'panel memberlist-panel ' + (panelName === 'memberlist-panel' ? '' : 'none')">
                    <view @tap="_handleMaskerClick" class="close-btn">X</view>
                    <view class="panel-header">成员列表</view>
                    <view class="panel-body">
                        <view class="panel-tips" v-if="streamList.length === 0">暂无成员</view>
                        <scroll-view class="scroll-container" :scroll-y="true">
                            <view class="member-item" v-for="(item, index) in streamList" :key="index">
                                <view class="member-id">{{ item.userID }}</view>

                                <view class="member-btns">
                                    <button
                                        class="btn"
                                        hover-class="btn-hover"
                                        :data-userid="item.userID"
                                        :data-streamtype="item.streamType"
                                        data-key="objectFit"
                                        data-value="fillCrop|contain"
                                        @tap="_setPlayerProperty"
                                    >
                                        {{ item.objectFit === 'fillCrop' ? '填充' : '适应' }}
                                    </button>
                                    <button
                                        class="btn"
                                        hover-class="btn-hover"
                                        :data-userid="item.userID"
                                        :data-streamtype="item.streamType"
                                        data-key="orientation"
                                        data-value="vertical|horizontal"
                                        @tap="_setPlayerProperty"
                                    >
                                        {{ item.orientation === 'vertical' ? '竖屏' : '横屏' }}
                                    </button>
                                    <button
                                        class="btn"
                                        hover-class="btn-hover"
                                        :data-userid="item.userID"
                                        :data-streamtype="item.streamType"
                                        @tap="_switchStreamType"
                                        v-if="item.streamType === 'main'"
                                    >
                                        {{ item._definitionType === 'small' ? '小画面' : '主画面' }}
                                    </button>
                                    <button class="btn" hover-class="btn-hover" :data-userid="item.userID" :data-streamtype="item.streamType" @tap="_handleSnapshotClick">
                                        截屏
                                    </button>
                                </view>
                            </view>
                        </scroll-view>
                    </view>
                </view>
                <view :class="'panel setting-panel ' + (panelName === 'setting-panel' ? '' : 'none')">
                    <view @tap="_handleMaskerClick" class="close-btn">X</view>
                    <view class="panel-header">推流设置</view>
                    <view class="panel-body">
                        <scroll-view class="scroll-container" :scroll-y="true">
                            <view class="setting-option">
                                <view class="label">启用摄像头</view>
                                <view class="btn-normal" @tap="_toggleVideo">
                                    <image class="btn-image" :src="pusher.enableCamera ? './static/camera-true.png' : './static/camera-false.png'"></image>
                                </view>
                            </view>
                            <view class="setting-option">
                                <view class="label">启用麦克风</view>
                                <view class="btn-normal" @tap="_toggleAudio">
                                    <image class="btn-image" :src="pusher.enableMic ? './static/audio-true.png' : './static/audio-false.png'"></image>
                                </view>
                            </view>
                            <!-- <view class="setting-option">
          <view class="label">切换摄像头</view>
          <view class="btn-normal" bindtap="switchCamera" >
            <image class="btn-image" src="./static/switch.png"></image>
          </view>
        </view> -->
                            <!-- <view class='setting-option'>
          <view class="label">开启美颜</view>
          <switch class="setting-switch" color="#006eff" checked="{{pusher.beautyLevel == 9 ? true: false}}" data-key="beautyLevel" data-value="9|0" data-value-type="number" bindchange="_setPuserProperty"/>
        </view> -->
                            <view class="setting-option">
                                <view class="label">开启AGC</view>
                                <switch
                                    class="setting-switch"
                                    color="#006eff"
                                    :checked="pusher.enableAgc"
                                    data-key="enableAgc"
                                    :data-value="true"
                                    data-value-type="boolean"
                                    @change="_setPuserProperty"
                                />
                            </view>
                            <view class="setting-option">
                                <view class="label">开启ANS</view>
                                <switch
                                    class="setting-switch"
                                    color="#006eff"
                                    :checked="pusher.enableAns"
                                    data-key="enableAns"
                                    :data-value="true"
                                    data-value-type="boolean"
                                    @change="_setPuserProperty"
                                />
                            </view>
                            <view class="setting-option">
                                <view class="label">开启横屏推流</view>
                                <switch
                                    class="setting-switch"
                                    color="#006eff"
                                    :checked="pusher.videoOrientation === 'vertical' ? false : true"
                                    data-key="videoOrientation"
                                    data-value="horizontal|vertical"
                                    data-value-type="string"
                                    @change="_setPuserProperty"
                                />
                            </view>
                        </scroll-view>
                    </view>
                </view>
                <view :class="'masker ' + (panelName == '' ? 'none' : '')" @tap="_handleMaskerClick"></view>
            </view>
        </template>
    </view>
</template>

<script>
export default {
    props: ['data', 'compName'],
    computed: {
        visibleStreamList() {
            return this.data.visibleStreamList;
        },
        pusher() {
            return this.data.pusher;
        },
        gridCurrentPage() {
            return this.data.gridCurrentPage;
        },
        gridPlayerPerPage() {
            return this.data.gridPlayerPerPage;
        },
        debug() {
            return this.data.debug;
        },
        item() {
            return this.data.item;
        },
        index() {
            return this.data.index;
        },
        gridPagePlaceholderStreamList() {
            return this.data.gridPagePlaceholderStreamList;
        },
        gridPageCount() {
            return this.data.gridPageCount;
        },
        panelName() {
            return this.data.panelName;
        },
        streamList() {
            return this.data.streamList;
        },
        _handleGridTouchStart() {
            return this.data._handleGridTouchStart;
        },
        _handleGridTouchEnd() {
            return this.data._handleGridTouchEnd;
        },
        _pusherStateChangeHandler() {
            return this.data._pusherStateChangeHandler;
        },
        _pusherNetStatusHandler() {
            return this.data._pusherNetStatusHandler;
        },
        _pusherErrorHandler() {
            return this.data._pusherErrorHandler;
        },
        _pusherBGMStartHandler() {
            return this.data._pusherBGMStartHandler;
        },
        _pusherBGMProgressHandler() {
            return this.data._pusherBGMProgressHandler;
        },
        _pusherBGMCompleteHandler() {
            return this.data._pusherBGMCompleteHandler;
        },
        _switchMemberListPanel() {
            return this.data._switchMemberListPanel;
        },
        _switchSettingPanel() {
            return this.data._switchSettingPanel;
        },
        _hangUp() {
            return this.data._hangUp;
        },
        switchCamera() {
            return this.data.switchCamera;
        },
        _toggleIMPanel() {
            return this.data._toggleIMPanel;
        },
        _doubleTabToggleFullscreen() {
            return this.data._doubleTabToggleFullscreen;
        },
        _playerStateChange() {
            return this.data._playerStateChange;
        },
        _playerFullscreenChange() {
            return this.data._playerFullscreenChange;
        },
        _playerNetStatus() {
            return this.data._playerNetStatus;
        },
        _playerAudioVolumeNotify() {
            return this.data._playerAudioVolumeNotify;
        },
        _handleSubscribeRemoteAudio() {
            return this.data._handleSubscribeRemoteAudio;
        },
        _toggleFullscreen() {
            return this.data._toggleFullscreen;
        },
        _handleMaskerClick() {
            return this.data._handleMaskerClick;
        },
        _setPlayerProperty() {
            return this.data._setPlayerProperty;
        },
        _switchStreamType() {
            return this.data._switchStreamType;
        },
        _handleSnapshotClick() {
            return this.data._handleSnapshotClick;
        },
        _toggleVideo() {
            return this.data._toggleVideo;
        },
        _toggleAudio() {
            return this.data._toggleAudio;
        },
        _setPuserProperty() {
            return this.data._setPuserProperty;
        }
    }
};
</script>
<style>
/* 9人 会议模版 */
.template-grid {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    /* display: flex;
  flex-direction: row;
  flex-wrap: wrap; */
}
.template-grid .grid-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.template-grid .grid-scroll-container {
    width: 100vw;
    height: 100vh;
    /* box-sizing: border-box; */
    background-color: #000;
}
.grid-containe.overflow {
    height: auto;
}
.template-grid .view-container {
    position: relative;
}

.stream-0 .view-container {
    width: 100%;
    height: 100%;
}

.stream-1 .view-container {
    width: 100vw;
    height: 50vh;
}

.stream-2 .view-container {
    width: 50vw;
    height: 50vh;
}

.stream-2 .view-container:nth-child(1) {
    width: 100vw;
    height: 50vh;
}

.stream-3 .view-container {
    width: 50vw;
    height: 50vh;
}

.stream-4 .view-container {
    width: 50vw;
    height: 33.3vh;
}

.stream-4 .view-container:nth-child(1) {
    width: 100vw;
    height: 33.3vh;
}

.stream-5 .view-container {
    width: 50vw;
    height: 33.3vh;
}

.stream-6 .view-container {
    width: 33.3vw;
    height: 33.3vh;
}

.stream-6 .view-container:nth-child(1) {
    width: 100vw;
    height: 33.3vh;
}

.stream-7 .view-container {
    width: 33.3vw;
    height: 33.3vh;
}

.stream-7 .view-container:nth-child(1) {
    width: 50vw;
    height: 33.3vh;
}

.stream-7 .view-container:nth-child(2) {
    width: 50vw;
    height: 33.3vh;
}

.stream-8 .view-container {
    width: 33.3vw;
    height: 33.3vh;
}

.stream-even .view-container {
    width: 50vw;
    height: 50vh;
}

.stream-odd .view-container {
    width: 50vw;
    height: 50vh;
}
.stream-odd .view-container:last-child {
    width: 100vw;
    height: 50vh;
}

.template-grid .operation-bar {
    position: absolute;
    bottom: 5%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.template-grid .volume-progress {
    width: 100%;
    position: absolute;
    bottom: 0;
}

.template-grid .btn-normal {
    width: 100rpx;
    height: 100rpx;
    margin-right: 20rpx;
    box-sizing: border-box;
    display: flex;
    background: rgba(255, 255, 255, 1);
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.template-grid .btn-normal:last-of-type {
    margin-right: 0;
}

.template-grid .btn-normal .btn-image {
    width: 50rpx;
    height: 50rpx;
}

.template-grid .btn-hangup {
    background: #f75c45;
}

.template-grid .panel {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    width: 80vw;
    height: auto;
    z-index: 999;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    color: white;
    display: flex;
    flex-direction: column;
    padding: 20rpx 0;
    border-radius: 10rpx;
    box-sizing: border-box;
}
.panel .close-btn {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px 10px;
}
.panel .panel-header {
    text-align: center;
    padding-bottom: 20rpx;
}
.panel .panel-tips {
    color: #999;
    text-align: center;
}
.panel .panel-body {
    flex: 1;
    height: 40vh;
}
.panel .panel-body .scroll-container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.memberlist-panel .member-item {
    display: flex;
    /* border-bottom: 1px solid #999; */
    margin: 16rpx 16rpx 16rpx 32rpx;
}

.memberlist-panel .member-id {
    width: 30%;
    font-size: 12px;
    line-height: 64rpx;
}

.memberlist-panel .member-btns {
    width: 70%;
    display: flex;
    justify-content: flex-end;
}
.memberlist-panel .member-btns .btn-normal {
    margin-left: 0;
}
.memberlist-panel .member-btns .btn {
    margin-right: 0;
}
.setting-panel .setting-option {
    display: flex;
    justify-content: space-between;
    margin: 16rpx 16rpx 16rpx 32rpx;
    /* box-sizing: border-box;
  padding: 12rpx 16rpx 12rpx 32rpx; */
}
.setting-panel .setting-option .label {
    line-height: 64rpx;
}
/* .setting-panel .setting-option .btn-normal{
  margin-right: 0;
} */
.setting-panel .setting-switch {
    transform: scale(0.8);
    margin-right: -12rpx;
}
.template-grid .masker {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
}

.template-grid .no-stream,
.template-grid .no-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4);
    font-size: 12px;
}
.template-grid .audio-volume,
.template-grid .no-audio {
    position: absolute;
    top: 20rpx;
    left: 20rpx;
    width: 36rpx;
    height: 36rpx;
}

.no-stream .image,
.no-video .image {
    width: 60rpx;
    height: 60rpx;
}

.audio-volume .image,
.no-audio .image {
    width: 36rpx;
    height: 36rpx;
    position: absolute; /*android 的bug ，image absolute后会向上漂移几个像素，如果要对其必须都设置absolute*/
}

.audio-active {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
}
.audio-active .image {
    bottom: 0;
}

.slide-up-tips {
    position: absolute;
    bottom: -100rpx;
    left: 50%;
    transform: translate(-50%, 0);
    width: 200rpx;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 12px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    padding: 20rpx;
    border-radius: 10rpx;
    opacity: 0;
}
.slide-up-tips .image {
    width: 100rpx;
    height: 100rpx;
}
.player-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.player-placeholder .image {
    width: 100rpx;
    height: 100rpx;
}

.pages-container {
    width: auto;
    left: 50%;
    transform: translate(-50%, 0);
    height: 20rpx;
    position: absolute;
    bottom: 12%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.pages-container .page-item {
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    margin: 0 8rpx;
    background-color: rgb(99, 99, 99, 0.5);
}
.pages-container .page-item.current {
    background-color: #fff;
}
</style>
