<template>
	<view class="webview-box">
		<view v-if="!isChanneShow" class="loading-box">
			<u-loading size="100" :show="true"></u-loading>
			<view>加载中。。。</view>
		</view>
		<u-empty v-if="isChanneShow" text="视频通道为空" mode="list"></u-empty>
		<web-view v-if="isWebview" :src="webviewUrl"></web-view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				isWebview:false,
				deviceObj:null,
				channeList:[],
				webviewHost:'',
				webviewUrl:'',
				isChanneShow:false,
			}
		},
		onLoad(option) {
			let configList = uni.getStorageSync('configList');
			let configIndex = uni.getStorageSync('configIndex');
			this.webviewHost = configList[configIndex].protocol + configList[configIndex].address;
			this.webviewUrl = configList[configIndex].protocol + configList[configIndex].address + '/video/web/h5/index.html';
			// this.webviewUrl = 'http://192.168.31.39:5501/index.html'
			console.log("option",option)
			let deviceObj = JSON.parse(decodeURIComponent(option.deviceObj));
			this.deviceObj = deviceObj;
			this.getChanneList(deviceObj.id)
		},
		methods:{
			getChanneList(id){
				console.log("id",id)
				this.$api.videoApi.getVideoChannelList({pid: id,page:1,pageSize:999}).then(res => {
					if(res.code == 0){
						// res.data.list = null;
						if(res.data.list && res.data.list.length>0){
							let channeList = res.data.list||[];
							// let arr = channeList.map(item=>{
							// 	return {
							// 		channeId:item.channeId,
							// 		name:item.name,
							// 		hdlUrl:item.hdlUrl,
							// 	}
							// })
							this.$nextTick(()=>{
								this.$set(this,'channeList',res.data.list);
								let url = this.webviewHost + '/video/web/h5/index.html?deviceObj=' + encodeURIComponent(JSON.stringify(this.deviceObj)) + '&channeList='+encodeURIComponent(JSON.stringify(channeList))
								// let url = 'http://192.168.31.39:5501/index.html?deviceObj=' + encodeURIComponent(JSON.stringify(this.deviceObj)) + '&channeList='+encodeURIComponent(JSON.stringify(channeList))
								this.$set(this,'webviewUrl',url);
								this.isWebview = true;
							})
						}else{
							this.isChanneShow = true;
							this.$u.toast('通道为空');
							this.$nextTick(()=>{
								this.$set(this,'channeList',[])
							})
						}
						
					}else{
						this.$u.toast(res.msg);
					}
				}, error => {
					this.$u.toast('服务器开小差了呢，请您稍后再试')
				})
			},
		}
	}
</script>
<style>
	page{
		height: 100%;
	}
</style>

<style scoped lang="less">
	.webview-box{
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.loading-box{
		position: absolute;
		left: auto;
		right: auto;
		top: auto;
		bottom: auto;
		text-align: center;
		>view{
			font-size: 30rpx;
			line-height: 80rpx;
		}
	}
</style>