<template>
	<div style="height:100%;border-top: 1px solid rgb(174, 186, 197);" class="flex text-sm">
		<div class="searcBox">
			<div class="bg-blue padding-xs padding-lr text-center">录像回放</div>
			<div class="padding-sm">
				<div>船舶名称：<span>{{nowShip.dev_name}}</span></div>
				<div class="flex align-center margin-tb-sm">
					<div style="width: 102px;">查询时间：</div>
					<el-date-picker type="date" placeholder="选择日期" :editable="false" :clearable="false"
						 v-model="noewTime" @change="handleQuery"/>
				</div>
				<div class="flex align-center margin-bottom-sm">
					<div>切换日期：</div>
					<div class="changeDay">
						<el-button size="small" type="primary" :disabled="clickDisabled" @click="changeDay(-1)">前一天</el-button>
						<el-button size="small" type="primary" :disabled="clickDisabled" @click="changeDay(1)">后一天</el-button>
					</div>
				</div>
				<div class="flex align-center margin-bottom-sm">
					<div>录像总数：</div>
					<div class="text-red total">{{hisVideoLi.length}}条</div>
				</div>
			</div>
		</div>
		<div class="typeBox">
			<div :class="videoType?'act':''" @click="videoType = true">文件</div>
			<div class="L_Time" :class="videoType?'':'act'" @click="videoType = false">
				<span>时间</span>
				<el-icon class="pointer">
					<VideoPause v-if="nowPlay.cameraid != undefined&&!videoType" @click.stop="playHis('stop')"/>
				</el-icon>
			</div>
		</div>
		<div style="width: calc(100% - 235px);height: 100%;" v-loading="loading">
			<div style="width:100%;height: 100%;" class="text-center" v-if="videoType">
				<ul>
					<li class="newTable text-bold">
						<div>序号</div>
						<div></div>
						<div>拍摄位置</div>
						<div>开始时间</div>
						<div>结束时间</div>
						<div>录制时长</div>
					</li>
					<li class="padding-tb" v-if="!hisVideoLi.length">
						暂无录像列表
					</li>
				</ul>
				<ul style="height:calc(100% - 33px);overflow-y: auto;" clas="text-sm" v-if="hisVideoLi.length">
					<li class="newTable" :class="nowPlay.time == item.time&&nowPlay.cameraid == item.cameraid?'act':''"
						v-for="(item,index) in hisVideoLi" :key="index">
						<div>{{index+1}}</div>
						<div>
							<el-icon class="pointer">
								<VideoPause v-if="(nowPlay.time == item.time&&nowPlay.cameraid == item.cameraid)" @click.stop="playHis('stop')"/>
								<VideoPlay v-else @click.stop="playHis(item)"/>
							</el-icon>
						</div>
						<div>{{item.name}}</div>
						<div>{{parseTime(parseInt(item.time)*1000, `{y}-{m}-{d} {h}:{i}:{s}`)}}</div>
						<div>{{parseTime(parseInt(item.videoName.split("-")[1].split(".h2")[0])*1000, `{y}-{m}-{d} {h}:{i}:{s}`)}}</div>
						<div>{{_format(item.videoName)}}</div>
					</li>
				</ul>
			</div>
			<div v-else class="padding-xs">
				<ul class="time-line">
					<li v-for="(item,index) in timeLine" :key="index">
						{{item}}
					</li>
				</ul>
				<ul class="time-data" ref="time-data" @mouseleave="handleMouseleave">
					<li class="data_li" v-for="(item,indx) in hisVideoTime" :key="indx" @mouseenter="handleMouseenter">
						<div v-for="(subit,subind) in item" :key="subind" 
							class="hasHis" :style="'left: ' + getLeft(subit.time) + '%;'"></div>
					</li>
					<li class="_line" @click="checkRow" :style="'left:'+movePosi.left" v-if="moveSta">
						<div class="data_info" :class="movePosi.rights?'right':''" :style="'top:'+movePosi.y+'px;'">{{movePosi.text}}{{movePosi.txttime}}</div>
					</li>
					<li class="mask" @mousemove="handleMousemove"></li>
				</ul>
				<div class="margin-top-sm"><span class="text-blue">蓝条：有录像</span>-------白条：无录像</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import flvjs from 'flv.js'
	import { getCarem,getHisVideo  } from "@/api/antiFatigue/index";
	const store = useStore();
	const emit = defineEmits();
	const { proxy } = getCurrentInstance();
	import { reactive, ref } from '@vue/reactivity';
	import { onMounted, onBeforeUnmount } from 'vue';
	var player = null;
	const nowShip = ref({});
	const caremObj = ref([]);
	const hisVideoLi = ref([]);
	const hisVideoTime = ref([]);
	const videoType = ref(false);
	const loading = ref(false);
	const moveSta = ref(false);
	const movePosi = ref({});
	const timeLine = ref(["00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23"]);
	const data = reactive({
		noewTime:"",
		dialogVisible:false,
		clickDisabled: false
	});
	var sdh = 0;
	const getLeft = function(key){
		let _time = parseInt(new Date(noewTime.value + " 00:00:00").getTime() / 1000);
		let _dsf = parseInt(key) - _time;
		return (_dsf / (24 * 6 * 6));
	}
	const _format = function(_star) {
		let endtime = _star.split(".h2")[0].split("-");
		var second = parseInt(endtime[1] - endtime[0]);
		var hr = Math.floor(second / 3600 % 24);
		var min = Math.floor(second / 60 % 60);
		var sec = Math.floor(second % 60);
		return (hr>9?hr:"0"+hr) + ":" + (min>9?min:"0"+min) + ":" + (sec>9?sec:"0"+sec);
	};
	const {
		noewTime,
		dialogVisible,
		clickDisabled
	} = toRefs(data);
	const props = defineProps({
		shipInfo: {
		  type: Object,
		  default: () => {
		    return {
				time:"",
				cameraid:""
			}
		  }
		},
		nowPlay: {
			type: Object,
			default: () => {
				return {}
			}
		},
	});
	const { shipInfo,nowPlay } = toRefs(props);
	watch([shipInfo,nowPlay], ([newValue,newCar]) => {
			if(nowShip.value.sn != newValue.sn){
				noewTime.value = proxy.parseTime(new Date(),`{y}-{m}-{d}`)
				nowShip.value = newValue;
				getList();
			}else if(nowShip.value.sn == newValue.sn){
				nowShip.value.status = newValue.status;
			}
		},{
			deep: true
		},
	);
	function playHis(row){
		emit("nowPlayHis", row);
	}
	function getList(){
		if(nowShip.value.status){
			// nowShip.value.sn
			getCarem(nowShip.value.sn).then(res=>{
				if(res.result == "ok"&&res.data.info.length){
					let _obh = res.data.info,_arr = [];
					_obh.forEach((item,index) => {
						if(item.name != "none"){
							_arr.push(item);
						}
					})
					caremObj.value = _arr;
					getHist();
				}else{
					caremObj.value = [];
					hisVideoLi.value = [];
					proxy.$modal.msgError("获取列表失败！！！");
				}
			})
		}else{
			caremObj.value = [];
			hisVideoLi.value = [];
			proxy.$modal.msgError("设备离线！！！");
		}
	}
	function getHist(){
		let _obj = caremObj.value;
		hisVideoLi.value = [];
		hisVideoTime.value = [];
		if(_obj.length){
			loading.value = true;
			var _axio = 0,allList = [],allTimeLi = [];
			hisVideoLi.value = [];
			for(let i=0;i<_obj.length;i++){
				var _acb = _obj[i];
				getHisVideo({
					sn: nowShip.value.sn,
					carem: _acb.cameraid,
					date: noewTime.value
				}).then(res=>{
					_axio += 1;
					if(res.result == "ok"&&res.data.info != undefined){
						let _data = res.data.info.sort(function(a,b){return a.time - b.time}),_suy = [];
						_data.forEach(item => { 
							if((item.videoName.indexOf(".h264") != -1)&&(item.videoName.indexOf("-") != -1)){
								item.name = _obj[_axio - 1].name;
								item.sn = nowShip.value.sn; 
								allList.push(item);
								_suy.push(item);
								
							}
						});
						allTimeLi.push(_suy);
					}
					if(_axio == _obj.length){
						hisVideoLi.value = allList;
						loading.value = false;
						clickDisabled.value = false;
						hisVideoTime.value = allTimeLi;
						if(!allList.length){
							proxy.$modal.msgError("获取列表失败！！！");
						}
					}
				})
			}
		}else{
			hisVideoLi.value = [];
			clickDisabled.value = false;
			proxy.$modal.msgError("获取列表失败！！！");
		}
	}
	const handleQuery = function(){
		clickDisabled.value = true;
		// 判断选择日期是否是未来日期
		let curDateString = proxy.parseTime(new Date(), `{y}-{m}-{d}`)
		let curDateTimeStamp = (new Date(curDateString)).getTime();
		if (new Date(noewTime.value).getTime() > curDateTimeStamp) {
			noewTime.value = curDateString;
			clickDisabled.value = false
			return
		}
		noewTime.value = proxy.parseTime(noewTime.value, `{y}-{m}-{d}`);
		emit("nowPlayHis", "stop");
		getHist();
	}
	const changeDay = function(days){
		clickDisabled.value = true
		let curDateTimeStamp = (new Date(proxy.parseTime(new Date(), `{y}-{m}-{d}`))).getTime()
		let dateTime = proxy.parseTime(new Date(noewTime.value).getTime() + 1000 * 60 * 60 * 24 * days, `{y}-{m}-{d}`)
		// 判断选择日期是否是未来日期
		if (new Date(dateTime).getTime() >= curDateTimeStamp + 1000 * 60 * 60 * 24) {
			clickDisabled.value = false
			return
		}
		noewTime.value = dateTime;
		emit("nowPlayHis", "stop");
		getHist();
	}
	function handleMousemove(event){
		event.preventDefault();
		if(!moveSta.value){
			moveSta.value = true;
		}
		let _b = event.offsetX;
		let _e = event.offsetY;
		let divW = proxy.$refs["time-data"].clientWidth;
		movePosi.value["y"] = _e;
		movePosi.value["left"] = (_b / divW)*100 + "%";
		if(((_b / divW)*100)>20){
			movePosi.value["rights"] = true;
		}else{
			movePosi.value["rights"] = false;
		}
		let _f = Math.abs(Math.floor((_e / 40)));
		let _c = parseInt(new Date(noewTime.value + " 00:00:00").getTime() / 1000)  + Math.ceil((_b / divW)*(24 * 60 * 60));
		let _d = proxy.parseTime(new Date(_c * 1000),`{y}-{m}-{d} {h}:{i}:{s}`);
		if(_f<(hisVideoTime.value.length)){
			movePosi.value["text"] = hisVideoTime.value[_f][0].name +"：";
			movePosi.value["txttime"] =  _d;
			movePosi.value["textId"] = _f;
		}
	}
	function handleMouseleave(event){
		event.preventDefault();
		moveSta.value = false;
	}
	function handleMouseenter(event){
		event.preventDefault();
		moveSta.value = true;
	}
	function checkRow(){
		let _day = movePosi.value.txttime;
		let _send = parseInt(new Date(_day).getTime() / 1000);
		let _obj = hisVideoTime.value[movePosi.value["textId"]];
		let _ind = _obj.findIndex((i,ind) => {
			let _endtime = i.videoName.split(".h2")[0].split("-");
			return _send <= _endtime[1]&&_send >= _endtime[0]
		});
		if(_ind != -1){
			emit("nowPlayHis", _obj[_ind]);
		}else{
			proxy.$modal.msgError("该时间段没有录像！");
		}
		
	}
	onMounted(() => {
		noewTime.value = proxy.parseTime(new Date(),`{y}-{m}-{d}`)
	})
	onBeforeUnmount(() => {
		
	})
</script>

<style lang='scss' scoped>
	@media screen and (max-width: 1000px){
		.time-line>li:nth-child(even){
			opacity: 0 !important;
		}
	}
	::-webkit-scrollbar{
		display: none;
	}
	.newTable{
		display: flex;
		list-style: none;
		border-bottom: 1px solid rgba(174, 186, 197,0.6);
	}
	.newTable.act{
		background-color:rgba(174, 186, 197,0.6);
	}
	.newTable>div{
		padding: 6px 0;
		width:calc(25% - 30px);
		border-right: 1px solid rgba(174, 186, 197,0.6);
	}
	.newTable>div:nth-child(1),.newTable>div:nth-child(2){
		width:60px;
	}
	.newTable .el-icon{
		font-size: 24px;
		color: #55aaff;
	}
	.searcBox{
		width: 250px;
		border-left: 1px solid #cecece;
		/* border-right: 1px solid rgb(174, 186, 197); */
	}
	.typeBox{
		width: 35px;
		border-left: 1px solid rgb(174, 186, 197);
		border-right: 1px solid rgb(174, 186, 197);
	}
	.typeBox>div{
		width: 100%;
		height: 50%;
		font-size: 14px;
		line-height: 35px;
		letter-spacing:0.3em;
		writing-mode:tb;
		text-align: center;
		cursor: pointer;
	}
	.L_Time{
		border-top: 1px solid rgb(174, 186, 197);
	}
	.typeBox .act{
		color: #fff;
		background-color:#55aaff;
	}
	.time-line{
		display: flex;
		padding-bottom: 16px;
		border-bottom: 1px solid rgb(174, 186, 197);
	}
	.time-line>li{
		position: relative;
		flex:1;
	}
	.time-line>li::after{
		position: absolute;
		left:0;
		top: 20px;
		content: "";
		height: 12px;
		border-left: 1px solid rgb(174, 186, 197);
	}
	
	
	.time-data {
		position: relative;
		width:100%;
		.mask{
			position: absolute;
			left: 0;
			top: 0;
			height:100%;
			width:100%;
			z-index: 444;
			cursor: pointer;
			background-color: rgba(0,0,0,0);
		}
		._line{
			position: relative;
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			z-index: 445;
			cursor: pointer;
			border-left: 1px solid #ff0000;
		}
		.data_info{
			position: absolute;
			left: 10px;
			right: auto;
			top: 0;
			padding:2px;
			font-size: 12px;
			color: #fff;
			white-space: nowrap;
			background-color:#ffaa00;
		}
		.data_info.right{
			right: 10px;
			left: auto;
		}
	}
	.time-data .data_li{
		position: relative;
		width: 100%;
		height: 40px;
		border-bottom: 1px solid #ccc;
		.hasHis{
			position: absolute;
			left: 0;
			height: 38.8px;
			width: 0.69444444%;
			background-color: #007DDB;
		}
	}
</style> 
