<template>
	<view class="video-list-box">
		<mescroll-body ref="mescrollRef"  @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
			<view class="video-list">
				<view class="video-item" v-for="(item,index) in dataList" :key="item.id">
					<view class="item-header">
						<view class="item-header-left">
							设备编号：{{item.deviceId}}
						</view>
						<view class="item-header-right" :style="{color:item.status==1?'#52c41a':'#ff4d4f'}">
							{{item.status==1?'启用':'禁用'}}
						</view>
					</view>
					<view class="item-content">
						<view class="content-title-box">
							<view class="content-title-box-left">
								<view class="iconfont icon-jiankong"></view>
							</view>
							<view class="content-title-box-right">
								<view class="content-title-txt">
									{{item.name}}
								</view>
								<view class="content-title-info">
									设备型号：{{item.model||'-'}}
								</view>
							</view>
						</view>
						<view class="item-content-list">
							<view class="item-content-list-left">
								<view class="item-content-item">
									设备类型：{{item.deviceType||'-'}}
								</view>
								<view class="item-content-item">
									提供商：{{item.provider||'-'}}
								</view>
								<view class="item-content-item">
									厂家：{{item.manufacturer||'-'}}
								</view>
								<view class="item-content-item">
									创建时间：{{item.createdAt}}
								</view>
							</view>
							<view class="item-content-list-right">
								<u-button type="primary" size="mini" :custom-style="customStyle" @click="getChanneList(item.id,index)">查询通道</u-button>
							</view>
						</view>
					</view>
					<view class="item-footer" v-if="item.channelList && item.channelList.length>0">
						<view class="channel-item" v-for="(val,i) in item.channelList" :key="val.id">
							<view class="channel-item-left">
								<view class="iconfont icon-video-camera"></view>
								<view class="channel-name">
									{{val.name}}
								</view>
								<view class="channel-status" :style="{color:val.status==1?'#52c41a':'#ff4d4f'}">
									{{val.status==1?'启用':'禁用'}}
								</view>
							</view>
							<u-button type="primary" size="mini" :custom-style="customStyle2" @click.stop="goDetail(index,i)">播放</u-button>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	
	let liveList = [{
		name:'区域1',
		children:[
			{
				name:'监控1',
				url:'https://gbs.gkiiot.com:8082/hdl/34020000001110000000/34020000001320000047.flv'
			},
			{
				name:'监控2',
				url:'https://gbs.gkiiot.com:8082/hdl/34020000001110000000/34020000001320000047.flv'
			}
		]
	},{
		name:'区域2',
		children:[
			{
				name:'监控3',
				url:'https://gbs.gkiiot.com:8082/hdl/34020000001110000000/34020000001320000047.flv'
			},
			{
				name:'监控4',
				url:'https://gbs.gkiiot.com:8082/hdl/34020000001110000000/34020000001320000047.flv'
			}
		]
	}]
	export default{
		mixins: [MescrollMixin],
		data(){
			return {
				customStyle: {
					padding: '30rpx 30rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					margin:'0'
				},
				customStyle2: {
					padding: '30rpx 40rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					margin:'0'
				},
				upOption:{
					noMoreSize: 4,
					textNoMore: '----  已经到底啦  ----',
					empty:{
						tip: '~ 暂无监控设备 ~' // 提示
					}
				},
				dataList:[],
			}
		},
		onLoad() {
			// this.getVideoList();
		},
		methods:{
			upCallback(page){
				let params = {
					page: page.num,
					pageSize: page.size,
				}
				this.$api.videoApi.getVideoList(params).then(res => {
					console.log("getVideoList",res);
					if(res.code === 0){
						let curPageData = res.data && res.data.list;
						let curPageLen = curPageData && curPageData.length || 0;
						let totalSize = res.data.totalCount;
						curPageData.forEach((item,index)=>{
							curPageData[index].channelList = []
						})
						this.$nextTick(()=>{
							// 隐藏下拉刷新和上拉加载的状态;
							this.mescroll.endBySize(curPageLen, totalSize);
						})
						//设置列表数据
						if(page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
						this.dataList = curPageLen > 0 &&  this.dataList.concat(curPageData); //追加新数据
						this.total = totalSize;
					}else{
						this.$u.toast(res.msg);
						this.mescroll.endErr();
					}
					
				}, error => {
					this.$u.toast('服务器开小差了呢，请您稍后再试')
				})
			},
			getChanneList(id,index){
				console.log("id",id,index)
				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){
							console.log("this.dataList[index]",this.dataList[index])
							this.$nextTick(()=>{
								this.$set(this.dataList[index],'channelList',res.data.list)
							})
						}else{
							this.$u.toast('通道为空');
							this.$nextTick(()=>{
								this.$set(this.dataList[index],'channelList',[])
							})
						}
						
					}else{
						this.$u.toast(res.msg);
					}
				}, error => {
					this.$u.toast('服务器开小差了呢，请您稍后再试')
				})
			},
			goDetail(index,i){
				console.log("111")
				let deviceObj = this.dataList[index];
				let channeObj = this.dataList[index].channelList[i];
				if(channeObj.hdlUrl){
					uni.navigateTo({
						url:'./video-detail?deviceObj='+encodeURIComponent(JSON.stringify(deviceObj))+ '&channeObj='+encodeURIComponent(JSON.stringify(channeObj))
					})
				}else{
					this.$u.toast('获取通道地址错误')
				}
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.video-list-box{
		min-height: 100%;
		background: #f2f1f6;
		padding: 20rpx;
		.video-list{
			.video-item{
				background: #fff;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				.item-header{
					height: 80rpx;
					border-bottom: 1px solid #f2f1f6;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 20rpx;
				}
				.item-content{
					padding: 20rpx;
					.content-title-box{
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;
						.content-title-box-left{
							background: #f6f6f6;
							width: 80rpx;
							height: 80rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: 10rpx;
							border-radius: 4px;
							.iconfont{
								font-size: 60rpx;
								color: #2979ff;
							}
						}
						.content-title-box-right{
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							.content-title-txt{
								font-weight: bold;
							}
							.content-title-info{
								font-size: 22rpx;
								color: #bbb;
							}
						}
					}
					.item-content-list{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.item-content-list-left{
							.item-content-item{
								font-size: 24rpx;
								line-height: 40rpx;
							}
						}
					}
				}
				.item-footer{
					width: 100%;
					.channel-item{
						width: 100%;
						display: flex;
						justify-content: space-between;
						padding: 20rpx;
						border-bottom: 1px dashed #f2f1f6;
						&:last-child{
							border-bottom: none;
						}
						.channel-item-left{
							display: flex;
							align-items: center;
							.iconfont{
								color: #2979ff;
								margin-right: 10rpx;
							}
							.channel-name{
								font-weight: bold;
								margin-right: 10rpx;
							}
							.channel-status{
							}
						}
					}
				}
			}
		}
	}
</style>