<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>私塾家</title>
<script th:include="sys/common/metaCSS" th:remove="tag"></script> 
<script th:include="sys/common/metaJS" th:remove="tag"></script> 
<script src="sys/js/My97DatePicker/WdatePicker.js" th:src="@{/static/sys/js/My97DatePicker/WdatePicker.js}"></script>
<link rel="stylesheet" href="https://www.17sucai.com/preview/1528155/2019-03-29/v/css/jsmodern.min.css">
<script src="https://www.17sucai.com/preview/1528155/2019-03-29/v/js/jsmodern.min.js"></script>

<script type="text/javascript" src="https://www.sharingschool.com/dcui/tools/ueditor/ueditor.config.js?version=1811271348"></script>
<script type="text/javascript" src="https://www.sharingschool.com/dcui/tools/ueditor/ueditor.all.min.js?version=1812061808"></script>
<script type="text/javascript" src="https://www.sharingschool.com/dcui/tools/ueditor/lang/zh-cn/zh-cn.js?version=1811271348"></script>

</head>
<style>
	.tablelink{margin-right:10px;}
	.stylecss{
	      color: red;
	}
	.select_width{
	     width: 220px;
	}
	.date_width{
	     width: 150px;
	}
	
	.tablelist th,td{
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.tablelist td a{
    	text-decoration: underline;
	}
	
</style>

<style>
#video {
	width: 400px;
	height: 250px;
	position: relative;
	margin-bottom: 20px;
	margin-left: 134px;
}

#video video {
	width: 100%;
	height: 100%;
	object-fit: fill;
}

.VideoBtn {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: 70px;
	height: 70px;
	margin-left: -35px;
	margin-top: -35px;
	cursor: pointer;
	z-index: 10;
}
</style>



<body>
<div class="place">
	<span>位置：</span>
	<ul class="placeul">
		<li><a href="#">视频培训系统</a></li>
		<li><a href="#">培训视频编辑</a></li>
	</ul>
</div>
<div class="formbody">
	<div id="video">
		<video th:src="${videoInfo.url}" id="videoShow"></video>
		<span class="VideoBtn"><img src="https://www.17sucai.com/preview/1528155/2019-03-29/v/images/bo1.png"></span>
	</div>
	<form id="submitFrom" method="post" class="form-horizontal form-validate">
		<input type="hidden" name="id" id="id"  th:value="${videoInfo.id}"/>
		<ul class="forminfo">
			 <li class="clearfix" >
				<label>学习内容：<b>*</b></label>
				<select class="scinput select_width"  name="roleType"  style="width: 345px;"  >
					<option value="1"  th:selected="${videoInfo.roleType==1 ? true : false}">校长端</option>
					<option value="2"  th:selected="${videoInfo.roleType==2 ? true : false}">老师端</option>
					<option value="3"  th:selected="${videoInfo.roleType==3 ? true : false}">家长端</option>
					<option value="4"  th:selected="${videoInfo.roleType==4 ? true : false}">学生端</option>
				</select>
		    </li>
			<li class="clearfix" >
				<label>资料模块：<b>*</b></label>
				<input type="text"  name="module" class="dfinput fl" th:value="${videoInfo.module}"/>
			</li>
			<li class="clearfix" >
				<label>资料名称：<b>*</b></label>
				<input type="text" name="title" class="dfinput fl" id="title" th:value="${videoInfo.title}"/>
			</li>
			<li class="clearfix" >
				<label>资料路径：<b>*</b></label>
				<input type="text" name="url" class="dfinput fl" id="url" th:value="${videoInfo.url}"/>
			</li>
<!-- 			<li class="clearfix" > -->
<!-- 				<label>排序(顺序)：<b>*</b></label> -->
<!-- 				<input type="number" name="indes" class="dfinput fl" id="index" th:value="${videoInfo.indes}"/> -->
<!-- 			</li> -->
			<li class="clearfix" >
				<label>发布状态：<b>*</b></label>
				<select class="scinput select_width"  name="status"   style="width: 345px;" >
					<option value="1" th:selected="${videoInfo.status==1 ? true : false}">发布</option>
					<option value="0" th:selected="${videoInfo.status==0 ? true : false}">未发布</option>
					<option value="2" th:selected="${videoInfo.status==2 ? true : false}">下架</option>
				</select>
		    </li>
		    
		     <li>
			 	<br/>
				<label>资料介绍：<b>*</b></label>
				<input type="hidden" name="description" id="description" th:value="${videoInfo.description}"/>
				<script id="editor" type="text/plain"   style="line-height: 20px; overflow: hidden;width:80%;height:300px"></script>
			 </li>
		    
			<li>
				<label>&nbsp;</label>
				<button type="button" class="btn" onclick="saveFrom()">保存</button>
				<button type="button" class="btn" onclick="window.history.go(-1);">取消</button>
			</li>
		</ul>
	</form>
</div>
</body>

<!--视频插件调用方法-->
<script>
$(function () {
	//视频
	jsModern.video("#video");
	//播放视频
	$(".VideoBtn").click(function () {
		var video = document.getElementById("videoShow");
		video.play();
		$('.VideoBtn').hide();
	})
})
</script>

<script type="text/javascript">
var tool = 
	[
		"fullscreen", "undo", "redo", "|",
		"bold", "italic", "underline", "fontborder", "strikethrough", "superscript", "subscript", "removeformat", "formatmatch", "autotypeset", "blockquote", "pasteplain", "|", "forecolor", "backcolor", "insertorderedlist", "insertunorderedlist", "selectall", "cleardoc", "|",
		"rowspacingtop", "rowspacingbottom", "lineheight", "|",
		"customstyle", "paragraph", "fontfamily", "fontsize", "|",
		"directionalityltr", "directionalityrtl", "indent", "|",
		"justifyleft", "justifycenter", "justifyright", "justifyjustify", "|", "touppercase", "tolowercase", "|",
		"imagenone", "imageleft", "imageright", "imagecenter", "|",
		"emotion","pagebreak", "template", "|",
		"horizontal", "date", "time", "spechars",  "|",
		"inserttable", "deletetable", "insertparagraphbeforetable", "insertrow", "deleterow", "insertcol", "deletecol", "mergecells", "mergeright", "mergedown", "splittocells", "splittorows", "splittocols", "charts", "|",
		"preview", "searchreplace","drafts" 
		];
          
var editor = new baidu.editor.ui.Editor({
	//toolbars: [tool],
	elementPathEnabled : false
    ,wordCount:false         //是否开启字数统计
    ,maximumWords:2000       //允许的最大字符数
    ,wordCountMsg:'当前已输入 {#count} 个字符，您还可以输入{#leave} 个字符'
    //超出字数限制提示  留空支持多语言自动切换，否则按此配置显示
    ,wordOverFlowMsg:'<span style="color:red;">你输入的字符个数已经超出最大允许值！</span>' 
});

$(function(){
	editor.render('editor');
	editor.ready( function () { editor.setContent( $('#description').val() ); });  
});
</script>

<script type="text/javascript">
$(function () {

})

function saveFrom(){
	var contents = UE.getEditor('editor').getContent();
	$('#description').val(contents);
	var url="[[${sysUrl}]]/sys/train/video/save";
	var params = $("#submitFrom").serialize();
	$.post(url,params,function(data){
		if(data != null){
				if(data.meta.success){
					layer.msg("操作成功!",{icon:1});
			    	setTimeout(function(){
			    		window.location.href ='[[${sysUrl}]]/sys/train/video/list.html';
					},1000);
				}else{
					layer.msg(data.meta.message,{icon:11});
				}
		}
		
	});
}


</script>


</html>