<template>
	<view class="webview-box">
		<view  class="loading-box">
			<u-loading size="100" :show="true"></u-loading>
			<view>加载中。。。</view>
		</view>
		<web-view v-if="isWebview" :src="webviewUrl"></web-view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				isWebview:false,
				deviceObj:null,
				channeList:[],
				webviewUrl:'https://static-mp-e1ad9848-99ba-4f1e-84ca-72802ff6ff6e.next.bspapp.com/video-html/index.html'
			}
		},
		onLoad(option) {
			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){
						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 = 'https://static-mp-e1ad9848-99ba-4f1e-84ca-72802ff6ff6e.next.bspapp.com/video-html/index.html?deviceObj=' + encodeURIComponent(JSON.stringify(this.deviceObj)) + '&channeList='+encodeURIComponent(JSON.stringify(channeList))
								this.$set(this,'webviewUrl',url);
								this.isWebview = true;
							})
						}else{
							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>