<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,member-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
<link href="${pageContext.request.contextPath }/common/admin/css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/common/admin/css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/common/admin/lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/common/admin/lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>添加优惠券</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 优惠券管理 <span class="c-gray en">&gt;</span> 批量添加优惠券 <a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="pd-20">
  <form action="${pageContext.request.contextPath}/admin/coupon/batchAddCoupon/${token}" method="post" class="form form-horizontal" id="form-coupon-add">
    <div class="row cl">
      <label class="form-label col-3"><span class="c-red">*</span>优惠券金额：</label>
      <div class="formControls col-5">
        <input type="text" class="input-text" value="" placeholder="0.00" id="couponMoney" name="member-name" datatype="*" nullmsg="优惠券金额不能为空">
      </div>
      <div class="col-4"> </div>
    </div>
    
    <div class="row cl">
      <label class="form-label col-3"><span class="c-red">*</span>优惠券简介：</label>
      <div class="formControls col-5">
        <textarea name="" cols="" rows="" class="textarea" id="couponDesc"  placeholder="说点什么...最少输入2个字符" datatype="*2-100" dragonfly="true" nullmsg="简介不能为空！" onKeyUp="textarealength(this,100)"></textarea>
        <p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
      </div>
      <div class="col-4"> </div>
    </div>
    <div class="row cl">
      <label class="form-label col-3"><span class="c-red">*</span>优惠券数量：</label>
      <div class="formControls col-5">
        <input type="text" class="input-text" placeholder="0" name=""couponCount"" id="couponCount" datatype="n" nullmsg="请输入整数类型的数量！">
      </div>
      <div class="col-4"> </div>
    </div>
    <div class="row cl">
      <label class="form-label col-3"><span class="c-red">*</span>开始时间：</label>
      <div class="formControls col-5">
        <input type="text" class="input-text" placeholder="" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'endTime\')||\'2050-10-01\'}', dateFmt:'yyyy-MM-dd HH:mm:ss'})" readonly name="email" id="beginTime" datatype="*" nullmsg="请输入开始时间！">
      </div>
      <div class="col-4"> </div>
    </div>
    <div class="row cl">
      <label class="form-label col-3"><span class="c-red">*</span>过期时间：</label>
      <div class="formControls col-5">
        <input type="text" class="input-text" placeholder="" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'beginTime\')}',maxDate:'2050-10-01', dateFmt:'yyyy-MM-dd HH:mm:ss'})" readonly name="email" id="endTime" datatype="*" nullmsg="请输入过期时间！">
      </div>
      <div class="col-4"> </div>
    </div>
    <div class="row cl">
      <label class="form-label col-3"><span class="c-red">*</span>优惠券类型：</label>
      <div class="formControls col-5"> <span class="select-box">
        <select class="select" size="1" name="demo1" id="couponType" datatype="*" nullmsg="请选择优惠券类型！">
          <option value="" selected>请选择类型</option>
          <option value="1">公众用户</option>
          <option value="2">个人用户</option>
        </select>
        </span> </div>
      <div class="col-4"> </div>
    </div>
    <div class="row cl">
      <label class="form-label col-3">所属用户：</label>
      <div class="formControls col-5">
        <input type="text" class="input-text" disabled="disabled" placeholder="昵称..." name="userNickName" id="userNickName" datatype="*" nullmsg="昵称不能为空！">
     	<input type="hidden" id="userId" value=""/>
      </div>
      <div class="col-4"> </div>
    </div>
    <!-- 隐藏DIV， 用于显示用户的头像和昵称 -->
    <div class="pl-10 pr-10" style="display: none; position: absolute; z-index: 100; border: 1px solid gray; background-color: white;" id="userInfoList">
	    <ul id="info" style="width: 100%;">
	      <li></li>
	      <li></li>
	    </ul>
	 </div>
    <div class="row cl">
      <div class="col-9 col-offset-3">
        <input class="btn btn-primary radius" type="button" id="submitBtn" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
      </div>
    </div>
  </form>
</div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/lib/icheck/jquery.icheck.min.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/lib/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/lib/layer/1.9.3/layer.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/js/H-ui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/lib/My97DatePicker/WdatePicker.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/js/H-ui.admin.js"></script>
<script type="text/javascript">
$(function(){
	
	//提交
	$("#submitBtn").click(function() {
		var	couponCount = $("#couponCount").val();//券号
		var couponMoney = $("#couponMoney").val();//优惠券金额
		var couponDesc = $("#couponDesc").val();//优惠卷简介
		var beginTime = $("#beginTime").val();//开始时间
		var endTime = $("#endTime").val();//过期时间
		var couponType = $("#couponType").val();//优惠券类型
		var nickName = "";
		if(!/^\+?[1-9][0-9]*$/.test(couponCount) || couponCount < 1 || couponCount > 3000) {
			layer.msg('一次添加优惠券数量在1~3000张!',{icon:5,time:1000});
			return false;
		} else if(couponMoney == "" || !/^[0-9]+(.[0-9]{1,2})?$/.test(couponMoney)) {
			layer.msg('请输入正确金额!',{icon:5,time:1000});
			return false;
		} else if($.trim(couponDesc) == "" || couponDesc.length < 1 || couponDesc.length > 100){
			layer.msg('简介长度在1~100个字符之间!',{icon:5,time:1000});
			return false;
		} else if(beginTime == "" || endTime == "") {
			layer.msg('请设定时间!',{icon:5,time:1000});
			return false;
		} else if(couponType != 1 && couponType != 2) {
			layer.msg('请选择优惠卷类型!',{icon:5,time:1000});
			return false;
		} else {
			var reqJSON = {"couponCount":couponCount,
					"couponNum":couponMoney,
					"couponDesc":couponDesc,
					"startDate":beginTime,
					"endDate":endTime,
					"couponType":couponType
					};
			if(couponType == 2) {
				nickName = $("#userId").val();
				if(nickName == "" || nickName == "undefined") {
					layer.msg('请选择优惠券所属用户!',{icon:5,time:2000});
					return false;
				} else {
					reqJSON = {"couponCount":couponCount,
							"couponNum":couponMoney,
							"couponDesc":couponDesc,
							"startDate":beginTime,
							"endDate":endTime,
							"couponType":couponType,
							"userIdMd5":nickName
							};
				}
			}
			var url = $("#form-coupon-add").attr("action");
			$.post(url, reqJSON, function(result) {
				if(result.msg == "success") {
					layer.msg('添加成功!',{icon:1,time:2000});
					setTimeout("reloadWindow()",2000);
				} else if(result.msg == "fiald") {
					layer.msg('个人类型优惠卷必须选择所属用户!',{icon:5,time:2000});
					$("#form-coupon-add").attr("action", "${pageContext.request.contextPath}/admin/coupon/batchAddCoupon/"+result.token);
				} else if(result.msg == "count") {
					layer.msg('一次添加优惠券数量在1~3000张!',{icon:5,time:2000});
					$("#form-coupon-add").attr("action", "${pageContext.request.contextPath}/admin/coupon/batchAddCoupon/"+result.token);
				} else {
					layer.msg(result.msg,{icon:5,time:2000});
					setTimeout("reloadWindow()",2000);
				}
			});
		}
	});
	
	$("#couponType").change(function() {
		var couponType = $("#couponType").val();
		if(couponType == 2) {
			$("#userNickName").attr("disabled", false);
		} else {
			$("#userId").val("");
			$("#userNickName").val("");
			$("#userNickName").attr("disabled", true);
		}
	});
	
	$("#couponMoney").bind('input propertychange', function() {
		var money = $("#couponMoney").val();
		if(!/^\d+$/.test(money)) {
			$("#couponMoney").val("");
		}
	});
	
	$("#couponMoney").blur(function() {
		var money = $("#couponMoney").val();
		if(/^\d+$/.test(money)) {
			money = money + ".00";
			$("#couponMoney").val(money);
		}
	});
	
	//获取用户文本框的绝对位置
	var inputOffsetTop = $("#userNickName").offset().top;
	var inputOffsetLeft = $("#userNickName").offset().left;
	var inputWidth = $("#userNickName").width();
	$("#userInfoList").css("width", inputWidth);
	$("#userInfoList").css("left", inputOffsetLeft);
	
	$("#userNickName").bind('input propertychange', function() {
		var userNickName = $.trim($("#userNickName").val());
		if(userNickName != "" && userNickName != "undefined") {
			var url = "${pageContext.request.contextPath}/admin/coupon/showUserInfo";
			var reqJSON = {"time":new Date(), "nickName":userNickName};
			$.post(url, reqJSON, function(result) {
				$("#info").html("");
				if(result.msg == "field") {
					$("#info").append("<li><span style='color:red;'><i class='Hui-iconfont'>&#xe665;</i>"+result.info+"</span></li>");
					$("#userInfoList").show();
					$("#userId").val("");
				} else if(result.msg == "success") {
					$("#info").append("<li><span><i class='Hui-iconfont'>&#xe665;</i>"+result.info+"</span></li>");
					$("#info").append("<li><hr/></li>");
					var resultData = result.JSONDATA;
					var obj = eval(resultData);
					for(var i = 0; i < obj.length; i++) {
						$("#info").append("<li style='width:100%;' onMouseOver='onMouseOverFun(this)' onMouseOut='onMouseOutFun(this)' onclick='userIdAndNickName(this)'><input type='hidden' value='"+resultData[i].userIdMd5+"'><img src='"+resultData[i].userHeadImage+"' atl='' style='width:30px; height:30px;'/>&nbsp;&nbsp;<span class='a'>"+resultData[i].userNickName+"</span></li>");
					}
					$("#userInfoList").show();
				}
			});
		} else {
			$("#userInfoList").hide();
			$("#userId").val("");//值为空时，文本框要清零
		}
	});
	
	$("#userNickName").blur(function() {
		setTimeout("closeDiv()", 1200);
	});
	
	$('.skin-minimal input').iCheck({
		checkboxClass: 'icheckbox-blue',
		radioClass: 'iradio-blue',
		increaseArea: '20%'
	});
	
	$("#form-member-add").Validform({
		tiptype:2,
		callback:function(form){
			form[0].submit();
			var index = parent.layer.getFrameIndex(window.name);
			parent.$('.btn-refresh').click();
			parent.layer.close(index);
		}
	});
});
function reloadWindow() {
	window.location.reload();
}

function onMouseOverFun(obj) {
	$(obj).css("background-color","gray");
}

function onMouseOutFun(obj) {
	$(obj).css("background-color", "white");
}

function userIdAndNickName(obj) {
	$("#userId").val($(obj).find("input[type=hidden]").val());
	$("#userNickName").val($(obj).find("span[class=a]").html());
	$("#userInfoList").hide();
}

//关闭隐藏div
function closeDiv() {
	$("#userInfoList").hide();
}
</script>
</body>
</html>