<%@ page language="java" contentType="text/html; charset=utf-8"
	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" %>
<!DOCTYPE HTML>
<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,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<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.login.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/common/admin/css/style.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" />
<link href="${pageContext.request.contextPath }/common/other/kingedit/themes/default/default.css" rel="stylesheet" type="text/css" />
<title>添加商品</title>
</head>
<body>
<div class="pd-20">
	<form action="${pageContext.request.contextPath }/admin/product/add" class="form form-horizontal" id="form-addGoods" method="POST" enctype="multipart/form-data">
		<div class="row cl">
			<label class="form-label col-2"><span class="c-red">*</span>商品名称：</label>
			<div class="formControls col-4">
				<input id="productName" name="productName" type="text" class="input-text" value="" placeholder="" >
			</div>
		</div>
		
		<div class="row cl">
			<label class="form-label col-2"><span class="c-red">*</span>商品简称：</label>
			<div class="formControls col-4">
				<input id="productAbbreviation" name="productAbbreviation" type="text" class="input-text" value="" placeholder="">
			</div>
		</div>

		<!-- <div class="row cl">
			<label class="form-label col-2"><span class="c-red">*</span>商品原价：</label>
			<div class="formControls col-2">
				<input id="productPrice" type="text" name="productPrice" id="" placeholder="" value="" class="input-text" style="width:90%">元</div>
			<label class="form-label col-2"><span class="c-red">*</span>商品折扣价：</label>
			<div class="formControls col-2">
				<input id="productDiscount" type="text" name="productDiscount" id="" placeholder="" value="" class="input-text" style="width:90%">元</div>
		</div> -->
		
		
		<div class="row cl">
			<label class="form-label col-2"><span class="c-red">*</span>商品状态：</label>
			<div class="formControls col-2">
				<span class="select-box">
				<select id="productStatus" name="productStatus" class="select">
						<option value="1">在售</option>
						<option value="2">停止销售</option>
						<option value="3">删除</option>
				</select>
				</span>
			</div>
			<label class="form-label col-2"><span class="c-red">*</span>排序：</label>
			<div class="formControls col-2">
				<input id="productSortNum" name="productSortNum" type="text" class="input-text" value="" placeholder="">
			</div>
		</div>
		
		<div class="row cl">
			<label class="form-label col-2"><span class="c-red">*</span>产品类型：</label>
			<div class="formControls col-2">
				<span class="select-box">
					<select id="typeId" name="productType.typeId" >
						<option value="">请选择产品类型</option>
						<c:forEach items="${typeList}" var="type" varStatus="status">
		                	<option value="${type.typeId}">${type.typeName }</option>
		                </c:forEach>
		            </select>
	            </span>
            </div>
            <label class="form-label col-2"><span class="c-red">*</span>产品销售类型：</label>
			<div class="formControls col-2">
				<span class="select-box">
					<select id="productRentType" name="productRentType" class="select">
							<option value="1">销售产品</option>
							<option value="2">租赁产品</option>
					</select>
				</span>
            </div>
		</div>
		
		<div class="row cl">
			<label class="form-label col-2"><span class="c-red">*</span>产品备注：</label>
			<div class="formControls col-2">
				<textarea id="productRemark" name="productRemark" class="textarea-text" placeholder="" style="width:200px;height:60px;"></textarea>
			</div>
			<label class="form-label col-2"><span class="c-red">*</span>产品颜色释义：</label>
			<div class="formControls col-2">
				<input id="productColorDes" name="productColorDes" type="text" class="input-text" value="" placeholder="" style="width:90%"></div>
		</div>
		
		<div class="row cl colorListDiv">
			<label class="form-label col-2 colorName"><span class="c-red">*</span>颜色名称：</label>
			<div class="formControls col-1">
				<input type="text" name="colorList[0].colorName" id="" placeholder="" value="" class="input-text" style="width:90%"></div>
			<label class="form-label col-1"><span class="c-red">*</span>颜色69码：</label>
			<div class="formControls col-1">
				<input type="text" name="colorList[0].color69Code" id="" placeholder="" value="" class="input-text" style="width:90%"></div>
			<label class="form-label col-1"><span class="c-red">*</span>原价(元)：</label>
			<div class="formControls col-1">
				<input  id="colorPrice" type="text" name="colorList[0].colorPrice" id="" placeholder="" value="" class="input-text" style="width:90%"></div>
			<label class="form-label col-2"><span class="c-red">*</span>折扣价(元)：</label>
			<div class="formControls col-1">
				<input  id="colorDiscount" type="text" name="colorList[0].colorDiscount" id="" placeholder="" value="" class="input-text" style="width:90%"></div>
			<span class="l" id="addColorBtn"><a href="javascript:;" onclick="toAddColorDiv(this)"
				class="btn btn-danger radius">添加颜色</a>&nbsp;
		    </span>
		</div>
		
		<div class="row cl" id="iamgeTextDiv">
			<label class="form-label col-2">商品图文(暂不使用)：</label>
			<div class="formControls col-5"> 
				<textarea id="productsInfoProductdesc" name="productImageText.imagetextContext" cols="" rows="" class="textarea"></textarea>
			</div>
		</div>		
		
		<!-- <div  class="row cl">
		<label class="form-label col-2"><span class="c-red">*</span>产品参数图：</label>
			<div class="col-10 ">
				<img alt="" src="" id="parameterImg" width="90" height="80">
				<input type="hidden" id="productParameterImg" name="productParameterImg" value=""/>
				<input type="button" id="insertfileParameter" value="选择文件" />
			</div>
		</div> -->
		
		<div  class="row cl">
		<label class="form-label col-2"><span class="c-red">*</span>介绍图：</label>
			<div class="col-10 ">
				<img alt="介绍图" src="" id="introduceImg" width="90" height="80">
				<input type="hidden" id="productIntroduceImg" name="productIntroduceImg" value=""/>
				<input type="button" id="insertfileIntroduce" value="选择文件" />
			</div>
		</div>
		
		<div  class="row cl">
		<label class="form-label col-2"><span class="c-red">*</span>产品banner图：</label>
			<div class="col-10 ">
				<img alt="产品banner图" src="" id="bannerImg" width="90" height="80">
				<input type="hidden" id="productBannerImg" name="productBannerImg" value=""/>
				<input type="button" id="insertfileBanner" value="选择文件" />
			</div>
		</div>
		
		<div id="spots" class="row cl">
		<label class="form-label col-2"></label> 
			<input id="addimages" class="btn btn-primary radius upload-btn" type="button" value="新增banner图" />
		</div>
		
		<div class="row cl">
			<div class="col-10 col-offset-2">
				<!-- <button onClick="return admin_addGoods();" class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存</button> -->
				<button onClick="return checkProduct();" class="btn btn-primary radius" type="submit">
					<i class="Hui-iconfont">&#xe632;</i>保存
				</button>
			</div>
		</div>
		<!-- 已售数量 -->
		<input type="hidden" name="productSalesnum" value="0">
		<!-- 浏览量 -->
		<input type="hidden" name="productAccessnum" value="0">
		</form>
</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/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/js/H-ui.admin.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/js/tips.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/js/ueditor.all.min.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/js/ueditor.config.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/common/js/utils/tools.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/common/js/utils/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/common/other/kingedit/kindeditor.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/common/other/kingedit/lang/zh_CN.js"></script> 	
<script type="text/javascript">
<!-- 注册文本编辑器 -->
KindEditor.ready(function(K) {
       window.editor = K.create('#productsInfoProductdesc',{
       	fileManagerJson : '${pageContext.request.contextPath }/common/other/kingedit/jsp/file_manager_json.jsp',
           uploadJson : '${pageContext.request.contextPath }/common/other/kingedit/jsp/upload_json.jsp',
            allowFileManager : true,
            afterBlur: function(){this.sync();},
            width : '920px'
        });
});

//上传产品参数图
/*
KindEditor.ready(function(K) {
	var editor = K.editor({
    	fileManagerJson : '${pageContext.request.contextPath }/common/other/kingedit/jsp/file_manager_json.jsp',
        uploadJson : '${pageContext.request.contextPath }/common/other/kingedit/jsp/upload_json.jsp',
		allowFileManager : true
	});
	K('#insertfileParameter').click(function() {
	     var imgid = $(this).attr("id");//获取当前ID
		editor.loadPlugin('image', function() {
			editor.plugin.imageDialog({
				showRemote : false,
				imageUrl : K('#productParameterImg').val(),
				clickFn : function(url, title, width, height, border, align) {
					K('#parameterImg').attr("src",url);
					K('#productParameterImg').val(url);
					editor.hideDialog();
					return false; 
				}
			});
		});
	}); 
	
});
*/

//上传介绍图
KindEditor.ready(function(K) {
	var editor = K.editor({
    	fileManagerJson : '${pageContext.request.contextPath }/common/other/kingedit/jsp/file_manager_json.jsp',
        uploadJson : '${pageContext.request.contextPath }/common/other/kingedit/jsp/upload_json.jsp',
		allowFileManager : true
	});
	K('#insertfileIntroduce').click(function() {
	     var imgid = $(this).attr("id");//获取当前ID
		editor.loadPlugin('image', function() {
			editor.plugin.imageDialog({
				showRemote : false,
				imageUrl : K('#productIntroduceImg').val(),
				clickFn : function(url, title, width, height, border, align) {
					K('#introduceImg').attr("src",url);
					K('#productIntroduceImg').val(url);
					editor.hideDialog();
					return false; 
				}
			});
		});
	}); 
	
	K('#insertfileBanner').click(function() {
	     var imgid = $(this).attr("id");//获取当前ID
		editor.loadPlugin('image', function() {
			editor.plugin.imageDialog({
				showRemote : false,
				imageUrl : K('#productBannerImg').val(),
				clickFn : function(url, title, width, height, border, align) {
					K('#bannerImg').attr("src",url);
					K('#productBannerImg').val(url);
					editor.hideDialog();
					return false; 
				}
			});
		});
	}); 
	
});

function toAddColorDiv(obj){
	var index = $('.colorName').length;
	if(index >= 9) {
		$("#addColorBtn").hide();
	}
	if(index > 1){
		$("#deleteColorBtn_" + (index-1)).hide();		
	}
	$('#iamgeTextDiv').before(
			'<div class="row cl colorListDiv">'
			+ '<label class="form-label col-2 colorName"><span class="c-red">*</span>颜色名称：</label>'
			+ '<div class="formControls col-1">'
			+ '<input type="text" name="colorList[' + index + '].colorName" id="" placeholder="" value="" class="input-text" style="width:90%"></div>'
			+ '<label class="form-label col-1"><span class="c-red">*</span>颜色69码：</label>'
			+ '<div class="formControls col-1">'
			+ '<input type="text" name="colorList[' + index + '].color69Code" id="" placeholder="" value="" class="input-text" style="width:90%"></div>'
			+ '<label class="form-label col-1"><span class="c-red">*</span>原价(元)：</label>'
			+ '<div class="formControls col-1">'
			+ '<input id="colorPrice' + index + '" type="text" name="colorList[' + index + '].colorPrice" id="" placeholder="" value="" class="input-text" style="width:90%"></div>'
			+ '<label class="form-label col-2"><span class="c-red">*</span>折扣价(元)：</label>'
			+ '<div class="formControls col-1">'
			+ '<input id="colorDiscount' + index + '" type="text" name="colorList[' + index + '].colorDiscount" id="" placeholder="" value="" class="input-text" style="width:90%"></div>'
			+ '<span class="l" id="deleteColorBtn_' + index + '"><a href="javascript:;" onclick="deleteDiv(this,' + index + ')" class="btn btn-danger radius">删除颜色</a>&nbsp;</span>'
		+ '</div>'
		
	)
}
function deleteDiv(obj,index){
	$(obj).parent().parent().remove();
	$("#addColorBtn").show();
	if(index > 1){
		$("#deleteColorBtn_" + (index-1)).show();		
	}
    preview();
}
$(document).ready(function(){
	//showHidden();
	addBtnEvent(1);
	var spotMax = 10;
	var ids = document.getElementsByName('productBannerImg').length;
	if(ids >= spotMax) {
		("#addimages").hide();
	}
	$("input#addimages").click(function(){     
		  addSpot(this, spotMax);
	});
});
function addSpot(obj, sm) {
	var goodsimagess = document.getElementsByName('productBannerImg').length;
	var ids = "imageFile"+(goodsimagess+1);
	var urls = "url"+(goodsimagess+1);
	var imagesClass = "urlClass"+(goodsimagess+1);
	var bannerImgs = "bannerImg"+(goodsimagess+1);
	
	$('div#spots').before(
		'<div class="row cl">'+
		'<label class="form-label col-2"></label>'+
		'<img alt="介绍图" src="" id="'+bannerImgs+'" width="90" height="80">'+
	    '<input name="productBannerImg" class='+imagesClass+' type="hidden" id='+urls+'/>'+
	    '&nbsp;<i class="Hui-iconfont">&#xe642;</i>&nbsp;'+
	    '<input type="button" class="addImagesClass btn btn-primary radius upload-btn" id='+ids+' value="选择图片" />' +
	    '&nbsp;<input type="button" class="remove btn btn-primary radius upload-btn" onclick="removes(this)" value="删除" /></div>')
	if((goodsimagess-1) >= sm) {
		$("#productBannerImg").hide();
	}
	//给新增的按钮绑定事件
	addBtnEvent((goodsimagess+1));
};
//删除新增的上传组件
function removes(obj){
	$(obj).parent().remove();
    $("#productBannerImg").show();
    preview();
}
//
function addBtnEvent(goodsimagess){
	KindEditor.ready(function(K) {
		var editor = K.editor({
        	fileManagerJson : '${pageContext.request.contextPath }/common/other/kingedit/jsp/file_manager_json.jsp',
            uploadJson : '${pageContext.request.contextPath }/common/other/kingedit/jsp/upload_json.jsp',
			allowFileManager : true
		});
		K('#imageFile'+goodsimagess).click(function() {
			var imgid = $(this).attr("id");//获取当前ID
			var imagesClass =  "urlClass"+imgid.substr(imgid.length-1,1);
			var bannerImg = "bannerImg"+imgid.substr(imgid.length-1,1);
		     
			editor.loadPlugin('image', function() {
				editor.plugin.imageDialog({
					showRemote : false,
					imageUrl : K('.'+imagesClass).val(),
					clickFn : function(url, title, width, height, border, align) {
						K('#'+bannerImg).attr("src",url);
						K('.'+imagesClass).val(url);
						editor.hideDialog();
						return false; 
					}
				});
			});
		}); 
		
	});
}
		
//数据校验
function checkProduct(){
	//商品名称数据验证
	if(!commonLengthJdg('productName',1,60,null,true)){
		layer.msg("商品名称不能为空!且长度为1-30位",{icon: 2,time:2000});
		return false;
	}
	//商品简称数据验证
	if(!commonLengthJdg('productAbbreviation',1,20,null,true)){
		layer.msg("商品简称不能为空!且长度为1-10位",{icon: 2,time:2000});
		return false;
	}
	 
	//排序验证
	if(!commonTypeJdg('productSortNum','pInteger',null,true)){
		layer.msg("排序不能为空!且只能是数字",{icon: 2,time:2000});
		return false;
	}
	
	//产品类型验证
	if(!commonTypeJdg('typeId',null,null,true)){
		layer.msg("产品类型不能为空",{icon: 2,time:2000});
		return false;
	}
	
	//产品备注验证
	if(!commonTypeJdg('productRemark',null,null,true)){
		layer.msg("产品备注不能为空",{icon: 2,time:2000});
		return false;
	}
	
	//产品颜色释义验证
	if(!commonTypeJdg('productColorDes',null,null,true)){
		layer.msg("产品颜色释义不能为空",{icon: 2,time:2000});
		return false;
	}

    var colorPrice = null;
    var colorDiscountes = null;
	try {
        //产品颜色名称验证
        var colorNames = $("input[name*='colorName']");
		$.each(colorNames,function(n,index){
			if($(this).val() == ''){
				throw "产品颜色名称不能为空";
			}
		});
		//产品颜色69码验证
		var color69Codes = $("input[name*='color69Code']");
		$.each(color69Codes,function(n,index){
			if($(this).val() == ''){
                throw "产品颜色69码不能为空";
			}
		});
		//产品原价验证
		colorPrice = $("input[name*='colorPrice']");
		$.each(colorPrice,function(n,index){
			if(!commonTypeJdg($(this).prop("id"),'money',null,true)){
				throw "商品原价不能为空!且须为金钱格式";
			}
			if(!commonLengthJdg($(this).prop("id"),1,9,null,true)){
				throw "商品原价长度为1-9位";
			}
		});
		//产品颜色折扣价验证
		colorDiscountes = $("input[name*='colorDiscount']");
		$.each(colorDiscountes,function(n,index){
			if(!commonTypeJdg($(this).prop("id"),'money',null,true)){
				throw "商品折扣价不能为空!且须为金钱格式";
			}
			if(!commonLengthJdg($(this).prop("id"),1,9,null,true)){
				throw "商品折扣价长度为1-9位";
			}
		});
    }catch (e){
        layer.msg(e,{icon: 2,time:2000});
		return false;
    }

	//产品参数图验证
	/*
	if(!commonTypeJdg('productParameterImg',null,null,true)){
		layer.msg("产品参数图不能为空",{icon: 2,time:2000});
		return false;
	}
	*/
	
	//产品介绍图验证
	if(!commonTypeJdg('productIntroduceImg',null,null,true)){
		layer.msg("产品介绍图不能为空",{icon: 2,time:2000});
		return false;
	}
	
	//产品banner图验证
	if(!commonTypeJdg('productBannerImg',null,null,true)){
		layer.msg("产品banner图不能为空",{icon: 2,time:2000});
		return false;
	}
	//原价乘100 取整
	$.each(colorPrice,function(n,index){
		$(this).val(Math.round($(this).val() * 100));
	});
	
	//折扣价乘100 取整
	$.each(colorDiscountes,function(n,index){
		$(this).val(Math.round($(this).val() * 100));
	});
}

</script>
</body>
</html>