<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>
</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;
	}
	#mealServiceAdd .zwfb_shop_table {
		margin-top: 10px
	}
	#mealServiceAdd tbody {
	    display: table-row-group;
	    vertical-align: middle;
    	border-color: inherit;
	}
	#mealServiceAdd .fwmc_xxk {
	    overflow: hidden;
	    margin-left: 20px;
	}
	#mealServiceAdd .fwmc_xxk li {
	    float: left;
	    width: 150px;
	    height: 52px;
	    border: 1px solid #ddd;
	    font-size: 18px;
	    color: #666;
	    margin-right: 30px;
	    text-align: center;
	    margin-bottom: 10px;
	    overflow: hidden;
	    cursor: pointer;
	}
	#mealServiceAdd .fwmc_xxk li p {
	    line-height: 18px;
	    font-size: 12px;
	    color: #999;
	    margin-top: 5px;
	}
	#mealServiceAdd .zwsl_num {
	    margin-left: 20px;
	    font-size: 16px;
	    color: #333;
	}
	#mealServiceAdd .zwsl_num span {
	    color: #999;
	    font-size: 12px;
	    padding-left: 10px;
	}
	#mealServiceAdd .nmb_jj {
	    overflow: hidden;
	    margin-left: 20px;
	}
	#mealServiceAdd .nmb_jj li.jian {
	    border-right: none;
	    cursor: pointer;
	    color: #999;
	    width: 30px;
	    padding: 0;
	}
	#mealServiceAdd .nmb_jj li {
	    float: left;
	    text-align: center;
	    line-height: 30px;
	    border: 1px solid #ddd;
	    font-size: 20px;
	    padding: 0 8px;
	}
	#mealServiceAdd .nmb_jj li .srkk {
	    width: 30px;
	    font-size: 16px;
	    border: none;
	    line-height: 30px;
	    text-align: center;
	    outline: 0;
	    background: #FFF;
	}
	#mealServiceAdd .nmb_jj li.jia {
	    border-left: none;
	    cursor: pointer;
	    color: #999;
	    width: 30px;
	    padding: 0;
	}
	#mealServiceAdd a.ty_but {
	    width: 130px;
	    height: 40px;
	    line-height: 40px;
	    text-align: center;
	    display: block;
	    font-size: 16px;
	    color: #fff;
	    border-radius: 3px;
	    background: #169ed8;
	}
	#mealServiceAdd a.ty_but:hover {
	    background: #1187ba;
	}
	#mealServiceAdd .fwmc_xxk li.sign_type_select_on {
	    background: url(/static/sys/images/fwkk.jpg) no-repeat center;
	    color: #169ed8;
	    border: 1px solid #169ed8;
	}
	
	
	
	
	
	
	#libServiceAdd .zwfb_shop_table {
		margin-top: 10px
	}
	#libServiceAdd tbody {
	    display: table-row-group;
	    vertical-align: middle;
    	border-color: inherit;
	}
	#libServiceAdd .fwmc_xxk {
	    overflow: hidden;
	    margin-left: 20px;
	}
	#libServiceAdd .fwmc_xxk li {
	    float: left;
	    width: 150px;
	    height: 52px;
	    border: 1px solid #ddd;
	    font-size: 18px;
	    color: #666;
	    margin-right: 30px;
	    text-align: center;
	    margin-bottom: 25px;
	    overflow: hidden;
	    cursor: pointer;
	}
	#libServiceAdd .fwmc_xxk li p {
	    line-height: 18px;
	    font-size: 12px;
	    color: #999;
	    margin-top: 5px;
	}
	#libServiceAdd .zwsl_num {
	    margin-left: 20px;
	    font-size: 16px;
	    color: #333;
	}
	#libServiceAdd .zwsl_num span {
	    color: #999;
	    font-size: 12px;
	    padding-left: 10px;
	}
	#libServiceAdd .nmb_jj {
	    overflow: hidden;
	    margin-left: 20px;
	}
	#libServiceAdd .nmb_jj li.jian {
	    border-right: none;
	    cursor: pointer;
	    color: #999;
	    width: 30px;
	    padding: 0;
	}
	#libServiceAdd .nmb_jj li {
	    float: left;
	    text-align: center;
	    line-height: 30px;
	    border: 1px solid #ddd;
	    font-size: 20px;
	    padding: 0 8px;
	}
	#libServiceAdd .nmb_jj li .srkk {
	    width: 30px;
	    font-size: 16px;
	    border: none;
	    line-height: 30px;
	    text-align: center;
	    outline: 0;
	    background: #FFF;
	}
	#libServiceAdd .nmb_jj li.jia {
	    border-left: none;
	    cursor: pointer;
	    color: #999;
	    width: 30px;
	    padding: 0;
	}
	#libServiceAdd a.ty_but {
	    width: 130px;
	    height: 40px;
	    line-height: 40px;
	    text-align: center;
	    display: block;
	    font-size: 16px;
	    color: #fff;
	    border-radius: 3px;
	    background: #169ed8;
	}
	#libServiceAdd a.ty_but:hover {
	    background: #1187ba;
	}
	#libServiceAdd .fwmc_xxk li.sign_type_select_on {
	    background: url(/static/sys/images/fwkk.jpg) no-repeat center;
	    color: #169ed8;
	    border: 1px solid #169ed8;
	}
	
	
	
</style>
<body style="min-width: 100%;">

<div class="rightinfo">	
	<div class="formbody" id="libServiceAdd" >
		<input type="hidden" id="id" th:value="${merchant.id}" >
		<table border="0" cellspacing="0" cellpadding="0" class="zwfb_shop_table">
		      <tbody>
		      	<tr valign="top">
			        <td align="right" width="70" style="line-height: 50px;font-weight: 700">购买服务包：</td>
			        <td style="width: 50px;">
			        	<ul class="fwmc_xxk">
			           	<li th:class="${merchant.signType==1 ? 'sign_type_select sign_type_select_on' : 'sign_type_select' }"  data-type="1" data-lib_service="30" data-unit_price="800" >
			              <p>服务包1</p>
			              	30人<i>/1月</i>
			           	</li>
			          </ul>
			        </td>
			        
			        <td style="width: 50px;">
			        	<ul class="fwmc_xxk">
			           	<li th:class="${merchant.signType==2 ? 'sign_type_select sign_type_select_on' : 'sign_type_select' }" data-type="2" data-lib_service="50" data-unit_price="1200" >
			              <p>服务包2</p>
			              	50人<i>/1月</i>
			           	</li>
			          </ul>
			        </td>
			        
			         <td style="width: 50px;">
			        	<ul class="fwmc_xxk">
			           	<li th:class="${merchant.signType==3 ? 'sign_type_select sign_type_select_on' : 'sign_type_select' }"  data-type="3" data-lib_service="100" data-unit_price="2000" >
			              <p>服务包3</p>
			            	100人<i>/1月</i>
			           	</li>
			          </ul>
			        </td>
			      
			        
		      </tr>
		      
		      <tr valign="top">
			        <td align="right" width="70" style="line-height: 50px;font-weight: 700"></td>
			        <td style="width: 50px;">
			        	<ul class="fwmc_xxk">
			           	<li th:class="${merchant.signType==4 ? 'sign_type_select sign_type_select_on' : 'sign_type_select' }"  data-type="4" data-lib_service="20" data-unit_price="400" >
			              <p>服务包4</p>
			              	20人<i>/1月</i>
			           	</li>
			          </ul>
			        </td>
			        
			        <td style="width: 50px;">
			        	<ul class="fwmc_xxk">
			           	<li th:class="${merchant.signType==5 ? 'sign_type_select sign_type_select_on' : 'sign_type_select' }"  data-type="5" th:data-lib_service="0" data-unit_price="0">
			              <p>服务包5</p>
			              	自定义<i>/1月</i>
			           	</li>
			          </ul>
			        </td>
		      </tr>
		      
		       <tr id="lib_service_tr" valign="top">
		  			<td align="right" width="70" style="line-height: 30px;font-weight: 700">服务人数量：</td>
		  	        <td>
			        	<ul class="nmb_jj">
				            <li class="jian" id="1_reduce_num">-</li>
				            <li>
				              <input name="" id="1_service_num" type="text" value="0" class="srkk" style="width: 68px;">
				            </li>
				            <li class="jia" id="1_add_num">+</li>  
			          </ul>
			        </td>
		      </tr>
		      <tr >
		        <td height="20"></td>
		        <td></td>
		      </tr>
		      

		      <tr valign="top">
	  			<td align="right" width="70" style="line-height: 30px;font-weight: 700">试用开始日期：</td>
	  	        <td>
		        	<ul class="nmb_jj">
			            <li>
			              <input style="width: 130px;font-size: 15px;"  id="startActiveTime" name="startActiveTime"  onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',autoPickDate:true})" th:value="${#dates.format(merchant.activeTime, 'yyyy-MM-dd')}" autocomplete="off"  placeholder="试用开始时间日期" type="text"  class="srkk">
			            </li>
		          </ul>
		        </td>
		      </tr>
		      <tr>
		        <td height="20"></td>
		        <td></td>
		      </tr>
		      
		      <tr valign="top">
	  			<td align="right" width="70" style="line-height: 30px;font-weight: 700">试用结束日期：</td>
	  	        <td>
		        	<ul class="nmb_jj">
			            <li>
			              <input style="width: 130px;font-size: 15px;" id="endActiveTime" name="endActiveTime"  onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',autoPickDate:true})" th:value="${#dates.format(merchant.endActiveTime, 'yyyy-MM-dd')}" autocomplete="off"  placeholder="试用开始时间日期" type="text" class="srkk" >
			            </li>
		          </ul>
		        </td>
		      </tr>
		      <tr>
		        <td height="20"></td>
		        <td></td>
		      </tr>
		      
		      
		      <tr valign="top">
	  			<td align="right" width="70" style="line-height: 30px;font-weight: 700">月单价（成本）：</td>
	  	        <td>
		        	<ul class="nmb_jj">
			            <li>
			              <input name="unitPrice" id="unitPrice" type="text" value="0" class="srkk" style="width: 115px;"><i> 元</i>
			            </li>
		          </ul>
		        </td>
		      </tr>
		   	 <tr>
		        <td height="20"></td>
		        <td></td>
		      </tr>
		      
		      <tr valign="top">
	  			<td align="right" width="70" style="line-height: 30px;font-weight: 700">总价（收入）：</td>
	  	        <td>
		        	<ul class="nmb_jj">
			            <li>
			              <input name="price" id="price" type="text" th:value="${merchant.price}" class="srkk" style="width: 115px;"><i> 元</i>
			            </li>
		          </ul>
		        </td>
		      </tr>
		      <tr>
		        <td height="20"></td>
		        <td></td>
		      </tr>
		      
		      <tr>
		        <td></td>
		        <td><a style="margin-left: 20px;" class="ty_but ml20" href="javascript:#" onclick="save();">购  买</a></td>
		      </tr>
		    </tbody>
	   	</table>
	    
	</div>
<br/>
<br/>

<table class="tablelist">
	<thead>
	    <tr>
	    	<th >订单号</th>
	    	<th >服务包类型</th>
	    	<th >服务包人数</th>
	    	<th >试用开始日期 </th>
	    	<th >试用结束日期 </th>
	    	<th >月单价（成本）</th>
	    	<th >服务包总价（收入）</th>
	    	<th >购买时间</th>
	    </tr> 
	</thead>
	<tbody>
		 <tr  th:each="item:${list}" >
		 	<td th:text="${item.id}"></td>
	    	<td  th:switch="${item.signType}">
			   <span th:case="1" >服务包1</span>
			   <span th:case="2" >服务包2</span>
			   <span th:case="3" >服务包3</span>
			   <span th:case="4" >服务包4</span>
			   <span th:case="5" >服务包5</span>
			</td>
			<td th:text="${item.libService}"></td>
	    	<td th:text="${#dates.format(item.signTime, 'yyyy-MM-dd')}"> </td>
	    	<td th:text="${#dates.format(item.endSignTime, 'yyyy-MM-dd')}"> </td>
	    	<td th:text="${item.unitPrice}"></td>
	    	<td th:text="${item.price}"></td>
	    	<td th:text="${item.createTime}"></td>
	    	
	    </tr> 
	</tbody>
</table> 
<br/>
<br/>
	

</body>


<script type="text/javascript">
	$(function () {
			
		$("#1_service_num").val($(".sign_type_select_on").data("lib_service"));
		$("#unitPrice").val($(".sign_type_select_on").data("unit_price"));
		
		$(".sign_type_select").click(function (){
			$(".sign_type_select").removeClass("sign_type_select_on");
			$(this).addClass("sign_type_select_on");
			
			var sign_type=$(this).data("type");
			$("#1_service_num").val($(this).data("lib_service"));
			$("#unitPrice").val($(this).data("unit_price"));
			
// 			if(sign_type>=5){
// 				$("#lib_service_tr").show();
// 			}else{
// 				$("#lib_service_tr").hide();
// 			}
		});
		
		$("#1_reduce_num").click(function (){
			if($("#1_service_num").val()<=0){
				parent.layer.msg("服务人数量不能小于1喔",{icon:11});
				$("#1_service_num").val(0);
				return;
			}
			$("#1_service_num").val(parseInt($("#1_service_num").val())-1);
		});
		
		$("#1_add_num").click(function (){
			$("#1_service_num").val(parseInt($("#1_service_num").val())+1);
		});
	})
	
	var islock=false;
	function save(){
		if(islock){
			parent.layer.msg("正在下单中，请勿重复提交...",{icon:2});
		}
		parent.layer.confirm("确定为此商户购买服务包？", {
			icon: 4, btn: ['确定','关闭'],offset: '100px' //按钮
		}, function(){
				islock=true;
				var id=$("#id").val();
				var signType=$(".sign_type_select_on").data("type");
				var libService=$("#1_service_num").val();
				var startActiveTime=$("#startActiveTime").val();
				var endActiveTime=$("#endActiveTime").val();
				var price=$("#price").val();
				var unitPrice=$("#unitPrice").val();
				
				var url="[[${sysUrl}]]/sys/fx/saveMerchantMealSc";
				var params ={
			        'id' : id,
			        'signType':signType,
			        'libService':libService,
			        'startActiveTime':startActiveTime,
			        'endActiveTime':endActiveTime,
			        'unitPrice':unitPrice,
			        'price':price
			    };
				$.post(url,params,function(data){
					if(data.meta.success){
						parent.layer.msg("购买成功",{icon:1});
						parent.location.reload();
						parent.layer.close(parent.layer.getFrameIndex(window.name));
						islock=false;
					}else{
						parent.layer.msg(data.meta.message,{icon:11});
						islock=false;
					}
				});
		});
	}
	
	
</script>

</html>