<%@ 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" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<!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/update" class="form form-horizontal" id="form-addGoods" method="POST" enctype="multipart/form-data">
	<input name="productId" type="hidden" value="${product.productId }">
		<div class="row cl">
			<label class="form-label col-2"><span class="c-red">*</span>商品名称：</label>
			<div class="formControls col-10">
				<input id="productName" name="productName" type="text" class="input-text" value="${product.productName }" placeholder="" >
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-2"><span class="c-red">*</span>商品简称：</label>
			<div class="formControls col-10">
				<input id="productAbbreviation" name="productAbbreviation" type="text" class="input-text" value="${product.productAbbreviation }" 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="<fmt:formatNumber type='number' value='${product.productPrice / 100} ' pattern='0.00' maxFractionDigits='2'/>" 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="<fmt:formatNumber type='number' value='${product.productDiscount / 100} ' pattern='0.00' maxFractionDigits='2'/>" class="input-text" style="width:90%">元</div>
		</div>
		
		<div class="row cl">
			<label class="form-label col-2">已售数量：</label>
			<div class="formControls col-2">
				<input id="productSalesnum" name="productSalesnum" type="text" class="input-text" value="${product.productSalesnum }" placeholder="">
			</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="${product.productSortNum }" placeholder="">
			</div>
		</div>
		
		<div class="row cl">
			<label id="integralLabel" class="form-label col-2"><span class="c-red">*</span>产品颜色：</label>
			<div id="integralDiv" class="formControls col-2">
				<select id="productColor" name="productColor" class="select">
						<option value="1" <c:if test="${product.productColor == 1 }">selected</c:if>>蓝色</option>
						<option value="2" <c:if test="${product.productColor == 2 }">selected</c:if>>粉色</option>
						<option value="3" <c:if test="${product.productColor == 3 }">selected</c:if>>银色</option>
						<option value="4" <c:if test="${product.productColor == 4 }">selected</c:if>>香槟金</option>
						<option value="5" <c:if test="${product.productColor == 5 }">selected</c:if>>苹果绿</option>
						<option value="6" <c:if test="${product.productColor == 6 }">selected</c:if>>西瓜红</option>
						<option value="7" <c:if test="${product.productColor == 7 }">selected</c:if>>品蓝</option>
						<option value="8" <c:if test="${product.productColor == 8 }">selected</c:if>>品黑</option>
				</select>
			</div>
			<label  id="integralLabel" class="form-label col-2"><span class="c-red">*</span>产品颜色释义：</label>
			<div id="integralDiv" class="formControls col-2">
				<input id="productColorDes" name="productColorDes" type="text" class="input-text" value="${product.productColorDes }" placeholder="">
			</div>
		</div>
		<div class="row cl">
			<label id="integralLabel" class="form-label col-2"><span class="c-red">*</span>产品类型：</label>
			<div id="integralDiv" class="formControls col-2">
				<select name="typeId">
					<c:forEach items="${typeList}" var="type" varStatus="status">
	                	<option value="${type.typeId}" <c:if test="${type.typeId == product.productType.typeId }">selected</c:if>>${type.typeName }</option>
	                </c:forEach>
	            </select>
            </div>
			<label id="integralLabel" class="form-label col-2"><span class="c-red">*</span>产品备注：</label>
			<div id="integralDiv" class="formControls col-2">
				<textarea id="productRemark" name="productRemark" class="textarea-text" placeholder="" style="width:200px;height:60px;">${product.productRemark }</textarea>
			</div>
		</div>
		
		
		<div class="row cl">
			<label class="form-label col-2"><span class="c-red">*</span>商品图文：</label>
			<div class="formControls col-5"> 
				<textarea id="productsInfoProductdesc" name="productsInfoProductdesc" cols="" rows="" class="textarea">${imageText.imagetextContext }</textarea>
			</div>
		</div>
		
		<div  id="introductionFigure" class="row cl">
		<label class="form-label col-2"><span class="c-red">*</span>产品参数图：</label>
			<div class="col-10 ">
				<img alt="产品参数图" src="${product.productParameterImg }" id="parameterImg" width="90" height="80">
				<input type="hidden" id="productParameterImg" name="productParameterImg" value="${product.productParameterImg }"/>
				<input type="button" id="insertfileParameter" value="选择文件" />
				
			</div>
		</div>
		
		<div  id="introductionFigure" class="row cl">
		<label class="form-label col-2"><span class="c-red">*</span>介绍图：</label>
			<div class="col-10 ">
				<img alt="介绍图" src="${product.productIntroduceImg }" id="introduceImg" width="90" height="80">
				<input id="productsImaLength" type="hidden" value="${fn:length(goodsImage)}">
				<input type="hidden" id="productIntroduceImg" name="productIntroduceImg" value="${product.productIntroduceImg }"/>
				<input type="button" id="insertfileIntroduce" value="选择文件" />
				<c:forEach items="${pictureList }" var="picture">
					<img style="border:2px solid #0A6999;"  src="${picture.pictureUrl }" onclick="deleteImg(${picture.pictureId },this)" width="50" height="50"></img>
				</c:forEach>
			</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="新增介绍图" />
		</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 checkProoduct();" class="btn btn-primary radius" type="submit">
					<i class="Hui-iconfont">&#xe632;</i> 保存
				</button>
			</div>
		</div>
	</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 : '720px'
        });
});

//删除介绍图片
function deleteImg(imgId,obj){
	layer.confirm('确定要删除吗？',function(index){
		var _this = $(obj);
		$.ajax({
	        url: '${pageContext.request.contextPath }/admin/product/deleteProductImage',
	        type: "POST",
	        dataType: "json",
	        data: {pictureId : imgId},
	        error:function(){
	      	  layer.msg(data.status,{icon: 5,time:1000});
	        },
	        success:  function(data){
	      	  layer.msg(data.status,{icon: 1,time:1000});
	      		_this.remove();
	      		var goodsimagess = document.getElementsByName('productIntroduceImg').length;
	      		var imagelength =  (Number($("#productsImaLength").val())-1);//将当前的图片个数减一并添加到该隐藏域
	      		$("#productsImaLength").val(imagelength);
	      		if(Number(goodsimagess)+Number(imagelength)<10){
	      			$("input#addimages").show();//显示图片新增按钮
	      		}
	        }
	    	});
		});
}

//上传产品参数图
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; 
				}
			});
		});
	}); 
	
});


$(document).ready(function(){
	//showHidden();
	addBtnEvent(1);
	var spotMax = 10;
	var ids = document.getElementsByName('productIntroduceImg').length;
	if(ids >= spotMax) {
		("#addimages").hide();
	}
	$("input#addimages").click(function(){     
		  addSpot(this, spotMax);
	});
});
function addSpot(obj, sm) {
	var goodsimagess = document.getElementsByName('productIntroduceImg').length;
	var ids = "imageFile"+(goodsimagess+1);
	var urls = "url"+(goodsimagess+1);
	var imagesClass = "urlClass"+(goodsimagess+1);
	var introduceImgs = "introduceImg"+(goodsimagess+1);
	
	$('div#spots').before(
		'<div class="row cl">'+
		'<label class="form-label col-2"></label>'+
		'<img alt="介绍图" src="" id="'+introduceImgs+'" width="90" height="80">'+
	    '<input name="productIntroduceImg" 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) {
		$("#productIntroduceImg").hide();
	}
	//给新增的按钮绑定事件
	addBtnEvent((goodsimagess+1));
};
//删除新增的上传组件
function removes(obj){
	$(obj).parent().remove();
    $("#productIntroduceImg").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 introduceImg = "introduceImg"+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('#'+introduceImg).attr("src",url);
						K('.'+imagesClass).val(url);
						editor.hideDialog();
						return false; 
					}
				});
			});
		}); 
		
	});
}


/*商品-数据验证*/
function checkProoduct(){
			 //商品名称数据验证
			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('productPrice','money',null,true)){
				layer.msg("商品原价不能为空!且须为金钱格式",{icon: 2,time:2000});
				return false;
			}
			if(!commonLengthJdg('productPrice',1,9,null,true)){
				layer.msg("商品原价长度为1-9位",{icon: 2,time:2000});
				return false;
			}
			
			//商品折扣价数据验证
			if(!commonTypeJdg('productDiscount','money',null,true)){
				layer.msg("商品折扣价不能为空!且须为金钱格式",{icon: 2,time:2000});
				return false;
			}
			if(!commonLengthJdg('productDiscount',1,9,null,true)){
				layer.msg("商品折扣价长度为1-9位",{icon: 2,time:2000});
				return false;
			}
			
			//排序验证
			if(!commonTypeJdg('productSortNum','pInteger',null,true)){
				layer.msg("排序不能为空!且只能是数字",{icon: 2,time:2000});
				return false;
			}
			
			//产品颜色验证
			if(!commonTypeJdg('productColor',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;
			}
			
			//产品备注验证
			if(!commonTypeJdg('productRemark',null,null,true)){
				layer.msg("产品备注不能为空",{icon: 2,time:2000});
				return false;
			}
			
			//产品图文验证
			if(!commonTypeJdg('productsInfoProductdesc',null,null,true)){
				layer.msg("产品图文不能为空",{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;
			}
			
			//原价乘100 取整
			var productPrice1 = $("#productPrice").val();
			$("#productPrice").val(Math.round(productPrice1 * 100));
			//折扣价乘100 取整
			var productDiscount = $("#productDiscount").val();
			$("#productDiscount").val(Math.round(productDiscount * 100));
}
</script>
</body>
</html>