<template>
	<view id="video-list">
		<!-- <scroll-view scroll-y class="right-box"> -->
		<mescroll-body ref="mescrollRef"  @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
			<view class="page-view">
				<u-collapse :accordion="false">
					<u-collapse-item v-for="(item, index) in dataList"
						:key="item.id" :open="true">
						<template slot="title">
							<view class="box-title">
								<text>{{item.name}}</text>&nbsp;&nbsp;
								<text>{{item.children?`(${item.children.length})`:''}}</text>
							</view>
						</template>
						<view class="collapse-item">
							<view class="box-item" v-for="(val,i) in item.children" :key="val.id"
								@click="goDetail(val)">
								{{val.label}}
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
		</mescroll-body>
		<!-- </scroll-view> -->
		
	</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 {
				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;
						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('服务器开小差了呢，请您稍后再试')
				})
			},
			goDetail(item){
				console.log("跳转详情",item);
				let obj = {
					url:encodeURIComponent(item.url),
					name:item.label
				}
				uni.navigateTo({
					url:'./video-detail?obj='+encodeURIComponent(JSON.stringify(item))
				})
			}
		}
	}
</script>

<style lang="less">
	.box-title{
		padding: 10rpx 24rpx;
	}
	/deep/ .u-collapse-head{
		border: 1px solid #f5f5f5;
	}
	/deep/ .u-collapse-content{
		// padding: 20rpx;
	}
	.box-item{
		padding: 20rpx;
		font-size: 30rpx;
	}
</style>