<%@ 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">
 <%@include file="/views/common.jsp"%>
</head>
<style>
	.price-layout-page{
		background:#eeeeee;
		padding:18px;
	}
	.edge .layui-edge{
		right:30px;
	}
	.layui-form-radio, .layui-form-radio *{
		vertical-align:baseline;
	}
</style>
<script id="trainContent" type="text/html">
	{{# layui.each(d.list, function(index, item){  }}
		<ul class="layui-timeline">
			<li class="layui-timeline-item">
				<i class="layui-icon layui-timeline-axis"></i>
				<div class="layui-timeline-content layui-text">
					<p>
						{{item.content}}
					</p>
				</div>
			</li>
		</ul>
	{{# });  }}
</script>
<body class="price-layout-page">
	<form class="layui-form" action="" id="form">
		<input type="hidden" id="type" name="type" value="服务态度">
		<label class="layui-form-label"></label>
		<div class="layui-form-item" id="myRadio"></div>
	</form>
	<div class="layui-col-md12" style="padding: 7px;">
		<div style="background: white; padding: 7px;">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			  	<legend style="color:red;"><h1>服务态度:</h1></legend>
			</fieldset>
			<!-- 渲染到这 -->
			<div id="view"></div>
		</div>
	</div>
</body>
<script>
	layui.use(['form', 'laytpl', 'layer'], function(){ //独立版的layer无需执行这一句
		var  $ = layui.jquery, 
        form = layui.form, 
        layer = layui.layer, 
        laytpl = layui.laytpl;
		form.render();
		
		//一访问页面就调用
		$.ajax({
			url:"/quote_price/getCustomerTrainProTypes",
			type : "GET",
			async: false, // 同步
			data:{
				type:$("#type").val()
			},
			dataType : "json",
			success : function(proTypeResult) {
				var proTypeData = proTypeResult.list

				for(var proTypeItem in proTypeData){
				    var str="<label class='layui-form-label'>"+ proTypeData[proTypeItem].proType +"：</label>"
					$("#myRadio").append(str);
					$.ajax({
						url:"/quote_price/getCustomerTrainKindLabelsByProType",
						type : "GET",
						dataType : "json",
						async: false, // 同步
						data:{
							proType	:proTypeData[proTypeItem].proType,
							type	:$("#type").val(),
							needPage:"0"
						},
						success : function(kindResult) {
							var kindData = kindResult.list
							for(var kindItem in kindData){
							    var kindStr="<input type='radio' name='kind' lay-filter='kind' value="+ JSON.stringify(proTypeData[proTypeItem].proType+ '+' +kindData[kindItem].kindLabel)+ " title="+ JSON.stringify(kindData[kindItem].kindLabel)+">"
								$("#myRadio").append(kindStr)
							}
							$("#myRadio").append("</br>")
						}
					});
				}
				$("#form")[0].reset();
			}
		});
		
		form.on('radio(kind)', function(kindData) {
			// 传过来的数据是proType+kind拼接的
			var data = kindData.value.split("+");
			//获取后台数据后渲染
	        $.ajax({
	        	url: "/quote_price/getCustomerTrainContents",
	            datatype: "json",
	          	// data:$("form").serialize(),
	            data:{
	            	proType	:data[0],
	            	kind	:data[1],
	            	type	:$("#type").val()
	            },
	            type: "GET",
	            async: false,//关闭异步，否则popover组件无法渲染出值
	            context: document.body,
	            success: function (data) {
	                var getTpl = document.getElementById('trainContent').innerHTML,
	                    view = document.getElementById('view');
	                laytpl(getTpl).render(data, function (html) {
	                    view.innerHTML = html;
	                });
	                form.render();
	            }
	        })
			return false;
		})
	});
</script>

</html>