<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/jquery.validate.min.js" th:src="@{/static/sys/js/jquery.validate.min.js}"></script>
<script src="sys/js/jquery-validation/messages_zh.js" th:src="@{/static/sys/js/jquery-validation/messages_zh.js}"></script>
<script src="sys/js/My97DatePicker/WdatePicker.js" th:src="@{/static/sys/js/My97DatePicker/WdatePicker.js}"></script>


 <style>
    	.clearfix:after {
			visibility: hidden;
			display: block;
			font-size: 0;
			content: " ";
			clear: both;
			height: 0;
		}
		.clearfix { display: inline-table; }
		* html .clearfix { height: 1%; }
		.clearfix { display: block; }
		.fl{display:inline;float:left}
		clearfix >control-label-error{display:inline;float:left;marign-left:10px}
		 label.control-label-error {
  				color: Red;
             }
          .lispan {line-height: 34px;}   
          
          .select1{
   		    width:100%;
		    height: 32px;
		    line-height: 32px;
		    border-top: solid 1px #a7b5bc;
		    border-left: solid 1px #a7b5bc;
		    border-right: solid 1px #ced9df;
		    border-bottom: solid 1px #ced9df;
		    opacity:1;
	        margin-bottom: 10px;
    	}
    	
    	textarea{
    	width: 382px;
    	}
    </style>
</head>

<body>
<div class="place">
    <span>位置：</span>
    <ul class="placeul">
		<li><a href="#">运营管理</a></li>
		<li><a th:href="@{/sys/story/storyList.html}">打卡列表</a></li>
	</ul>
</div>
<div class="formbody">
	<div class="formtitle"><span th:text="${ws.id} ? '修改打卡' :'新增打卡'">新增故事</span></div>
	<form id="submitFrom"   method="post" class="form-horizontal form-validate">
		     <input type="hidden" name="id" th:if="${ws.id}" th:value="${ws.id}"/>
		     <input type="hidden" name="type"  th:value="${ws.type}"/>
		<ul class="forminfo">
			<li class="clearfix">
				<label>标题:<b>*</b></label>
				<input type="text" id="title" name="title" class="dfinput fl" th:value="${ws.title}">
			</li>
			<li class="clearfix">
			    <input type="hidden" name="titleImg" id="titleImg" th:value="${ws.titleImg}"/>
				<label class="upload-file">标题封面<b>*</b></label>
				<img id="titleImgImg" th:src=" ${ws.titleImg} !=null  ? (${ws.titleImg} !='' ? ${imgUrl}+''+${ws.titleImg}+'?x-oss-process=image/resize,m_lfit,h_100,w_120' : '' ) :'' "  style="width:200px;height:140px; margin-left: 109px;" />
				<input type="file" id="upfile">
			</li>
			<li class="clearfix">
				<label>段落1:</label>
				<textarea rows="10" id="stage1" name="stage1"    class="textinput" cols="10">[[${ws.stage1}]]</textarea>
			</li>
			<li class="clearfix">
				<label>段落2:</label>
				<textarea rows="10" id="stage2" name="stage2"  class="textinput" cols="10">[[${ws.stage2}]]</textarea>
			</li>
			<li class="clearfix">
				<label>段落3:</label>
				<textarea rows="10" id="stage3" name="stage3" class="textinput" cols="10">[[${ws.stage3}]]</textarea>
			</li>
			<li class="clearfix">
				<label>小标题1:<b>*</b></label>
				<input type="text" id="subtitle1" name="subtitle1" class="dfinput fl" th:value="${ws.subtitle1}">
			</li>
			<li class="clearfix">
				<label>小内容1:</label>
				<textarea rows="10" id="detail1" name="detail1" class="textinput" cols="10">[[${ws.detail1}]]</textarea>
			</li>
			<li class="clearfix">
				<label>小标题2:<b>*</b></label>
				<input type="text" id="subtitle2" name="subtitle2" class="dfinput fl" th:value="${ws.subtitle2}">
			</li>
			<li class="clearfix">
				<label>小内容2:</label>
				<textarea rows="10" id="detail12" name="detail2" class="textinput"  cols="10">[[${ws.detail2}]]</textarea>
			</li>
			
			<li class="clearfix">
			    <input type="hidden" name="qrCode" id="qrCode" th:value="${ws.qrCode}"/>
				<label class="upload-file">二维码<b>*</b></label>
				<img id="qrCodeImg" th:src=" ${ws.qrCode} !=null  ? (${ws.qrCode} !='' ? ${imgUrl}+''+${ws.qrCode}+'?x-oss-process=image/resize,m_lfit,h_100,w_120' : '' ) :'' "  style="width:200px;height:140px; margin-left: 109px;" />
				<input type="file" id="upfileCode">
			</li>
			<li class="clearfix">
			    <input type="hidden" name="img" id="img" th:value="${ws.img}"/>
				<label class="upload-file">打卡封面<b>*</b></label>
				<img id="imgImg" th:src=" ${ws.img} !=null  ? (${ws.img} !='' ? ${imgUrl}+''+${ws.img}+'?x-oss-process=image/resize,m_lfit,h_100,w_120' : '' ) :'' "  style="width:200px;height:140px; margin-left: 109px;" />
				<input type="file" id="upfileImg">
			</li>
			
			
			<li class="clearfix" >
			    <label>开始时间：<b>*</b></label>
				<input type="text" id="startTime" class="dfinput fl" name="startTime" 
				th:value="${#calendars.format(ws.startTime,'yyyy-MM-dd')}"
				onfocus="WdatePicker({dateFmt:'yyyy-MM-dd '})" />
		   </li>
			<li class="clearfix" >
			    <label>结束时间：<b>*</b></label>
				<input type="text" id="endTime" class="dfinput fl" name="endTime" 
				th:value="${#calendars.format(ws.endTime,'yyyy-MM-dd')}"
				onfocus="WdatePicker({dateFmt:'yyyy-MM-dd '})" />
		   </li>
			<li class="clearfix" >
			    <label>打卡天数：<b>*</b></label>
				<input type="number" id="daysNum" class="dfinput fl" name="daysNum" th:value="${ws.daysNum}" />
		   </li>
			
			<li>
				<label>&nbsp;</label>
				<button type="submit" class="btn">保存</button>
				<button type="button" class="btn" onclick="window.history.go(-1);">取消</button>
			</li>
		</ul>
	</form>
</div>
</body>
<script th:include="sys/common/fileUpload" th:remove="tag"></script> 
<script type="text/javascript">

$(function(){
	$("#submitFrom").validate({
		ignore:"",
		rules : {
			
			title : {
				required : true,
				maxlength: 100
			},
			titleImg : {
				required : true
			},
			stage1 : {
				required : true
			},
			stage2 : {
				required : true
			},
			stage3 : {
				required : true
			},
			subtitle1 : {
				required : true
			},
			detail1 : {
				required : true
			},
			subtitle2 : {
				required : true
			},
			detail2 : {
				required : true
			},
			qrCode : {
				required : true
			},
			img : {
				required : true
			},
			startTime : {
				required : true
			},
			endTime : {
				required : true
			},
			daysNum : {
				required : true
			}
		},
		messages: {
			title : {
				required : "标题不能为空",
				maxlength : "最多100个字符",
			},
			titleImg : {
				required : "标题图片不能为空"
			},
			stage1 : {
				required : "段落1不能为空"
			},
			stage2 : {
				required : "段落2不能为空"
			},
			stage3 : {
				required : "段落3不能为空"
			},
			subtitle1 : {
				required : "小标题1不能为空"
			},
			detail1 : {
				required : "小内容1不能为空"
			},
			subtitle2 : {
				required : "小标题2不能为空"
			},
			detail2 : {
				required : "小内容2不能为空"
			},
			qrCode : {
				required :"二维码不能为空"
			},
			img : {
				required :"封面图片不能为空"
			},
			startTime : {
				required : "开始不能为空"
			},
			endTime : {
				required : "结束不能为空"
			},
			daysNum : {
				required : "打卡天数不能为空"
			}
			
		},
		errorPlacement : function(error, element) {
				error.appendTo(element.parent()); 
		},
		submitHandler : function(form) {
			roleFrom();
		}
	});
	
});
function roleFrom(){
	var url="[[${sysUrl}]]/sys/story/storySave";
	var params = $("#submitFrom").serialize();
	$.post(url,params,function(data){
		if(data != null){
				if(data.meta.success){
					parent.layer.msg("操作成功!",{icon:1});
			    	setTimeout(function(){
			    		window.location.href ='[[${sysUrl}]]/sys/story/storyList.html';
					},1000);
				}else{
					parent.layer.msg(data.meta.message,{icon:11});
				}
		}
		
	});
}

$(function(){
	initUpload(uploadOptions("upfile","上传封面图片"),"titleImg","titleImgImg");
	initUpload(uploadOptions("upfileCode","上传二维码"),"qrCode","qrCodeImg");
	initUpload(uploadOptions("upfileImg","上传打卡封面"),"img","imgImg");
});

//附件上传
function uploadFile(){
	$("#upfile").uploadify("upload", "*");
	$("#upfileCode").uploadify("upload", "*");
	$("#upfileImg").uploadify("upload", "*");
}

</script>
</html>