<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>	
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <%@include file="/views/common.jsp"%>
</head>
<style>
	.ql-video{
		height:700px;
		width:1500px
	}
</style>
<body>
	<div id="view"></div>
	<video id="video" class="ql-video" controls width="400px" heigt="400px"
			src="http://47.114.150.226:80/erp/abc\product\\20210410\专业接单流程.mp4"></video> 
<script id="videoInfo" type="text/html">
		<!-- 0:新用户的时候不显示切换视频按钮 --> 
		<c:if test="${sessionScope.USER_SESSION.sysStatus ne '0'}">
 		{{# layui.each(d, function(index, item){ }}
			<button data-src="{{item.imgUrl}}" onclick="videoClick(this)">{{item.filename}}</button>
  		{{# }); }}
		</c:if>
</script>
</body>
<script>
	// 点击按钮，切换视频
	function videoClick(obj){
		address = obj.getAttribute("data-src");
		document.getElementById("video").src = address;
	}
	layui.use(['table','form','carousel','laytpl'], function(){  
	    var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
	    var carousel = layui.carousel;
	    var table = layui.table;
	    var laytpl = layui.laytpl;
	    
        window.errorDataHandle = function(){
        	//建造实例
            ins = carousel.render({});
	        $.ajax({
				url:"${pageContext.request.contextPath}/getImgs",
				type:"GET",
				data:{
					proTypeValue : 999
				},
				success : function(result) {
					var getTpl = document.getElementById('videoInfo').innerHTML,
	                view = document.getElementById('view');
		            laytpl(getTpl).render(result, function (html) {
		            	view.innerHTML = html;
		            });
	            	form.render();
					// 如果没有轮播图就隐藏
					if(result.length == 0){
						document.getElementById("test1").style.display = "none";   //隐藏
					}else{
						ins.reload({
							elem: '#test1', 
							width: '1500px',  //设置容器宽度
					        height: '730px'
			            });
					}
				}
			});
	  	}
        
     	// 获取登录用户的信息
		$(document).ready(function() {
			$.ajax({
				url : "${pageContext.request.contextPath}/getUserInfo",
				type : "get",
				success : function(obj) {
					var sysStatus = obj.data.userInfo.sysStatus
					// 如果是新用户登陆，禁止快进视频
					if(sysStatus == "0"){
						// 禁止快进
						var sym;
						var video = document.querySelector("#video")
						setInterval(function () {
							var time = video.currentTime;
						    if(time-sym > 1){
						    	video.currentTime = sym
						    }
						    sym = video.currentTime
						},500);
					}
				}
			})
		})

		/* var arr=[
			"http://47.114.150.226:80/erp/abc/product\\20210410/专业接单流程.mp4",
			"http://47.114.150.226:80/erp/abc/product\\20210410/后台系统说明.mp4",
			"http://47.114.150.226:80/erp/abc/product\\20210410/千牛操作.mp4",
			"http://47.114.150.226:80/erp/abc/product\\20210410/常用材质说明.mp4"
		]; */
		var arr = []
		$.ajax({
			url : "${path}/getVideos",
			type : "get",
			success : function(obj) {
				arr = obj
				var ind = 0;
				onload = function(){
					video.src = arr[ind];
					// 视频播放完后调用（有时候不调用）
					video.onended = function(){
				    	/* ind++;
						// 从头播放
					    ind = ind > arr.length-1 ? 0 : ind;
				    	this.src = arr[ind]; */
				  	}
				}
				// 调用上面的方法
				errorDataHandle()
				var md = document.getElementsByTagName("video")[0]; 
				// 播放完还会走这
				md.addEventListener("ended",function(){ 
					// 将循环播放放在这
					ind++;
					// 从头播放
					ind = ind > arr.length-1 ? 0 : ind;
				    this.src = arr[ind];
				    if(ind == 0){
				    	layer.confirm('视频播放完毕', {
				    		icon: 1,
				    		title:'提示',
				     		btn: ['进入下一步','重新播放'],
				     		btn1: function(index){
				     			$.ajax({
							 		url:"${pageContext.request.contextPath}/videoOverToChangeSysStatus",
							    	contentType : 'application/json;charset=utf-8',
							        type : 'POST',
							        success:function (data) {
							        	/* layer.msg('好的，请重新登陆系统开始考试吧~~',{icon:6,offset:"auto",time:2000},function(){
								            setTimeout("javascript:top.location.href='${pageContext.request.contextPath}/SysUser/logout'", 1000);
							        	}); *///提示框
							        }
							    })
				            },
				            btn2: function(index){
				            	layer.close(index);
				            }
						})
					}
				})
			}
		})
	})
</script>
</html>