import {timestampFormat,getParams,fullScreen,exitFullscreen} from "./timestampFormat.js";
import { mqttUrl } from "../config/url.js";
window.onload=function(){
	var locationUrl=window.location.href;
	var slider,sliderInit,layer;
	layui.use(['slider','layer'], function(){
	    slider= layui.slider;  
	    layer = layui.layer;
	});
	var sizeLevel=0;//放大等级
	var videotapeStartTime="";//录像开始时间
	var videotapeEndTime="";//录像结束时间
	var startTimeStamp="";
	var endTimeStamp="";
	var bApplySign = false;
	var applyPage=false;
	var keyCode = 32;
	var videoTime=60000*12000;
	var cdTimeCountFlag="video";//video跟videotape
	var cdTimeCount=videoTime;
	var countDownTimer=null;
	var channelValue=decodeURI(getParams("id"));
	var mdDeviceName=decodeURI(getParams("mdDeviceName"));
	var station=decodeURI(getParams("station"));
	var title=decodeURI(getParams("mdDeviceName"));	
	var loginUserName=decodeURI(getParams("username"));	
	var power=decodeURI(getParams("power"));
	var rtmName=channelValue;
	var client=null;
	var buffer=[];
	var mediaRecorder =null;
	var videoTimer=null;
	var options = {
		appid: "78846e9910a846688ab959e0f87034e5",
		channel: channelValue,
		uid: '',
		token: null
	};
	var client=AgoraRTC.createClient({mode: 'live',codec: "vp8"});
	var remoteUsers = {};
	let localTracks = {
		audioTrack: true
	};
	$("html>head>title").html(title);
	videoJoin();
	setPower(power);
	function setPower(power){
		if(power=="null"){
			power=0;
		}
		if(power>=90){
			var img="images/power100.png";
		}else if(power>=70){
			var img="images/power80.png";
		}else if(power>=50){
			var img="images/power60.png";
		}else if(power>=30){
			var img="images/power40.png";
		}else if(power>=10){
			var img="images/power20.png";
		}else{
			var img="images/power0.png";
		}
		$(".power>span").html(power+"%");
		$(".power>img").attr("src",img);
	}
	
	function closePage(){
		leaveChannel();//我先离开频道
		var obj=getRtmData("videoclose","");//在去关闭
		sendMqttData(obj);
		window.close();
	}	

	async function leaveChannel() {
		// leave the channel
		await client.leave();
	}
	
	//关闭并退出
	$(".videoNav>.nav>img:nth-child(1)").click(function(){
		var param = {
			"sender":"children",
			"receiver":"parent",
			"deviceid":channelValue,
			"cmd":"closePage"
		};
        window.parent.postMessage(param,'*');
		closePage();
	})
	
	window.addEventListener('message', function(e) {
	 	var data=e.data
       	var cmd=data["cmd"];
       	var deviceid=data["deviceid"]
       	if(cmd=="videoclose"){
       		if(channelValue==deviceid){
       			closePage(); 
       		}
       	}
   })

	//如果在全屏
	function confClosePage(){
		var url=window.location.href;
		if(url.indexOf("fullScreenVideo")==-1){
			closePage(); 
		}
	}
	

	
	window.onbeforeunload=function(e){     
	   if(locationUrl.indexOf("videoMoitorShow")==-1){
			confClosePage();
		}
	} 
	
	window.onresize = function () {
		var w=parseFloat(window.innerWidth);
		var h=parseFloat(window.innerHeight - 40);
		switch(sizeLevel){
			case 1:
				setVideoSize1280(w,h);
				break;
			case 2:
				setVideoSize720(w,h);
				break;
			case 3:
				setVideoSize480(w,h);
				break;
			case 4:
				setVideoSize640(w,h);
			break;
			default:
				break;
		}
	}
	
	//1280*720
	function setVideoSize1280(w,h){
		var f=parseFloat(h/w);
		if(f >= 0.5625){
			var width=w;
			var height=width*0.5625;
			var x= 0; 
			var y=parseFloat(h-height)/2;
		}else{
			var height=h;
			var width=(height*16)/9;
			var x=parseFloat(w-width)/2;
			var y= 0; 
		}
		setPageSize(x,y,width,height)
	}
	
	//720*1280
	function setVideoSize720(w,h){
		var f=parseFloat(w/h);
		if(f>0.5625){
			var height=h;
			var width=h*0.5625;
			var x=parseFloat(w-width)/2;
			var y=0;
		}else{
			var width=w;
			var height=(w*16)/9;
			var x=0;
			var y=parseFloat(h-height)/2;;
		}
		setPageSize(x,y,width,height)
	}
	
	
	//480*640
	function  setVideoSize480(w,h){//宽度是480px;height:640px;	
		var f=parseFloat(w/h);
		if(f>0.75){
			var height=h;
			var width=h*0.75;
			var x=parseFloat(w-width)/2;
			var y=0;
		}else{
			var width=w;
			var height=(w*4)/3;
			var x=0;
			var y=parseFloat(h-height)/2;;
		}
		setPageSize(x,y,width,height)
	}

	//640*480
	function setVideoSize640(w,h){
		var f=parseFloat(h/w);
		if(f >= 0.75){
			var width=w;
			var height=width*0.75;
			var x= 0; 
			var y=parseFloat(h-height)/2;
		}else{
			var height=h;
			var width=(height*4)/3;
			var x=parseFloat(w-width)/2;
			var y= 0; 
		}
		setPageSize(x,y,width,height)
	}


	
	function setPageSize(x,y,width,height){
		$("#video").css("width",width+"px");
		$("#video").css("height",height+"px");
		$("#video").css("left",x);
		$("#video").css("top",y);
	}
	
	$(".videoFullscreen").unbind('click');
	$(".videoFullscreen").click(function(){	

		console.log(123456);

		var url=window.location.href;
		if(url.indexOf("alarmDeviceVideo")!=-1){
			//投一个新的屏幕出去 
			var width=1280;
			var height=760;	
			window.open("fullScreenVideo.html?id="+encodeURI(channelValue)+"&power="+encodeURI(power)+"&mdDeviceName="+encodeURI(encodeURI(mdDeviceName))+"&station="+encodeURI(encodeURI(station))+"&title="+encodeURI(encodeURI(title))+"&username="+loginUserName,"","width="+width+",height="+height+",top=0,left=0");
		}else{
			var model=$(this).attr("model");
			if(model=="exitfullScreen"){
				fullScreen()
				$(this).attr("src","images/videoExitFullscreen.png").attr("model","fullScreen").attr("title","退出全屏")
			}else{
				exitFullscreen()
				$(this).attr("src","images/videoFullscreen.png").attr("model","exitfullScreen").attr("title","全屏");
			}
		}
	})
	
	//打开声音
	function openMute(select){
		$(select).attr("src","images/openMute.png");
		$(select).attr("title","音量");
		$(select).attr("mute","open");
	}
	
	//关闭声音
	function closeMute(select){
		$(select).attr("src","images/closeMute.png");
		$(select).attr("title","静音");
		$(select).attr("mute","close");
	}
	
	//初始化声音
	function videoSlideInit(){
		sliderInit=slider.render({
			elem: '#slideTest1',
			change: function(value){
				var select=$(".closeMute");
				if(value==0){
					closeMute(select);
				}else{
					openMute(select);	
				}
				setRemoteUserMute(value*10);
			}
		});
	}

	function setRemoteUserMute(value){
		for(var user in remoteUsers){
			remoteUsers[user].audioTrack.setVolume(value);
		}
	}

	let  cameraid=0;
	let  rotateid=0;
	//摄像图的操作
	$(".carmeOper").on('click',function(){
		rotateid=parseInt($(this).attr("rotate"));
		$(".carmeOper").removeClass("bgColor");
		$(this).addClass("bgColor")
		sendCarmeOper();
	})

	//摄像头的方向调整
	$(".carmeDir").on('click',function(){
		let dir=$(this).attr("dir");
		cameraid=dir;
		if(dir=="0"){
			$(this).attr("dir","1");
			$(this).html("后");
		}else{
			$(this).attr("dir","0");
			$(this).html("前");
		}
		sendCarmeOper();
	})

	function sendCarmeOper(){
		var obj=getRtmData("videoclose","");
		sendMqttData(obj);
		setTimeout(()=>{
			let data={
				"rtmpflag":0,
				"camera":cameraid,
				"rotation":rotateid
			}
			var obj=getRtmData("videocall",JSON.stringify(data));
			sendMqttData(obj);
			videoInfoWind();
		},4000)
	}

    //调节音量大小
	$(".closeMute").click(function(){
		var mute=$(this).attr("mute");	
		if(mute=="open"){
			setRemoteUserMute(0)
			sliderInit.setValue(0) //设置开始值
			closeMute(this);
		}else{
			setRemoteUserMute(1000)
			sliderInit.setValue(100) //设置开始值
			openMute(this);
		}
	})
	
	async function videoJoin() { 
	  	//订阅用户推送流
		client.on("user-published", handleUserPublished);
		//订阅用户取消推流
		client.on("user-unpublished", handleUserUnpublished);
		try {
			// join a channel and create local tracks, we can use Promise.all to run them concurrently
			[ options.uid] = await Promise.all([
				// join the channel
				client.join(options.appid, options.channel, options.token || null),
			]);
		} catch (e) {
			console.log("加入频道失败", e);
		}
		// 使用 Web SDK 4.x,服务器频道禁用以后，客服端需要退出页面跟频道
		client.on("connection-state-change", (curState, prevState) => {
			closePage();
		});
	}

	async function subscribe(user, mediaType) {
		const uid = user.uid;
		// subscribe to a remote user
		await client.subscribe(user, mediaType);
		if (mediaType === 'video') {
			const player = $(`
				<div id="player-${uid}" class="player"></div>
			`);
			$("#agora_local").append(player);
			user.videoTrack.play(`player-${uid}`);
			//设置视频数据
			setVideoData();
			//初始化视频的尺寸
			videoInfoWind();


			setInterval(function(){
				var obj=getRtmData("videowatching","");
				sendMqttData(obj)
				//每隔1分钟发送发送1个不关闭视频的指令
			},60000)

		}
		if(mediaType === 'audio'){
			setRemoteUserMute(0);
			//初始化音量
			videoSlideInit();
			user.audioTrack.play();
		}
	}


	function handleUserPublished(user, mediaType) {
		const id = user.uid;
		remoteUsers[id] = user;
		subscribe(user, mediaType);		
	}

	function handleUserUnpublished(user) {
		const id = user.uid;
		delete remoteUsers[id];
		$(`#player-wrapper-${id}`).remove();
	}


	function setVideoData(){
		setInterval(()=>{
			var evt=client.getRemoteVideoStats();
			if(JSON.stringify(evt)!="{}"){
				for(var j in evt){
					var packetLossRate=evt[j]["packetLossRate"]
					var receiveBitrate=parseFloat(evt[j]["receiveBitrate"]/1024).toFixed(2);
					var receiveFrameRate=evt[j]["receiveFrameRate"]
					var totalDuration=evt[j]["totalDuration"]
					var totalFreezeTime=evt[j]["totalFreezeTime"]
					var transportDelay=evt[j]["transportDelay"]
					$(".PacketLossRate").html(packetLossRate);
					$(".RecvBitrate").html(receiveBitrate);
					$(".RenderFrameRate").html(receiveFrameRate);
					$(".TotalPlayDuration").html(totalDuration);
					$(".TotalFreezeTime").html(totalFreezeTime);
					$(".TransportDelay").html(transportDelay);	
				}	
			}
		},1000)
	}

	function videoInfoWind(){
		videoTimer=setInterval(() => {
			var evt=client.getRemoteVideoStats();
			if(JSON.stringify(evt)!="{}"){
				for(var i in evt){
					if("receiveResolutionHeight" in evt[i]){
						var RecvResolutionHeight=evt[i]["receiveResolutionHeight"];
					}
					if("receiveResolutionWidth" in evt[i]){
						var RecvResolutionWidth=evt[i]["receiveResolutionWidth"];
					}
					if((RecvResolutionWidth!="0"&&RecvResolutionHeight!="0")&&(RecvResolutionWidth!=undefined&&RecvResolutionHeight!=undefined)){
						clearInterval(videoTimer);	
						var width=RecvResolutionWidth;
						var height=parseFloat(RecvResolutionHeight);	
						if(RecvResolutionWidth=="1280"&&RecvResolutionHeight=="720"){
							sizeLevel=1;	
							setVideoSize1280(width*0.5,height*0.5);
							window.resizeTo(width,height);	
						}else if(RecvResolutionWidth=="720"&&RecvResolutionHeight=="1280"){
							if(window.screen.height+200<=height){
								width=width*0.8;
								height=height*0.8;
							}
							sizeLevel=2;
							setVideoSize720(width*0.5,height*0.5);
							window.resizeTo(width,height);	
						}else if(RecvResolutionWidth=="480"&&RecvResolutionHeight=="640"){
							sizeLevel=3;
							setVideoSize480(width*0.5,height*0.5);
							window.resizeTo("496","750");	
						}else if(RecvResolutionWidth=="640"&&RecvResolutionHeight=="480"){
							sizeLevel=4;
							setVideoSize640(width*0.5,height*0.5);
							window.resizeTo(RecvResolutionWidth,RecvResolutionHeight);	
						}
						var param={
							"deviceid":channelValue,
							"cmd":"videoloadedSuccess"
						}
						parent.postMessage(param,'*');
						//启动倒计时
						downTime30();
					}
				}
			}
		},1000)
	}
	
	//设置stream
	function  setRecStream(){
		let mediaStream = new MediaStream();
		for(var user in remoteUsers){
			mediaStream.addTrack(remoteUsers[user].videoTrack.getMediaStreamTrack())
			mediaStream.addTrack(remoteUsers[user].audioTrack.getMediaStreamTrack())
		}
		window.stream=mediaStream;
	}

	//开启远程录像
	$(".startRecording").unbind();
	$(".startRecording").click(function(){
		var recordState=$(this).attr("state");
		if(recordState=="open"){
			setRecStream();
			startRecord();	
			startTimeStamp=new Date().getTime();
			videotapeStartTime=timestampFormat();	
			$(this).attr("state","close");
			$(this).attr("src","images/endRecording.png");
			$(this).attr("title","结束录像");
			layer.msg("录像开启成功");
			$(".inTheVideo").css("display","block");
			cdTimeCountFlag="videotape";
			downTime30();	
		}else{
			endTimeStamp=new Date().getTime();
			videotapeEndTime=timestampFormat();	
			stopRecord();
			cdTimeCount=videoTime;
			clearInterval(countDownTimer);
			countDownTimer=null;
			cdTimeCountFlag="video";
		}
	})
	
	//视频信息
	$(".videoReInfo").on('click',function(){
		var state=$(this).attr("state");	
		if(state=="close"){
			$(this).attr("state","open");
			$(".videoInfo").css("display","block");


		}else{
			$(this).attr("state","close");
			$(".videoInfo").css("display","none");
		}
	})

	async function setClientHost(){
		//设置成主播
		await client.setClientRole("host");
		try {
			// join a channel and create local tracks, we can use Promise.all to run them concurrently
			[localTracks.audioTrack] = await Promise.all([
				// create local tracks, using microphone and camera
				AgoraRTC.createMicrophoneAudioTrack()
			]);
			await client.publish(Object.values(localTracks));
		} catch (e) {
			console.log("加入频道失败", e);
		}
	}
	async function setClientAudience(){
		//先调用取消发布，在设置成观众
		await client.unpublish(Object.values(localTracks));
		await client.setClientRole("audience");
	}	
			
	//开启对讲
	$(".videoWalk").unbind();
	$(".videoWalk").click(function(){
		var state=$(this).attr("state");	
		if(state=="close"){
			//开启
			$(this).attr("state","open");
			$(this).attr("src","images/videoWalkOnline.png");
			applyPage=true;
			bApplySign=true;
			setClientHost();
		}else{
			applyPage=false;
			bApplySign=false;
			//关闭 
			$(this).attr("state","close");
			$(this).attr("src","images/videoWalk.png");
			setClientAudience();
		}
	})
				
	//键盘松开
	document.onkeyup = function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];	            
       	if(applyPage){
			if(e && e.keyCode == keyCode&&!bApplySign) {
				bApplySign = true;
				//关闭麦克风
				localTracks.audioTrack.setEnabled(false);
				//开启远程的声音
				setRemoteUserMute(100);
				var select=$(".closeMute");
				openMute(select);	
				sliderInit.setValue(100) //设置开始值
        	}
		}
	}
				
	//键盘按下
	document.onkeydown = function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0]; 
        if(applyPage){
       		if(e && e.keyCode == keyCode&&bApplySign) {
				bApplySign = false;
				//启用麦克风
				localTracks.audioTrack.setEnabled(true);
				//关闭远程的声音
				setRemoteUserMute(0);
				//页面状态改变
				sliderInit.setValue(0) //设置开始值
				var select=$(".closeMute");
				closeMute(select);
        	}
       	} 	 
 	}				
			
	//截图，并且把图片保存在云端
	$(".videoImg").click(function(){	
		var video=document.querySelector(".agora_video_player");
		var canvas=document.getElementById('canvas');
		if(video!=null){
			$(".canvasImg").css("display","block");
			canvas.width=video.videoWidth;
	    	canvas.height=video.videoHeight;
		    canvas.getContext('2d').drawImage(video,0,0,canvas.width,canvas.height);
		    var image  = canvas . toDataURL ("image/png") ;
			$(".canvasImgBox").css("width",canvas.width*0.3+"px");
			$(".canvasImgBox").css("height",canvas.height*0.3+"px");
		 	document.getElementById("save").href=image;
      		document.getElementById("save").download=mdDeviceName+".jpg";
			document.getElementById('save').onclick=function(){
				
				$(".canvasImg").css("display","none");
			}
			document.getElementById('cancel').onclick=function(){
				$(".canvasImg").css("display","none");
			}
		}else{
			layer.msg("用户已离开,无法截图");
		}
	})
	
	function closeVideoStream(){
		var obj=getRtmData("videoclose","");//在去关闭
		sendMqttData(obj);
	}



	//倒计时30分钟以后关闭录像，告诉用户,录像已经完成
	/*************************观看视频为5分钟1次，如果不点击确定，就会关闭***********************************/
	function  downTime30(){
		if(countDownTimer!=null){
			clearInterval(countDownTimer);
		}else{
			countDownTimer=setInterval(function(){
				cdTimeCount-=1000;
				if(cdTimeCount<=0){
					clearInterval(countDownTimer);
					countDownTimer=null;
					if(cdTimeCountFlag=="videotape"){
						endTimeStamp=new Date().getTime();
						videotapeEndTime=timestampFormat();	
						stopRecord();
					}else{
						//倒计时
						showCountDownTimer();
					}	
				}
			},1000);
		}
	}
	
	//倒计时*******************************************
	var closeTime=10;//倒计时
	var closePageTimer=null;
	function showCountDownTimer(){
		$(".videoTitle").css("display","block");
		$(".close_ing_time").html(closeTime);
		videoTitleEvent();
		closePageTimer=setInterval(function(){
			closeTime--;
			$(".close_ing_time").html(closeTime);
			if(closeTime<=0){	
				closeVideoStream();//发送关闭指令
				leaveChannel();//离开频道
				clearInterval(closePageTimer);//退出定时器
			}
		},1000);
	}
	
	function videoTitleEvent(){
		$(".videoTitle>p:last-child>button:nth-child(1)").on('click',function(){
			var obj=getRtmData("videocall","");//在去关闭
			sendMqttData(obj);
			$(".videoTitle").css("display","none");
			clearInterval(closePageTimer);
			closePageTimer=null;
			closeTime=10;	
			cdTimeCount=videoTime;
			//再次加入频道
			videoJoin()
			downTime30()
		})
		$(".videoTitle>p:last-child>button:nth-child(2)").on('click',function(){
			closePage(); 
		})
	}	
	
	function handleDataAvailable(e){  // 5、获取数据的事件函数 当我们点击录制之后，数据就会源源不断的从这个事件函数中获取到
		if(e && e.data && e.data.size > 0){
			console.log(e.data);
	    	buffer.push(e.data);  // 将e.data放入二进制数组里面
	    //  这个buffer应该是我们在开始录制的时候创建这个buffer
		}
	}
	
	//开始录像
	function startRecord(){
		buffer = []; // 定义数组
		if (typeof MediaRecorder.isTypeSupported == 'function') {
			if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
				var options = {
					mimeType: 'video/webm;codecs=vp9,opus'
				}
			} else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
				var options = {
					mimeType:'video/webm;codecs=vp9,opus'
				};
			} else if (MediaRecorder.isTypeSupported('video/webm;codecs=h264')) {
				var options = {
					mimeType:'video/webm;codecs=h264,opus'
				};
			}
		}
	
		if(!MediaRecorder.isTypeSupported(options.mimeType)){ // 判断录制的视频 mimeType 格式浏览器是否支持
			return;	
		}

	    try{ // 防止录制异常
	    // 5、先在上面定义全局对象mediaRecorder，以便于后面停止录制的时候可以用到
			mediaRecorder = new MediaRecorder(window.stream, options); // 调用录制API // window.stream在gotMediaStream中获取
			//4、调用事件 这个事件处理函数里面就会收到我们录制的那块数据 当我们收集到这个数据之后我们应该把它存储起来
		    mediaRecorder.ondataavailable = handleDataAvailable; 
			mediaRecorder.start(0); // start方法里面传入一个时间片，每隔一个 时间片存储 一块数据	
		}catch(e){
			console.error(e);
			return;	
	   }
	}
	
	//停止录制
	function stopRecord(){
	  	//6、调用停止录制
		try{
			mediaRecorder.stop();
		}catch(e){
			console.error(e);
		}	
		$(".startRecording").attr("state","open");
		$(".startRecording").attr("src","images/startRecording.png");
		$(this).attr("title","开始录像");
		layer.msg('录像已保存', {
	        time: false, //20s后自动关闭
	        btn: ['知道了']
	      });
	    
		$(".inTheVideo").css("display","none");
		var tmpBlob = new Blob(buffer, {type: 'video/webm'});		
		var duration=endTimeStamp-startTimeStamp;
		//调用设置时长代码。该函数基于fix-webm-duration.js
        ysFixWebmDuration(tmpBlob, duration, function (fixedBlob) {
            var recorderFile = fixedBlob;
            let name =`${mdDeviceName}(${videotapeStartTime}---${videotapeEndTime}).mp4`;
            var url = window.URL.createObjectURL(recorderFile);
			var a = document.createElement('a');
			a.href = url;
			a.style.display = 'none';
			a.download = name;
			a.click();     				
        });
	}
	//构建rtm发送对象	
	function getRtmData(title,data){
		return {
	    	"title":title,
			"sender":loginUserName,
			"department":"",
			"scope":"",
			"receiver":[rtmName],
			"video":"",
			"rtm":(new Date().getTime()).toString(),
			"data":data,
			"userScope":"",
			"userBragide":"",
			"userDetachchment":"",
			"userBorough":"",
			"name":"",	
		}
	}
	
	//发送mqqt接口数据
	function sendMqttData(obj){
		var mqttObj={
			"topic":`${station}/ter_cmd`,
			"message":JSON.stringify(obj)
		}
		$.ajax({
            url: mqttUrl,
            type: "post",
            dataType: "json",
            headers: {
                "Content-Type": "application/json;charset=utf-8"
            },
            data: JSON.stringify(mqttObj),
            success: function(d) {
                //console.error(d);
            }
	    }) 
	}
}