<template>
    <view>
        <!-- template custom -->
        <template v-if="compName === 'custom'">
            <view class="template-custom">
                <view class="players-container">
                    <view
                        v-if="item.src && (item.hasVideo || item.hasAudio)"
                        :class="'view-container player-container ' + (item.isVisible ? '' : 'none')"
                        :style="'left:' + item.xAxis + ';top:' + item.yAxis + ';width:' + item.width + ';height:' + item.height + ';z-index:' + item.zIndex + ';'"
                        v-for="(item, index) in streamList"
                        :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="item.mode"
                            :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>
                </view>
                <view
                    :class="'view-container pusher-container ' + (pusher.isVisible ? '' : 'none')"
                    :style="'left:' + pusher.xAxis + ';top:' + pusher.yAxis + ';width:' + pusher.width + ';height:' + pusher.height + ';zindex:' + pusher.zindex + ';'"
                >
                    <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>
            </view>
        </template>
    </view>
</template>

<script>
export default {
    props: ['data', 'compName'],
    computed: {
        item() {
            return this.data.item;
        },
        streamList() {
            return this.data.streamList;
        },
        index() {
            return this.data.index;
        },
        debug() {
            return this.data.debug;
        },
        pusher() {
            return this.data.pusher;
        },
        _playerStateChange() {
            return this.data._playerStateChange;
        },
        _playerFullscreenChange() {
            return this.data._playerFullscreenChange;
        },
        _playerNetStatus() {
            return this.data._playerNetStatus;
        },
        _playerAudioVolumeNotify() {
            return this.data._playerAudioVolumeNotify;
        },
        _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;
        }
    }
};
</script>
<style>
/* 通过方法自定义模式 */
.template-custom {
    /* 绝对定位模式 pusher 和 player 都用绝对定位*/
    width: 100vw;
    height: 100vh;
    position: relative;
}
.template-custom .pusher-container,
.template-custom .player-container {
    position: absolute;
}
</style>
