<template>
	<div class="page-box" @touchmove.stop.prevent>
		<div class="live">
			<div class="top-list-box m-carousel-dvertising" v-if="advertTop.status && advertTop.list.length">
				<advert-top></advert-top>
			</div>
			<div class="player-box">
				<player-box></player-box>
			</div>
			<div class="camera-box" v-if="channelInfo.cameraShowStatus == 1" @touchmove.stop>
				<camera-box></camera-box>
			</div>
			<div class="tab-list-box">
				<menus-tab v-model="menusActive"></menus-tab>
			</div>
			<div class="middle-list-box" v-if="advertMiddle.status && advertMiddle.list.length">
				<advert-middle></advert-middle>
			</div>
			<div class="content-box" @touchmove.stop>
				<div class="text-box" v-if="advertText.status && advertText.words">
					<advert-text></advert-text>
				</div>
				<div class="menu-list-box">
					<menus-list v-model="menusActive"></menus-list>
				</div>
				<red-box></red-box>
				<auth-box v-if="channelInfo.needPay == 1"></auth-box>
			</div>
			<transition name="fade">
				<share-box></share-box>
			</transition>
			<transition name="fade">
				<follow-box></follow-box>
			</transition>
		</div>
		<login-box></login-box>
		<!--欢迎页-->
		<welcome-box v-if="welcomeInfo.imgState == 1"></welcome-box>
		<!--加密直播-->
		<transition name="fade">
			<encrypt-box></encrypt-box>
		</transition>
	</div>
</template>
<script>
    import { mapGetters,mapMutations } from 'vuex'
    const advertTop = resolve => require(['@/components/modules/advert/top'],resolve)
    const advertMiddle = resolve => require(['@/components/modules/advert/middle'],resolve)
    const advertText = resolve => require(['@/components/modules/advert/text'],resolve)
    const welcomeBox = resolve => require(['@/components/modules/welcome/index'],resolve)
    const shareBox = resolve => require(['@/components/modules/share/index'],resolve)
    const authBox = resolve => require(['@/components/modules/auth/index'],resolve)
    const cameraBox = resolve => require(['@/components/modules/camera/indexWap'],resolve)
    const followBox = resolve => require(['@/components/modules/follow/index'],resolve)
    const redBox = resolve => require(['@/components/modules/red/indexWap'],resolve)
    import playerBox from '@/components/modules/player/indexWap'
    import menusTab from '@/components/modules/menus/tabWap'
    import menusList from '@/components/modules/menus/listWap'
    import loginBox from '@/components/modules/login/index'
    import encryptBox from '@/components/modules/encrypt/index'

	export default{
		components: {
			advertTop,
			advertMiddle,
			advertText,
			playerBox,
			menusTab,
			menusList,
			cameraBox,
			welcomeBox,
			loginBox,
			shareBox,
			redBox,
			followBox,
			authBox,
			encryptBox
		},
		data(){
			return {
				menusActive: 0
			}
		},
		computed: {
            ...mapGetters({
            	'welcomeInfo': 'welcomeInfo',
                'channelInfo': 'channelInfo',
                'advertTop': 'advertTop',
                'advertMiddle': 'advertMiddle',
                'advertText': 'advertText',
            })
        },
        mounted(){
        	
        },
        methods: {
        	
        },
	}
</script>
<style lang="less" scoped>
	.page-box{
		width: 100vw;
		height: 100vh;
		
		.live{
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
	}
	.live{
		display: flex;
		flex-direction: column;
		.top-list-box{
			flex: 0 0 auto;
		}
		.player-box{
			flex: 0 0 auto;
		}
		.camera-box{
			flex: 0 0 auto;
		}
		.middle-list-box{
			flex: 0 0 auto;
		}
		.tab-list-box{
			flex: 0 0 auto;
		}
		.content-box{
			flex: 1;
			display: flex;
			position: relative;

			.text-box{
				position: absolute;
				top: 0;
				left: 0;
				z-index: 300;
				width: 100%;
			}
			.menu-list-box{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
			}
		}
	}
</style>



