<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>私塾家</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="icon" href="/favicon.ico" th:href="@{/favicon.ico}" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" th:href="@{/favicon.ico}" type="image/x-icon" />

<link href="sys/css/bootstrap.min.css" th:href="@{/static/sys/css/bootstrap.min.css}" rel="stylesheet"/>
<link href="sys/css/bootstrap-responsive.min.css" th:href="@{/static/sys/css/bootstrap-responsive.min.css}" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" th:href="@{/static/sys/css/font-awesome.min.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/static/sys/bootstrap/css/style-metro.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/static/sys/bootstrap/css/style.css}" />





<!-- - -->
<script src="js/jquery-2.2.4.min.js" th:src="@{/static/js/jquery-2.2.4.min.js}"></script>
<script src="sys/js/bootbox.min.js" th:src="@{/static/sys/js/bootbox.min.js}"></script>
<script src="sys/js/bootstrap.min.js" th:src="@{/static/sys/js/bootstrap.min.js}"></script>
<script src="sys/js/app.js" th:src="@{/static/sys/js/app.js}"></script>
<script src="sys/js/form-wizard.js" th:src="@{/static/sys/js/form-wizard.js}"></script>

<script type="text/javascript" th:src="@{/static/sys/js/jquery.validate.min.js}"></script> 
<script type="text/javascript" th:src="@{/static/sys/js/jquery-validation/messages_zh.js}"></script> 
<script type="text/javascript" th:src="@{/static/sys/js/jquery.bootstrap.wizard.min.js}"></script>
<script src="sys/js/My97DatePicker/WdatePicker.js" th:src="@{/static/sys/js/My97DatePicker/WdatePicker.js}"></script>
<style type="text/css">

    input.ui-wizard-content,input.input-xlarge{
          height: 35px;
    }
</style>
</head>
<body>
			<div class="container-fluid">
			<div class="row-fluid" style="display: none;">
					<div class="span12">
						<div class="box-title">
						<h3 class="page-title hide"></h3>
							<div class="span8">
								<h3>
								</h3>
							</div>
						</div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span12">
						<div class="portlet box blue" id="form_wizard_1">
							<div class="portlet-body form">
								<form  method="post" class="form-horizontal" id="submit_form">
								<input type="hidden" name="id" th:if="${card.id}" th:value="${card.id}">
								<input type="hidden" name="libId" th:if="${card.libId}" th:value="${card.libId}">
								<input type="hidden" name="qrCode" th:if="${card.qrCode}" th:value="${card.qrCode}">
								<input type="hidden" name="playStatus"  th:value="${card.playStatus}!=null?${card.playStatus}:0">
									<div class="form-wizard">
										<div class="navbar steps">
											<div class="navbar-inner">
												<ul class="row-fluid">
													<li class="span2">
														<a href="#tab1" data-toggle="tab" class="step active">
														<span class="number">1.活动设置</span>
														</a>
													</li>
													<li class="span2">
														<a href="#tab2" data-toggle="tab" class="step">
														<span class="number">2.奖项设置</span>
														</a>
													</li>
													<li class="span2">
														<a href="#tab3" data-toggle="tab" class="step">
														<span class="number">3.结束设置</span>
														</a>
													</li>
													<li class="span2">
														<a href="#tab4" data-toggle="tab" class="step">
														<span class="number">4.抽奖设置</span>
														</a> 
													</li>
													<li class="span2">
														<a href="#tab5" data-toggle="tab" class="step">
														<span class="number">5.确认完成！</span>
														</a> 
													</li>
												</ul>
											</div>
										</div>
										<div id="bar" class="progress progress-success progress-striped">
											<div class="bar"></div>
										</div>
										<div class="tab-content">
											<div class="alert alert-error hide">
												<button class="close" data-dismiss="alert"></button>
												您输入的信息有不符合要求. 请检查您的输入信息.
											</div>
											<div class="alert alert-success hide">
												<button class="close" data-dismiss="alert"></button>
												输入信息校验成功!
											</div>
											<div class="tab-pane active" id="tab1">
												<h3 class="block">1、填写活动内容</h3>
												<div class="control-group">
													<label class="control-label">微信关键字<span class="required">*</span></label>
													<div class="controls">
														<input type="text"  class="span6 m-wrap" data-rule-required="true" name="keyword" th:value="${card.keyword}"/>
														<span class="help-inline">微信用户输入此关键字触发恢复此消息</span>
													</div>
												</div>
												<div class="control-group">
													<label class="control-label">活动标题<span class="required">*</span></label>
													<div class="controls">
														<input type="text"  class="span6 m-wrap" data-rule-required="true" name="name" th:value="${card.name}"/>
														<span class="help-inline">请输入活动标题</span>
													</div>
												</div>
												<div class="control-group">
													<label class="control-label">兑奖信息<span class="required">*</span></label>
													<div class="controls">
														<input type="text"  class="span6 m-wrap"  name="info" data-rule-required="true" th:value="${card.info}"/>
														<span class="help-inline">请输入兑奖信息</span>
													</div>
												</div>
												<div class="control-group">
												    <label class="control-label">活动开始图片<span class="required">*</span></label>
													<div class="controls" >
														<img id="startPicurlImg" th:src=" ${card.startPicurl} !=null  ? (${card.startPicurl} !='' ? ${imgUrl}+''+${card.startPicurl} : ${imgUrl}+'/images/zp_nr.png' ) :  ${imgUrl}+'/images/zp_nr.png' "  style="width:200px;height:140px;" />
														<p></p>
														<input type="hidden" name="startPicurl" id="startPicurl" th:value="${card.startPicurl} !=null  ? (${card.startPicurl} !='' ? ${card.startPicurl} : '/images/zp_nr.png' ):'/images/zp_nr.png'  "/>
														<span class="help-inline">
														<input type="file" id="startPicurlfile">
														</span>
													</div>
												</div>
												<div class="control-group">
													<label class="control-label">活动简介<span class="required">*</span></label>
													<div class="controls">
													    <textarea id="playContent" style="width:700px;" class="input-xlarge ui-wizard-content ui-helper-reset ui-state-default" data-rule-required="true" name="content">[[${card.content}]]</textarea>
														<span class="help-inline">活动简介，不要超过100个字！</span>
													</div>
												</div>
												<div class="control-group">
													<label class="control-label">活动时间<span class="required">*</span></label>
													<div class="span7">
											        <input id="startTime"  name="startTime" data-rule-required="true" style="height: 32px;" class="Wdate" type="text" th:value="${card.startTime}"
					        	onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'#F{$dp.$D(\'endTime\')}'})"/>
					        	&nbsp;到&nbsp;
					        	<input id="endTime"  name="endTime" data-rule-required="true" class="Wdate" type="text" style="height: 32px;" th:value="${card.endTime}" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'startTime\')}'})"/>
													<span class="help-inline">请输入活动时间</span>
													</div>
												</div>
												
												<div class="control-group">
													<label class="control-label">活动详细说明：<span class="required">*</span></label>
													<div class="controls">
														<textarea   name="details" style="width:700px;height:300px;" class="input-xlarge ui-wizard-content ui-helper-reset ui-state-default" data-rule-required="true">[[${card.details}]]</textarea>
														<span class="help-inline">输入活动内容,不要超过2000字</span>
													</div>
												</div>

												<div class="control-group">
													<label class="control-label" for="sttxt">重复抽奖回复：<span class="required">*</span></label>
													<div class="controls">
													    <input   class="input-xlarge ui-wizard-content ui-helper-reset ui-state-default valid" type="text" data-rule-required="true"  name="repeatLotteryReply" th:value="${card.repeatLotteryReply}">
													<span class="help-inline"> 如果设置只允许抽一次奖的，请写：你已经玩...。 如果设置可多次抽奖，请写：亲，继续努力哦！</span>
													</div>
												</div>
											</div>
											<div class="tab-pane" id="tab2">

												<h3 class="block">2.添加活动奖品</h3>
												<div class="control-group">
													<label class="control-label" for="cNameOne">一等奖奖品设置：</label>
													<div class="controls">
														<input id="cNameOne"  class="input-xlarge ui-wizard-content ui-helper-reset ui-state-default" type="text" data-rule-maxlength="50" data-rule-required="true" name="cNameOne" th:value="${card.cNameOne}">
														<span class="maroon">*</span>
														<span class="help-inline">请不要多于50字! </span>
													</div>
												</div>
												<div class="control-group">
													<label class="control-label" for="cNumOne">一等奖奖品数量：</label>
													<div class="controls">
														<input id="cNumOne"  class="input-mini ui-wizard-content ui-helper-reset ui-state-default" type="text" data-rule-number="true" data-rule-required="true" name="cNumOne" th:value="${card.cNumOne}">
														<span class="maroon">*</span>
													<span class="help-inline">小于500 </span>
													</div>
												</div>
												<div class="control-group">
													<label class="control-label" for="cNameTwo">二等奖奖品设置：</label>
													<div class="controls">
														<input id="cNameTwo"  class="input-xlarge ui-wizard-content ui-helper-reset ui-state-default" type="text" data-rule-maxlength="50" name="cNameTwo" th:value="${card.cNameTwo}" >
														<span class="help-inline">请不要多于50字! </span>
													</div>
												</div>
												<div class="control-group">
													<label class="control-label" for="cNumTwo">二等奖奖品数量：</label>
													<div class="controls">
														<input id="cNumTwo"  class="input-mini ui-wizard-content ui-helper-reset ui-state-default" type="text" data-rule-number="true" name="cNumTwo" th:value="${card.cNumTwo}">
														<span class="help-inline">小于500 </span>
												   </div>
												</div>
												<div class="control-group">
													<label class="control-label" for="cNameThree">三等奖奖品设置：</label>
													<div class="controls">
														<input id="cNameThree"  class="input-xlarge ui-wizard-content ui-helper-reset ui-state-default" type="text" data-rule-maxlength="50" name="cNameThree" th:value="${card.cNameThree}">
														<span class="help-inline">请不要多于50字! </span>
													</div>
												</div>
												<div class="control-group">
													<label class="control-label" for="cNumThree">三等奖奖品数量：</label>
													<div class="controls">
														<input id="cNumThree"  class="input-mini ui-wizard-content ui-helper-reset ui-state-default" type="text" data-rule-number="true" name="cNumThree" th:value="${card.cNumThree}">
														<span class="help-inline">小于500  </span>
													</div>
												</div>
												<div class="control-group">
													<label class="control-label" for="thirdnums"></label>
													<div class="controls">
														<a class="btn" data-toggle="collapse" href="#collapse_div">显示更多奖项</a>
													</div>
												</div>
												<div id="collapse_div" class="collapse">
													<div class="control-group">
														<label class="control-label" for="cNameFour">四等奖奖品设置：</label>
														<div class="controls">
															<input id="cNameFour"  class="input-xlarge ui-wizard-content ui-helper-reset ui-state-default" type="text" data-rule-maxlength="50" name="cNameFour" th:value="${card.cNameFour}">
															<span class="help-inline">请不要多于50字! </span>
														</div>
													</div>
													<div class="control-group">
														<label class="control-label" for="cNumFour">四等奖奖品数量：</label>
														<div class="controls">
															<input id="cNumFour"  class="input-mini ui-wizard-content ui-helper-reset ui-state-default" type="text" data-rule-number="true" name="cNumFour" th:value="${card.cNumFour}">
															<span class="help-inline">小于500 </span>
														</div>
													</div>
													<div class="control-group">
														<label class="control-label" for="cNameFive">五等奖奖品设置：</label>
														<div class="controls">
															<input id="cNameFive"  class="input-xlarge ui-wizard-content ui-helper-reset ui-state-default" type="text" data-rule-maxlength="50" name="cNameFive" th:value="${card.cNameFive}">
															<span class="help-inline">请不要多于50字! </span>
														</div>
													</div>
													<div class="control-group">
														<label class="control-label" for="cNumFive">五等奖奖品数量：</label>
														<div class="controls">
															<input id="cNumFive"  class="input-mini ui-wizard-content ui-helper-reset ui-state-default" type="text" data-rule-number="true" name="cNumFive" th:value="${card.cNumFive}">
															<span class="help-inline">小于500  </span>
													 	</div>
													</div>
													<div class="control-group">
														<label class="control-label" for="cNameSix">六等奖奖品设置：</label>
														<div class="controls">
															<input id="cNameSix"  class="input-xlarge ui-wizard-content ui-helper-reset ui-state-default" type="text" data-rule-maxlength="50" name="cNameSix" th:value="${card.cNameSix}">
															<span class="help-inline">请不要多于50字! </span>
														</div>
													</div>
													<div class="control-group">
														<label class="control-label" for="cNumSix">六等奖奖品数量：</label>
														<div class="controls">
															<input id="cNumSix"  class="input-mini ui-wizard-content ui-helper-reset ui-state-default" type="text" data-rule-number="true" name="cNumSix" th:value="${card.cNumSix}">
															<span class="help-inline">小于500  </span>
														</div>
													</div>
													</div>
								           </div>

											<div class="tab-pane" id="tab3">
												<h3 class="block">活动结束说明！</h3>
												<div class="span7">
													<div class="control-group">
														<label class="control-label" for="endTheme">活动结束公告主题：</label>
													<div class="controls">
														<input id="endTheme"  class="input-xlarge ui-wizard-content ui-helper-reset ui-state-default valid" type="text" data-rule-required="true" th:value="${card.endTheme} !=null ? ${card.endTheme} : 活动已经结束了 " name="endTheme">
														<span class="maroon">*</span>
														<span class="help-inline">请不要多于50字! </span>
														
													</div>
												    </div>
												    <div class="control-group">
														<label class="control-label" for="endInstruction">活动结束说明：</label>
														<div class="controls">
														<textarea id="endInstruction" class="input-xlarge ui-wizard-content ui-helper-reset ui-state-default valid" data-rule-required="true" name="endInstruction" rows="5">[[${card.endInstruction}]]</textarea>
														</div>
													</div>
												</div>
												
												<div class="span4">
													<div>
														<img id="endPicurlImg" th:src=" ${card.endPicurl} !=null  ? (${card.endPicurl} !='' ? ${imgUrl}+''+${card.endPicurl} : ${imgUrl}+'/activity-lottery-end.jpg' ) :  ${imgUrl}+'/activity-lottery-end.jpg' "  style="width:200px;height:140px; margin-left: 109px;" />
														<p></p>
														<input type="hidden" name="endPicurl" id="endPicurl" th:value="${card.endPicurl} !=null  ? (${card.endPicurl} !='' ? ${card.endPicurl} : '/activity-lottery-end.jpg' ):'/activity-lottery-end.jpg' "/>
														<span class="help-inline">
														<input type="file" id="upfile">
														<span class="help-inline">建议尺寸：宽420像素，高60像素的png图片</span>
														</span>
													</div>
												</div>
												
												
											</div>
											<div class="tab-pane" id="tab4">
												<h3 class="block">4. 活动抽奖设置！</h3>
												<div class="control-group">
			                                        <label for="third" class="control-label">预计活动的人数：</label>
			                                        <div class="controls">
			                                            <input type="text"  name="expectedNumber" id="expectedNumber" th:value="${card.expectedNumber}" class="input-xlarge" data-rule-maxlength="15" />
			                                            <span class="help-inline">预估活动人数直接影响抽奖概率!
			                                            </span>
			                                        </div>
                                    			</div>
                                    			<div class="control-group">
			                                        <label for="third" class="control-label">中奖概率：</label>
			                                        <div class="controls">
			                                            <input type="text"  name="percent" id="percent" class="input-xlarge" th:value="${card.percent}" data-rule-maxlength="3" />%
			                                            <span class="help-inline">中奖概率 填写1~100%
			                                            </span>
			                                        </div>
                                    			</div>
			                                    <div class="control-group">
			                                        <label for="third" class="control-label">每人最多允许抽奖总次数：</label>
			                                        <div class="controls">
			                                            <input type="text"  name="drawTimes" id="drawTimes" th:value="${card.drawTimes}"class="input-xlarge" value="1" data-rule-maxlength="15" />
			                                            <span class="help-inline">必须大于0小于30 推荐只设置1次!
			                                            </span>
			                                        </div>
			                                    </div>
		                                    	<div class="control-group">
			                                        <label for="third" class="control-label">每天最多抽奖次数：</label>
			                                        <div class="controls">
			                                            <input type="text"  name="maxTimes" id="maxTimes" class="input-xlarge" th:value="${card.maxTimes} !=null ? ${card.maxTimes} : 0 " data-rule-maxlength="15" />
			                                            <span class="help-inline"> 必须小于总抽奖次数！ 0 为不限制 抽完总数就不能抽了! 可以抽奖天数 = 总数/每天抽奖次数!
			                                            </span>
			                                        </div>
                                    			</div>
			                                    <div class="control-group">
			                                        <label for="third" class="control-label">兑奖密码：</label>
			                                        <div class="controls">
			                                            <input type="text"  name="ticketPwd" id="ticketPwd"  th:value="${card.ticketPwd}" class="input-xlarge" data-rule-maxlength="15" />
			                                            <span class="help-inline">消费确认密码长度小于15位 不设置密码,兑奖页面的密码输入框则不出现
			                                            </span>
			                                        </div>
			                                    </div>
			                                    <div class="control-group">
			                                        <label for="third" class="control-label">活动类型：</label>
			                                        <div class="controls">
			                                            <label class="radio inline">
			                                                <input type="radio" name="playType" value="1" checked="checked" />
			                                              		  大转盘
			                                            </label>
			                                            <label class="radio inline">
			                                                <input type="radio" name="playType" value="2" />
			                                                	刮刮乐
			                                            </label>
														 <label class="radio inline">
			                                                <input type="radio" name="playType" value="3" />
			                                                	砸金蛋
			                                            </label>
			                                        </div>
			                                    </div> 
			                                    <div class="control-group">
			                                        <label for="renamesn" class="control-label">SN码：</label>
			                                        <div class="controls">
			                                            <input type="text"  name="snCode" id="snCode" class="input-xlarge" th:value="${card.snCode} !=null ? ${card.snCode}: snCode" />
			                                            <span class="help-inline">例如：sn码，根据sn+随机事件参数 生成中奖sncode
			                                            </span>
			                                        </div>
			                                    </div>
			                                   
											</div>
											<div class="tab-pane" id="tab5">
												<h3 class="block">5、确认完成！</h3>
												<div class="control-group">
													 <h3>确认信息无误后，请保存提交！</h3>
												</div>
											</div>
										</div>
										<div class="form-actions clearfix">
										<input type="hidden" name="playType" />
										<input type="hidden" name="playId"  />
											<a href="javascript:;" class="btn button-previous">
											<i class="m-icon-swapleft"></i> 回上一步看看 
											</a>
											<a href="javascript:;" class="btn blue button-next">
											亲，下一步继续！ <i class="m-icon-swapright m-icon-white"></i>
											</a>
											<button  type="button"  onclick="submitFrom();"  class="btn green button-submit">
											点我保存 <i class="m-icon-swapright m-icon-white"></i>
											</button>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
</body>
<script th:include="sys/common/fileUpload" th:remove="tag"></script> 
<script>

$(function(){
	initUpload(uploadOptions("upfile","上传照片"),"endPicurl","endPicurlImg");
	initUpload(uploadOptions("startPicurlfile","上传照片"),"startPicurl","startPicurlImg");
});

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

		jQuery(document).ready(function() {       

		   // initiate layout and plugins

		   App.init();

		   FormWizard.init();
		   

		});

		
		function submitFrom(){
			var url="[[${sysUrl}]]/sys/card/saveCard";
			var params = $("#submit_form").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/card/cardlist.html';
							},1000);
						}else{
							parent.layer.msg(data.meta.message,{icon:11});
						}
				}
				
			});
		}
	</script>			
</html>