<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>私塾家</title>
<script th:include="sys/common/metaCSS" th:remove="tag"></script> 
<script th:include="sys/common/metaJS" th:remove="tag"></script>
	<link th:href="@{/static/js/select/fselect.css}" rel="stylesheet" type="text/css">
<script src="sys/js/jquery.validate.min.js" th:src="@{/static/sys/js/jquery.validate.min.js}"></script>
<script src="sys/js/jquery-validation/messages_zh.js" th:src="@{/static/sys/js/jquery-validation/messages_zh.js}"></script>
<script src="sys/js/My97DatePicker/WdatePicker.js" th:src="@{/static/sys/js/My97DatePicker/WdatePicker.js}"></script>
	<script src="sys/js/select/fSelect.js" th:src="@{/static/js/select/fselect.js}"></script>


	<style>
		body {
			min-width: 180px;
		}

		.select1 {
			width: 100%;
			height: 32px;
			line-height: 32px;
			border-top: solid 1px #a7b5bc;
			border-left: solid 1px #a7b5bc;
			border-right: solid 1px #ced9df;
			border-bottom: solid 1px #ced9df;
			opacity: 1;
			margin-bottom: 10px;
		}

		.btn {
			width: 100px;
		}

		label.control-label-error {
			color: Red;
		}

		.forminfo li label {
			width: 85px;
			line-height: 34px;
			display: block;
			float: left;
		}
	</style>
</head>

<body>
<div class="formbody">
	<form id="submitFrom"   method="post" class="form-horizontal form-validate">

		<ul class="forminfo">
			<li class="clearfix" id="clearfix">
				<label>模板名称：<b>*</b></label>
				<input type="text" name="templateName" class="dfinput fl" id="templateName" th:value="${template.templateName}"/>
				<input type="hidden" name="id" class="dfinput fl" id="id" th:if="${template.id}" th:value="${template.id}"/>
			</li>
			<div class="templatediv" th:each="item:${template.infoList}">
				<li class="clearfix" >
					<label>物料名称：<b>*</b></label>
					<input type="text" name="materielName" readonly="readonly" class="dfinput fl materielName"  th:onclick="'addAdmin(this)'" th:value="${item.materielName}"/>
				</li>
				<li class="clearfix" >
					<label>物料编码：<b>*</b></label>
					<input type="text" name="materielCode"  class="dfinput fl materielCode" th:value="${item.materielCode}"/>
				</li>
				<li class="clearfix" >
					<label>物料数量：<b>*</b></label>
					<input type="text" name="materielCount"  class="dfinput fl materielCount" th:value="${item.materielCount}"/>
				</li>
				<li class="clearfix" >
					<label>损耗数量：<b>*</b></label>
					<input type="text" name="costCount"  class="dfinput fl costCount" th:value="${item.costCount}"/>
				</li>

				<li class="clearfix">
					<label></label>
					<input type="button"  class="delOneRow" value="删除"/>
				</li>
			</div>
			<li><input type="button" id="addOneRow" value="添加一行"  class="btn"/></li>
			<li>
				<label>&nbsp;</label>
				<button type="submit" class="btn">保存</button>
				<button type="button" class="btn" onclick="closeWin();">取消</button>
			</li>
		</ul>
	</form>
</div>
</body>
<script type="text/javascript">

$(function(){

	$('.select1').on('change',function(){
//判断是否选取prompt属性，无返回值；
		if($(this).val()){
			var selectText = $(this).find('option:selected').attr("code");
			$(this).closest('.templatediv').find('input[name=materieCode]').first().val(selectText);
		}
	});
	$("#addOneRow").click(function(){
		var tempTr=$(".templatediv:first").clone(true);
		$(".templatediv:last").after(tempTr);
		$(".templatediv:last").find('input[name=materielName]').first().val("");
		$(".templatediv:last").find('input[name=materieCode]').first().val("");
		$(".templatediv:last").find('input[name=materielCount]').first().val("");
		$(".templatediv:last").find('input[name=costCount]').first().val("");
		$('.select1').on('change',function(){
//判断是否选取prompt属性，无返回值；
			if($(this).val()){
				var selectText = $(this).find('option:selected').attr("code");
				$(this).closest('.templatediv').find('input[name=materieCode]').first().val(selectText);
			}
		});
	});
	$(".delOneRow").click(function() {
		if ($(".templatediv").length < 2) {
			alert("至少保留一行!");
		}
		else{
			if (confirm("确认删除?")) {
				$(this).parent().parent().remove();
			}
		}
	});

	$("#submitFrom").validate({
		rules : {

		},
		messages: {

		},
		errorPlacement : function(error, element) {
			error.appendTo(element.parent());
		},
		submitHandler : function(form) {
			roleFrom();
		}
	});
});
function roleFrom(){
	var url="[[${sysUrl}]]/sys/bookList/saveTemplate";
    //取值
	var params = $("#submitFrom").serialize();
	$.post(url,params,function(data){
		if(data != null){
				if(data.code='999'){
					layer.msg("新增成功",{icon:1});
					closeWin();
				}else{
					layer.msg(data.meta.message,{icon:11});
					closeWin();
				}
		}
		
	});
}
function closeWin(){
	window.location.href ='[[${sysUrl}]]/sys/bookList/materielTemplateList.html';
}

function addAdmin(obj){

	var objIndex =	$(".templatediv").index($(obj).closest('.templatediv'));
	var   title ='选择物料';
	layer.open({
		type: 2,
		title: title,
		closeBtn: 1, //不显示关闭按钮
		shift: 0.8,
		//offset: '100px',
		area: ['80%', '80%'],
		content: '[[${sysUrl}]]/sys/bookList/selectMaterielList.html?divIndex='+objIndex
	});
}

</script>
</html>