<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<%@ include file="../../system/index/top.jsp"%>
<link rel="stylesheet" href="plugins/timepicki/css/timepicki.css">
<style type="text/css">
.container {width: 90%;margin: 0 auto}
h4 {width: 40%;float:left;font-size:16px;font-weight: bold}
.right {text-align: right}
img {width:100px;height:100px}
.industry-rule {width: 1100px;margin:10px 0;}
.industry-rule th {font-weight: normal; background-color: #ebf9ff}
.industry-rule th,.industry-rule td {height: 40px;border:1px solid #bbdefe;text-align: center;vertical-align: middle;font-size:14px}
#timeRange {display: none}
.file-prew {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 30px;
font-size: 100px;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}
.tabTop{width: 90%;height: auto;margin: 10px 0px 10px 120px;}
.tr{whdth: 80%;height: 10%;margin-top: 150px;}
.tdLeft{width: 20%;height: auto;}
.tdCentre{width: 20%;height: auto;}
.tdRight{width: 60%;height: auto;}
input{width: 50%;height: auto;}

.conInp{width: 20%;height: auto;}

</style>
</head>
<body class="no-skin">
<div class="main-container" id="main-container">
<div class="container">
<input type="hidden" id="ruleId" value="${rule.id}"/>
<input type="hidden" id="shopId" value="${shopId}"/>

<div class="row" style="margin-top:20px">
<div class="span3">
<h4>预约规则设置</h4>
</div>
</div><hr style="margin:0">

<div class="row" style="margin-top:20px">
<div class="span3">
<table class="tabTop">

<tr class="tr">
<td class="tdLeft"></i>是否允许取消预约&nbsp;<i style="color: red;font-size: 18px;">*</i></td>
<td class="tdCentre">
<input type="radio" name="canCancel" value="1" <c:if test="${rule.canCancel != null && rule.canCancel ==1}">checked</c:if>/><span>是</span>
<input type="radio" name="canCancel" value="0" <c:if test="${rule.canCancel != null && rule.canCancel ==0}">checked</c:if>/><span>否</span>
</td>
<td class="tdRight">
</td>
</tr>
<tr class="tr" id="hidenCanCancelTime">
<td class="tdLeft"></i>允许取消预约时间需提前&nbsp;<i style="color: red;font-size: 18px;">*</i></td>
<td class="tdCentre"><input type="number" id="canCancelTime" value="<c:if test="${rule.canCancelTime != null}">${rule.canCancelTime}</c:if>"/><span>小时</span></td>
<td class="tdRight"></td>
</tr>
<tr class="tr">
<td class="tdLeft"></i>可提前多少天预约&nbsp;<i style="color: red;font-size: 18px;">*</i></td>
<td class="tdCentre">
<input type="number" id="earliestTime" value="<c:if test="${rule.earliestTime != null}">${rule.earliestTime}</c:if>"/>
<span>天</span>
</td>
<td class="tdRight"></td>
</tr>


<tr class="tr">
<td class="tdLeft"></i>预约最小人数&nbsp;<i style="color: red;font-size: 18px;">*</i></td>
<td class="tdCentre">
<input type="number" id="minNum" value="<c:if test="${rule.minNum != null}">${rule.minNum}</c:if>"/>
<span>人</span>
</td>
<td class="tdRight"></td>
</tr>

<tr class="tr">
<td class="tdLeft"></i>预约最大人数&nbsp;<i style="color: red;font-size: 18px;">*</i></td>
<td class="tdCentre">
<input type="number" id="maxNum" value="<c:if test="${rule.maxNum != null}">${rule.maxNum}</c:if>"/>
<span>人</span>
</td>
<td class="tdRight"></td>
</tr>
<!-- 门店营业时间 -->
<tr class="tr">
<td class="tdLeft"></i>开始营业时间&nbsp;<i style="color: red;font-size: 18px;">*</i></td>
<td class="tdCentre">
<input type="text" class="timepicker" name="startTime" value="<c:if test="${rule.startTime != null}"><fmt:formatDate value="${rule.startTime}" pattern="HH:mm:ss" /></c:if>"/>
</td>
<td class="tdRight" style="color: green;">请点击时间框选择时间</td>
</tr>
<tr class="tr">
<td class="tdLeft">结束营业时间&nbsp;<i style="color: red;font-size: 18px;">*</i></td>
<td class="tdCentre">
<input type="text" class="timepicker" name="endTime" value="<c:if test="${rule.endTime != null}"><fmt:formatDate value="${rule.endTime}" pattern="HH:mm:ss" /></c:if>"/>
</td>
<td class="tdRight"></td>
</tr>
<!-- 门店休息日 -->
<tr class="tr">
<td class="tdLeft">门店休息时间(每周)</td>
<td class="tdCentre">
<input type="text" id="shopDayOff" name="shopDayOff" value="<c:if test="${rule.shopDayOff != null}">${rule.shopDayOff}</c:if>"/>
</td>
<td class="tdRight" style="color:green;">--若设置多少个休息时间请用 "-" 隔开 例: 周三-周四 == 3-4 </td>
</tr>
<%-- <tr class="tr">
<td class="tdLeft"></i>预约时间间隔&nbsp;<i style="color: red;font-size: 18px;">*</i></td>
<td class="tdCentre">
<input type="number" id="reservationInterval" value="<c:if test="${rule.reservationInterval != null}">${rule.reservationInterval}</c:if>"/>
<span>分钟</span>
</td>
<td class="tdRight" style="color: green;">X后续X---根据营业时间和预约时间间隔自动生成(时段)/自行添加时段</td>
</tr>--%>
</table>
</div>
</div>
<%--时间段规则--%>
<div class="row" style="margin-top:20px">
<div class="span3">
<h4>预约时段</h4>
</div>
</div><hr style="margin:0">
<!-- 手动添加时段规则 -->
<div class="row">
<span style="float:left;margin-top:5px">
<a href="javascript:" onclick="addTimeRule()"><span class="glyphicon glyphicon-plus-sign"></span>&nbsp;新增时段</a>&nbsp;&nbsp;&nbsp;&nbsp;
</span>
</div>
<div class="span3">
<c:if test="${empty timeRuleList}">
<div>
<tr class="tr">
<td class="tdLeft"><span style="color: red;font-size: 14;width: 40%;">(必填:根据需要填写相相应数量时段/至少填写一条时段) </span></td>
<td class="tdCentre">请点击输入框输入</td>
<td class="tdRight"></td>
</tr>
</div>
</c:if>
<div id="bookingTimeRule">
<c:if test="${not empty timeRuleList}">
<c:forEach items="${timeRuleList}" var="time" varStatus="times">
<div class="row oneLevelRule" style="background-color: #eee;margin:20px 0;padding:10px">
<div class="col-md-12">
<span class="col-sm-2" style="width: 80px;"><a class="light-red ace-icon fa fa-asterisk"></a> 时段:</span>
<input style="width: 200px;float: left;" type="text" class="timepicker" id="startTimeRule${times.index +1}" name="startTimeRule" value="<c:if test="${time.startTime != null}"><fmt:formatDate value="${time.startTime}" pattern="HH:mm:ss" /></c:if>"/>
<span class="col-sm-2" style="width: 180px;"><a class="light-red ace-icon fa fa-asterisk"></a>时段允许最大预约单数:</span>
<input style="width: 200px;" type="number" class="conInp" id="canReservationNumTimeRule${conS.index +1}" name="canReservationNumTimeRule" value="<c:if test="${time.canReservationNum != null}">${time.canReservationNum}</c:if>"/>
<span class="remove"><a href="javascript:" onclick="removeRule(this)"><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>&nbsp;删除阶梯</a></span>
</div>
</div>
</c:forEach>
</c:if>
<c:if test="${empty timeRuleList}">
<div class="row oneLevelRule" style="background-color: #eee;margin:20px 0;padding:10px">
<div class="col-md-12">
<span class="col-sm-2" style="width: 80px;"><a class="light-red ace-icon fa fa-asterisk"></a> 时段:</span>
<input style="width: 200px;float: left;" type="text" class="timepicker" id="startTimeRule" name="startTimeRule" />
<span class="col-sm-2" style="width: 180px;"><a class="light-red ace-icon fa fa-asterisk"></a>时段允许最大预约单数:</span>
<input style="width: 200px;" type="number" class="conInp" id="canReservationNumTimeRule" name="canReservationNumTimeRule"/>
</div>
</div>
</c:if>
</div>
</div>

<div class="row" style="margin-top:20px">
<div class="span3">
<h4>消费满减</h4>
</div>
</div><hr style="margin:0">
<!-- 手动添加满减阶梯 -->
<div class="span3">
<span style="float:left;margin-top:5px">
<a href="javascript:" onclick="addConRule()"><span class="glyphicon glyphicon-plus-sign"></span>&nbsp;新增阶梯</a>&nbsp;&nbsp;&nbsp;&nbsp;
</span>
</div>

<div class="span3">
<div id="bookingConRule">
<c:if test="${not empty concessionsRuleList}">
<c:forEach items="${concessionsRuleList}" var="con" varStatus="conS">
<div class="row oneLevelRule" style="background-color: #eee;margin:20px 0;padding:10px">
<div class="col-md-12">
<span class="col-sm-2" style="width: 80px;">消费满:</span>
<input style="width: 200px;float: left;" type="number" name="fullAmount" id="fullAmount${conS.index +1}" value="<c:if test="${con.fullAmount != null}">${con.fullAmount}</c:if>"/>
<span class="col-sm-2" style="width: 80px;">减:</span>
<input style="width: 200px;" type="number" style="width: 80px;" name="reduceAmount" id="reduceAmount${conS.index+1}" value="<c:if test="${con.reduceAmount != null}">${con.reduceAmount}</c:if>"/>
<span class="remove"><a href="javascript:" onclick="removeConRule(this)"><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>&nbsp;删除阶梯</a></span>
</div>
</div>
</c:forEach>
</c:if>
<c:if test="${empty concessionsRuleList}">
<div class="row oneLevelRule" style="background-color: #eee;margin:20px 0;padding:10px">
<div class="col-md-12">
<span class="col-sm-2" style="width: 80px;"></a>消费满:</span>
<input style="width: 200px;float: left;" type="number" name="fullAmount" id="fullAmount"/>
<span class="col-sm-2" style="width: 80px;">减:</span>
<input style="width: 200px;" type="number" style="width: 80px;" name="reduceAmount" id="reduceAmount" />
</div>
</div>
</c:if>
</div>
<div class="span3">
<button class="btn btn-info" style="float:left; margin-left:100px;border:none;margin-bottom:15px" onclick="save()">保存</button>
<!--<button class="btn btn-info" style="float:left; margin-left:100px;border:none;margin-bottom:15px" onclick="cancel()">取消</button>-->
</div>
</div><hr style="margin:0">
</div>
</div>

<!-- basic scripts -->
<!-- 页面底部js¨ -->
<%@ include file="../../system/index/foot.jsp"%>
<!-- 删除时确认窗口 -->
<script src="static/ace/js/bootbox.js"></script>
<!-- ace scripts -->
<script src="static/ace/js/ace/ace.js"></script>
<!--提示框-->
<script type="text/javascript" src="static/js/jquery.tips.js"></script>

<script src="plugins/timepicki/js/timepicki.js"></script>

<script type="text/javascript" src="static/js/myjs/head.js"></script>
<script src="static/ace/js/bootstrap.js"></script>
<script type="text/javascript">

$(function () {
//关闭加载状态
$(top.hangge());
//日期选择框
$('.timepicker').timepicki({show_meridian:false});
})
// 鼠标触发单击选择事件(获取选中的值)
// var val_canCancel = $('#wrap input[name="canCancel"]');
// if(val_canCancel==1){
// var jDiv = $("#ifBooking");
// var cc = '<tr class="tr">'+
// '<td class="tdLeft"></i>允许取消预约时间需提前&nbsp;<i style="color: red;font-size: 18px;">*</i></td>'+
// '<td class="tdCentre"><input type="number" id="canCancelTime" value="<c:if test="${rule.canCancelTime != null}">${rule.canCancelTime}</c:if>"/><span>小时</span></td>'+
// '<td class="tdRight"></td>'+
// '</tr>';
//
// jDiv.append(cc);
// }


$('input:radio[name="canCancel"]').click(function(){
var canCancelValue = $('input:radio[name="canCancel"]:checked').val();
if(canCancelValue == 0){
$("#hidenCanCancelTime").hide();
}else{
$("#hidenCanCancelTime").show();
}
})


//添加规则
function addTimeRule() {
var jDiv = $("#bookingTimeRule");
if(jDiv.children().length <= 24) {
var copyElement = $(jDiv.children()[0]).clone();
copyElement.find("input[name='startTimeRule']").val("");
copyElement.find("input[name='canReservationNumTimeRule']").val("");
//copyElement.children().children().append('<span><a href="javascript:" onclick="removeRule(this)"><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>&nbsp;删除阶梯</a></span>');
var dd = '<div class="row oneLevelRule" style="background-color: #eee;margin:20px 0;padding:10px">'+
'<div class="col-md-12">'+
'<span class="col-sm-2" style="width: 80px;"><a class="light-red ace-icon fa fa-asterisk"></a> 时段:</span>'+
'<input style="width: 200px;float: left;" type="text" class="timepicker" name="startTimeRule"/> '+
'<span class="col-sm-2" style="width: 180px;"><a class="light-red ace-icon fa fa-asterisk"></a>时段允许最大预约单数:</span>'+
'<input style="width: 200px;" type="number" class="conInp" name="canReservationNumTimeRule"/>'+
'<span class="remove"><a href="javascript:" onclick="removeRule(this)"><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>&nbsp;删除阶梯</a></span>'+
'</div>'+
'</div>';


jDiv.append(dd);
$('#bookingTimeRule .timepicker').timepicki({show_meridian:false});
}
}

//删除规则
function removeRule(i) {
$(i).parent().parent().parent().remove();
if( $('#bookingTimeRule').children().length == 1){
$('#bookingTimeRule').children().children().children('.remove').hide();
}
}

//添加满减规则
function addConRule() {
var jDiv = $("#bookingConRule");
if(jDiv.children().length <=4) {
var copyElement = $(jDiv.children()[0]).clone();
copyElement.find("input[name='fullAmount']").val("");
copyElement.find("input[name='reduceAmount']").val("");
var aa = '<div class="row oneLevelRule" style="background-color: #eee;margin:20px 0;padding:10px">'+
'<div class="col-md-12">'+
'<span class="col-sm-2" style="width: 80px;">消费满:</span>'+
'<input style="width: 200px;float: left;" type="number" name="fullAmount" id="fullAmount"/> '+
'<span class="col-sm-2" style="width: 80px;">减:</span>'+
' <input style="width: 200px;" type="number" style="width: 80px;" name="reduceAmount" id="reduceAmount" />'+
'<span class="remove"><a href="javascript:" onclick="removeConRule(this)"><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>&nbsp;删除阶梯</a></span>'+
'</div>'+
'</div>';
jDiv.append(aa);
}
}

//删除规则
function removeConRule(i) {
$(i).parent().parent().parent().remove();
if( $('#bookingConRule').children().length == 1){
$('#bookingConRule').children().children().children('.remove').hide();
}
}




function save(){
var r = /^[0-9]*[1-9][0-9]*$/
var ruleId = $("#ruleId").val();//
var shopId = $("#shopId").val();
var reservationInterval =$("#reservationInterval").val();
var canCancel = $('input[name="canCancel"]:checked ').val();
var canCancelTime =$("#canCancelTime").val();
var earliestTime =$("#earliestTime").val();
var shopDayOff =$("#shopDayOff").val();

var data={};
data.id = ruleId;
data.shopId = shopId;
data.reservationInterval = reservationInterval;
data.canCancel = canCancel;
if(!r.test(Number(canCancelTime))){
top.bootbox.alert({
size: "small",
title: "错误",
message: "设置允许取消预约时间需提前 ,只能填写正整数!"
});
return;
}
data.canCancelTime = canCancelTime;
if(!r.test(Number(earliestTime))){
top.bootbox.alert({
size: "small",
title: "错误",
message: "设置可提前多少天预约 ,只能填写正整数!"
});
return;
}
data.earliestTime = earliestTime;
var dayoff = shopDayOff.split("-");
for(var i=0;i<dayoff.length;i++){
if(r.test(dayoff[i])){
if(Number(dayoff[i]) > 7 || Number(dayoff[i]) < 1){
top.bootbox.alert({
size: "small",
title: "错误",
message: "设置门店休息日时,请按正确格式填写,不可超出1-7范围!"
});
return;
}
}else{
top.bootbox.alert({
size: "small",
title: "错误",
message: "请按正确格式填写,范围1-7之间!"
});
return;
}
}



data.shopDayOff = shopDayOff.toString();
// 预约人数设置判断
var minNum =$("#minNum").val();
var maxNum =$("#maxNum").val();
if(!r.test(Number(minNum)) || !r.test(Number(maxNum))){
top.bootbox.alert({
size: "small",
title: "错误",
message: "设置人数时,只能填写大于0的正整数!"
});
return;
}
if(Number(minNum) >= Number(maxNum)){
top.bootbox.alert({
size: "small",
title: "错误",
message: "预约人数设置错误,最小预约人数不可大于或等于最大预约人数"
});
return;
}else{
data.minNum = minNum;
data.maxNum = maxNum;
}

//营业开始时间和结束时间的处理
var startTime = $("input[name='startTime']").val().trim();
var endTime = $("input[name='endTime']").val().trim();

// 使用逻辑判断处理一下空间显示时分的对比判断问题
if(startTime.length == 4){
var s1=startTime.substring(0,2);
var m1=startTime.substring(3,4);
// 拼时间进行类型转换
var strDate=s1+":0"+m1+":00";
}else if(startTime.length== 5){
var strDate=startTime+":00"
}else{
var strDate=startTime
}
if(endTime.length == 4){
var s2=endTime.substring(0,2);
var m2=endTime.substring(3,4);
// 拼时间进行类型转换
var endDate=s2+":0"+m2+":00";
}else if(endTime.length== 5){
var endDate=endTime+":00"
}else{
var endDate=endTime
}

if(strDate == "" || endDate=="'") {
top.bootbox.alert({
size: "small",
title: "错误",
message: "请填写门店开始营业时间",
callback: function() {
$("input[name='startTime']").focus();
}
});
return;
} else {
data.startTime1 = strDate.toString();
}

if(endTime != "") {
data.endTime1 = endDate.toString();
} else {
data.endTime1 = "9999-12-31 00:00";
}

//结束时间必须大于开始时间
/* if(Number(data.startTime1.split(":")) > Number(data.endTime1.split(":"))) {
alert(Number(data.startTime1.split(":")));
top.bootbox.alert({
size: "small",
title: "错误",
message: "活动结束时间必须大于活动开始时间"
});
return;
}*/

// 时段数据(时段/maxNum单)
var timeRuleStart=[],timeRuleCrNum=[];
$("[name=startTimeRule]").each(function () {
timeRuleStart.push($(this).val().toString());
});
$("[name=canReservationNumTimeRule]").each(function () {
timeRuleCrNum.push($(this).val().toString())
});
var nary=[];
for(var i=0;i<timeRuleStart.length;i++){

if(timeRuleStart[i].length == 4){
var sd=timeRuleStart[i].substring(0,2);
var mt=timeRuleStart[i].substring(3,4);
// 拼时间进行类型转换
var sdTime=sd+":0"+mt+":00";

}else if(timeRuleStart[i].length== 5){
var sdTime=timeRuleStart[i]+":00"
}else{
var sdTime=timeRuleStart[i]
}
// String转Number
if(Number(sdTime.replace(new RegExp(/(:)/g),"")) >= Number(strDate.replace(new RegExp(/(:)/g),"")) && Number(sdTime.replace(new RegExp(/(:)/g),"")) <= Number(endDate.replace(new RegExp(/(:)/g),""))){
nary.push(sdTime);
}else{
top.bootbox.alert({
size: "small",
title: "错误",
message: "设置预约时段时,时段必须在营业时间内!"
});
return;
}
}

var ary=nary.sort();
for(var i=0;i<ary.length;i++){
if(ary[i]==ary[i+1]){
top.bootbox.alert({
size: "small",
title: "错误",
message: "设置预约满减规则时,时段不能相同!"
});
return;
}
}

// 判断用户的输入的最大单数是否为正整数

for(var i=0;i<timeRuleCrNum.length;i++){
if(!r.test(Number(timeRuleCrNum[i]))){
top.bootbox.alert({
size: "small",
title: "错误",
message: "设置预约时段最大单数时,请输入大于0的正整数!"
});
return;
}
}

if(timeRuleStart.length>0){
// 时段
data.timePhase = timeRuleStart.toString();
}
if(timeRuleCrNum.length>0){
// max单数
data.timePhaseMaxNum = timeRuleCrNum.toString();
}

// 满减优惠
var full=[] ,reduce=[];
var fullone=[];
var reduceone=[];
$("[name=fullAmount]").each(function () {
full.push($(this).val());
});
$("[name=reduceAmount]").each(function () {
reduce.push($(this).val())
});


// 设置满减规则时值的判断
for(var i = 0 ; i < full.length; i++){
if(full[i] != "" && reduce[i] !=""){
if(!r.test(Number(full[i])) || !r.test(Number(reduce[i]))){
top.bootbox.alert({
size: "small",
title: "错误",
message: "设置满减规则时,只能填写大于0的正整数!"
});
return;
}
if(Number(full[i]) <= Number(reduce[i])){
top.bootbox.alert({
size: "small",
title: "错误",
message: "设置预约满减规则时,优惠金额不得大于满减金额!"
});
return;
}
fullone.push(full[i]);
reduceone.push(reduce[i]);
}
}
data.fullStr = fullone.toString();
data.reduceStr = reduceone.toString();

$.ajax({
method: 'POST',
data:JSON.stringify(data),
contentType: 'application/json; charset=UTF-8',
url:'<%=basePath%>shop/reservation/addNewRule',
dataType: 'json',
success: function (data) {
if (data.code == 1) {
top.bootbox.alert({
size: "small",
title: "成功",
message: ""+data.message,
callback:function() {
window.location.href='<%=basePath%>shop/reservation/getShopReservationRule.do';
}
});

} else {
top.bootbox.alert({
size: "small",
title: "错误",
message: "设置预约规则失败"
});
}
},
error: function (error) {
console.info(error);
top.bootbox.alert({
size: "small",
title: "错误",
message: "设置预约规则失败"
});
}
});

}
/*重置当前页面*/
function cancel() {
var userAgent = navigator.userAgent;
if(userAgent.indexOf("Firefox") != -1 || userAgent.indexOf("Chrome") !=-1) {
top.bootbox.confirm({
size: "small",
message: "是否确定取消？",
callback: function(result){
if(result) {
window.location.href='<%=basePath%>shop/reservation/getShopReservationRule.do';
window.close();
}
}
});
}
}
</script>
</body>
</html>