<%@ 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" >

			<input type="hidden" name="serviceType" value="${serviceType}">
			<input type="hidden" name="id" value="${rd.columns.id}">

			<c:if test="${serviceType ne '安装'}">
				<div class="layui-col-xs6" style="margin-top:5px;">
					<label class="layui-form-label">
						<span class="mark">*</span>
						保修类型：
					</label>
					<div class="layui-input-block">
						<select name="warrantyType" lay-verify="required">
							<option value="">请选择</option>
							<option value="1" <c:if test="${rd.columns.warranty_type eq '1'}" > selected</c:if> >保内</option>
							<option value="2" <c:if test="${rd.columns.warranty_type eq '2'}" > selected</c:if>>保外</option>
						</select>
					</div>
				</div>
			</c:if>
			<c:if test="${serviceType eq '安装'}">
				<input type="hidden" value="1" name="warrantyType">
			</c:if>
			<div class="layui-col-xs6" style="margin-top:5px;">
				<label class="layui-form-label">
					<span class="mark">*</span>
					服务措施：
				</label>
				<div class="layui-input-block">
					<select name="serviceStep" id="serviceStep" lay-verify="required">
						<option value="">请选择</option>
						<c:forEach items="${list}" var="li">
							<c:choose>
								<c:when test="${rd.columns.service_step eq li.columns.service_measures}">

									<option value="${li.columns.service_measures}"  selected >${li.columns.service_measures}</option>
									<c:set var="checkStep" value="1"></c:set>
								</c:when>
								<c:otherwise>
									<option value="${li.columns.service_measures}"  >${li.columns.service_measures}</option>
								</c:otherwise>
							</c:choose>
						</c:forEach>
					<c:if test="${checkStep ne 1}">
						<option value="${rd.columns.service_step}"  selected>${rd.columns.service_step}</option>
					</c:if>
					</select>
				</div>
			</div>
			<div class="layui-col-xs6">
				<label class="layui-form-label">
					<span class="mark">*</span>
					结算金额：
				</label>
				<div class="layui-input-block pos-r">

					<input type="text" name="chargeAmount" lay-verify="required" maxlength="50" placeholder="请填写结算金额" autocomplete="off" class="layui-input" value="${rd.columns.charge_amount }">
					<c:if test="${serviceType eq '安装'}">
						<span class="pos-a h-32 lh-32 layui-span-unit" >元/KW</span>
					</c:if>
				</div>
			</div>
			<div class="layui-col-xs12 mt-10" >
				<label class="layui-form-label">
					服务项目：
				</label>
				<div class="layui-input-block">
					<textarea name="serviceContent" placeholder="请填写服务项目" class="layui-textarea" autocomplete="off" >${rd.columns.service_content }</textarea>
				</div>
			</div>
			<div class="layui-form-item layui-hide ">
				<input type="button" lay-submit lay-filter="LAY-user-front-submit_edit" id="LAY-user-front-submit_edit" 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>' + '<div class="layui-input-inline" >'
									+ '<select name="basisType" lay-verify="required" style="overflow:true;">' + '<option value="">请选择</option>'
									+ '<option value="0">服务费用</option>' + '<option value="2">奖惩费用</option>' + '<option value="1">其他费用</option>' + '</select>' + '</div>' + '</td>'
									+ '<td>'
									+ '<input type="text" name="chargeAmount" lay-verify="priceRule" maxlength="50" 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>