<%@ 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>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 <%@include file="/views/common.jsp"%>
</head>
<style>
layui-input,.layui-input-inline{
	width:350px
}
.layui-upload-img{
    	height:100px;
    	width: 100px
}
.edge .layui-edge{
	right:-50px;
}
.layui-input{
	width:135%;
}
</style>
<body>
	<div class="big_box">
		<form class="layui-form">
			<div class="layui-input-block">
				<div class="layui-form-item">
					<label class="layui-form-label">品种：</label>
					<div class="layui-input-inline edge">
						<select id="proTypeValue" name="proTypeValue" lay-filter="proTypeValue">
							<option></option>
						</select>
					</div>
				</div>
				<br>
				<div class="layui-form-item">
					<label class="layui-form-label">种类1：</label>
					<div class="layui-input-inline edge">
						<select id="kindValue" name="kindValue" lay-filter="kindValue">
						</select>
					</div>
				</div>
				<br>
				<div class="layui-form-item">
					<label class="layui-form-label">种类2：</label>
					<div class="layui-input-inline edge">
						<select id="kind2Value" name="kind2Value" lay-filter="kind2Value">
						</select>
					</div>
				</div>
				<br>
				<div class="layui-form-item">
					<label class="layui-form-label">产品说明：</label>
					<textarea rows="5" cols="60" id="remark"></textarea>
				</div>
				<button type="button" class="layui-btn" id="test2">多图片上传</button>
				<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
					预览图：
					<div class="layui-upload-list" id="demo2"></div>
				</blockquote>
			</div>
		</form>
	</div>
</body>
<script>
layui.use(['form','upload'], function() {
	var form = layui.form,
	upload   = layui.upload; // 只有执行了这一步，部分表单元素才会自动修饰成功
	
	//一访问页面就调用
	$.ajax({
		url:"${pageContext.request.contextPath}/productList",
		type : "GET",
		dataType : "json",
		success : function(result) {
			var data = result.data.proMap
			$.each(data,function(index,item){
				$('#proTypeValue').append(new Option(item,index));//往下拉菜单里添加元素
			});
			layui.form.render("select");
		}
	});
	var pro = ''
	form.on('select(proTypeValue)', function(data) {
		pro = data.value
		$("#kindValue").empty();
	    form.render("select");
		$.ajax({
			url:"${pageContext.request.contextPath}/getKindsByPro",
			type : "GET",
			dataType : "json",
			data:{
				proTypeValue:data.value
			},
			success : function(result) {
				$.each(result,function(index,item){
					$('#kindValue').append(new Option(item,index));//往下拉菜单里添加元素
				});
				layui.form.render("select");
			}
		});
	});	
	form.on('select(kindValue)', function(data) {
		$("#kind2Value").empty();
	    form.render("select");
		$.ajax({
			url:"${pageContext.request.contextPath}/getKind2sByKind",
			type : "GET",
			dataType : "json",
			data:{
				proTypeValue:pro,
				kindValue:data.value
			},
			success : function(result) {
				console.log(result)
				$.each(result,function(index,item){
					$('#kind2Value').append(new Option(item,index));//往下拉菜单里添加元素
				});
				layui.form.render("select");
			}
		});
	});	
	//多图片上传
	upload.render({
		elem: '#test2',
		url: '${pageContext.request.contextPath}/productUpload', //改成您自己的上传接口
		multiple: true,
		data: {
			proTypeValue: function(){
			    return $('#proTypeValue').val();
			},
			kindValue :function(){
			    return $('#kindValue').val();
			},
			kind2Value :function(){
			    return $('#kind2Value').val();
			},
			remark :function(){
			    return $('#remark').val();
			},
		},
		// 上传之前
		before: function(obj){
			//预读本地文件示例，不支持ie8
			obj.preview(function(index, file, result){
				$('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'"class="layui-upload-img">')
			});
		},
		done: function(res){
			if (res.code == 200) {
				layer.msg('操作成功！', {
					icon : 6,
					offset : "auto",
					time : 2000
				});//提示框
				setTimeout(function(){
					var index = parent.layer.getFrameIndex(window.name);//获取窗口索引
					parent.layer.close(index);//关闭弹出层
					parent.layui.table.reload("imgTableAll"); //重新加载页面表格
				}, 2100);
			}else {
				layer.msg('上传出错了！', {
					icon : 5,
					offset : "auto",
					time : 2000
				});//提示框
			}
		}
	});
});
	
</script>
</html>