<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
<meta name="decorator" content="base" />
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/style/admin.css" media="all">
<link rel="stylesheet" href="${ctxPlugin}/static/css/reset.css" media="all">
<title>新增备件使用</title>
<style>
.center {
	text-align: center !important;
}

.mark {
	color: #ff5151 !important;
}

tr>th {
	text-align: center !important;
}

tr>td {
	text-align: center !important;
}

.layui-icon-add-circle {
	font-size: 27px;
	color: #5FB878;
}

.layui-icon-close-fill {
	font-size: 29px;
	color: #dddddd;
}
</style>
</head>
<body>
	<div class="">
		<div class="layui-card">
			<div class="layui-form layui-card-body pt-20" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin" >


				<div class="layui-col-xs12 mt-10" style="height: 280px;">
					<table class="layui-table" style="">
						<colgroup>
							<col width="30%">
							<col width="30%">
							<col width="25%">
							<col>
						</colgroup>
						<thead>
							<tr>
								<th>备件名称</th>
								<th>备件条码</th>
								<th>使用数量</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="detailSet">
							<tr>
								<td>
									<input type="text" name="fitting_name" lay-verify="required" placeholder="请填写备件名称" autocomplete="off" class="layui-input">
								</td>
								<td>
									<input type="text" name="fitting_code"  placeholder="请填写备件条码" autocomplete="off" class="layui-input">
								</td>
								<td>
									<input type="text" name="apply_num" lay-verify="required|number" placeholder="请填写使用数量" autocomplete="off" class="layui-input">
								</td>
								<td>
									<i class="layui-icon layui-icon-add-circle detailAdd" lay-filter="formDemoAdd"></i>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="layui-form-item layui-hide ">
					<input type="button" lay-submit lay-filter="LAY-user-front-submit_add" id="LAY-user-front-submit_add" value="确认">
				</div>
				<div class="clear"></div>
			</div>
		</div>
	</div>
	<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
	<script>
		layui.use([ 'form', 'table' ], function() {
			var $ = layui.$;
			form = layui.form;
			form.verify({
				charNumber : [ /^[0-9A-Za-z]{1,28}$/, '只能是1-28位数字字母组合！' ],
				priceRule : [ /^((-?)(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2}))|0))$/, '结算金额格式有误！' ],
			});

			function dealAddDelBtn() {
				if ($("#detailSet").find("tr").length == 1) {
					$("#detailSet").find("tr").each(function() {
						$(this).find("td:last").html('').append('<i class="layui-icon layui-icon-add-circle detailAdd"  ></i>');
					});
				} else {
					$("#detailSet").find("tr").each(function() {
						$(this).find("td:last").html('');
						$(this).find("td:last").append('<i class="layui-icon layui-icon-close-fill detailDel"  ></i>');
					});
					$("#detailSet").find("tr:last td:last").prepend('<i class="layui-icon layui-icon-add-circle detailAdd"  ></i>');
				}
			}
			;
			dealClickEvent();

			function dealClickEvent() {
				$(".detailAdd").off("click");
				$(".detailAdd").on(
						'click',
						function() {
							var html = '<tr>' + '<td>'
									+ '<input type="text" name="fitting_name" lay-verify="required" placeholder="请填写备件名称" autocomplete="off" class="layui-input">'
									+ '</td>'
									+ '<td>'
									+ '<input type="text" name="fitting_code" lay-verify="required" placeholder="请填写备件条码" autocomplete="off" class="layui-input">'
									+ '</td>'
									+ '<td><input type="text" name="apply_num" lay-verify="required|number" placeholder="请填写使用数量" autocomplete="off" class="layui-input">'
									+ '</td>' + '<td>' + '<i class="layui-icon layui-icon-add-circle detailAdd" ></i>'
									+ '<i class="layui-icon layui-icon-close-fill detailDel" ></i>' + '</td>' + '</tr>';
							$("#detailSet").append(html);
							dealAddDelBtn();
							form.render();
							dealClickEvent()
						});
				$(".detailDel").off("click");
				$(".detailDel").on('click', function() {
					$(this).parents("tr").remove();
					dealAddDelBtn();
					form.render();
					dealClickEvent();
				});
			}
		});
	</script>
</body>
</html>