<template>
	<view class="camera-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<header-org @openOrg="openOrg" :total="cameraTotal" title="摄像头数：" :imageSrc="imageSrc"></header-org>
		<view style="height: 150rpx"></view>
		<!-- 自带分页组件 -->
		<mescroll-body height="80%" ref="mescrollRef" :up="upOption" @init="mescrollInit" :down="downOption"
			@down="downCallback" @up="upCallback">
			<view class="camera-container">
				<view class="container-item">
					<!-- #ifdef MP-WEIXIN -->
					<view v-for="(item, index) in list" :key="item.id" class="item">
						<video :data-id="item.id" :data-accessMode="item.accessMode" :key="item.id" preload="none"
							:id="'video' + item.id" class="video" :src="item.videoUrl" controls :title="item.name"
							x5-video-player-type="h5" x5-video-orientation="portraint" show-mute-btn :poster="item.avatar"
							@play="playVideo"></video>
						<view class="bottom-text text-clip w-300">
							<text class="text">{{ item.name }}</text>
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<cover-view v-for="(item, index) in list" :key="item.id" class="item" style="overflow: hidden">
						<video :data-id="item.id" :data-accessMode="item.accessMode" :key="item.id" preload="none"
							:id="'video' + item.id" class="video" :src="item.videoUrl" controls :title="item.name"
							x5-video-player-type="h5" x5-video-orientation="portraint" show-mute-btn :poster="item.avatar"
							@play="playVideo"></video>
						<cover-view class="bottom-text text-clip w-300">
							<cover-view class="text">{{ item.name }}</cover-view>
						</cover-view>
					</cover-view>
					<!-- #endif -->
				</view>
			</view>
			<!-- <mescroll-empty v-if="!list.length" /> -->
		</mescroll-body>
		<!-- 自带分页组件 -->
		<view style="height: 60rpx"></view>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import api from '@/api/index.js'
import { useNavigateTo } from '@/plugins/utils.js'
import headerOrg from '@/components/common/header-org.vue'

export default {
	mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
	components: {
		headerOrg,
	},
	data() {
		return {
			imageSrc: '/static/camer.png',
			page: {
				num: 0,
				size: 10,
			},
			downOption: {
				auto: true, //是否在初始化后,自动执行downCallback; 默认true
			},
			upOption: {
				auto: false, // 不自动加载
			},
			current: 0,
			cameraTotal: 0,
			list: [],
			ordId: '',
		}
	},
	onShow() {
		if (this.ordId) {
			this.loadData(1, this.ordId)
		}
	},
	onHide() {
		this.ordId = ''
	},
	onLoad() {
		// 隐藏原生的tabbar
		uni.hideTabBar()
	},
	methods: {
		/*下拉刷新的回调 */
		downCallback() {
			//联网加载数据
			this.page.num = 1
			this.loadData(1)
		},
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback() {
			//联网加载数据
			this.page.num += 1
			this.loadData(this.page.num)
		},
		async loadData(pageNo, organizationId) {
			let httpData = {
				page: pageNo,
				pageSize: 10,
				organizationId,
			}
			const res = await api.homeApi.getCameraApi({
				params: httpData,
				custom: {
					load: false,
				},
			})
			if (res) {
				uni.stopPullDownRefresh()
				this.mescroll.endBySize(res.items.length, res.total)
				this.cameraTotal = res.total
				if (!res.items.length && res.total == 0) {
					this.mescroll.showEmpty()
				} else {
					this.mescroll.removeEmpty()
				}
				// this.list = res.items
				this.getPlaySource(res.items)
				// this.$nextTick(()=>{
				// 	for(let item of res.items){
				// 	if(item.accessMode===1){
				// 		item.videoUrl = ( api.homeApi.byCameraIdGetDetailApi(item.id)).data.url
				// 	}
				// 	if(item.accessMode === 2){
				// 		const {deviceId,channelNo} = item.params || {}
				// 		try{
				// 			const result =  api.homeApi.getCameraGBTUrl(deviceId,channelNo)
				// 			const {data:{flv}} = result || {}
				// 			item.videoUrl = flv
				// 		}catch(err){
				// 			console.log(err,'error')
				// 		}
				// 	}
				// }
				// })

				if (pageNo == 1) {
					this.list = res.items
				} else {
					this.list = this.list.concat(res.items)
				}
			}
		},
		 getPlaySource(items) {
			for (let item of items) {
				if (item.accessMode === 1) {
					api.homeApi.byCameraIdGetDetailApi(item.id).then(res => {
						item.videoUrl = res.data.url
					})
				}
				if (item.accessMode === 2) {
					const { deviceId, channelNo } = item.params || {}
					try {
						api.homeApi.getCameraGBTUrl(deviceId, channelNo).then(res => {
							const { data: { flv,fmp4,hls } } = res || {}
							item.videoUrl = hls
						})


					} catch (err) {
						console.log(err, 'error')
					}
				}
			}
		},
		//播放视频
		async playVideo(e) {
			const { currentTarget: { dataset: { accessmode, id } } = {} } = e
			let currentId = 'video' + id;
			// const videoContext = uni.createVideoContext(currentId, this);
			// videoContext.play()
			/**
			 * 点击全屏播放当前视频，暂停其余视频
			 * 兼容APP和MP端
			 */
			// this.videoContent = uni.createVideoContext(currentId, this)
			// this.videoContent.requestFullScreen()
			// 获取视频列表
			let trailer = this.list
			trailer.forEach((item, index) => {
				if (item.videoUrl != null && item.videoUrl != '') {
					let temp = 'video' + item.id
					if (temp != currentId) {
						//暂停不是当前的视频
						uni.createVideoContext(temp, this).pause()
					}
				}
			})
		},
		openOrg() {
			useNavigateTo('/pages/organization/organization')
		},
	},
}
</script>

<style lang="scss" scoped>
@import '../../static/camera.scss';
</style>