<!VDNDOC "PageBase":"nvo_dw2json","IniEvent":"PageIni">
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>DW2JSON</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/AppStyle.css" />
		<style>
			.mui-control-content {
				padding: 0px;
				padding-top: 55px;
			}
			
			.mui-bar {
				height: 55px;
				top: 0px;
			}
			
			table {
				border-spacing: 1;
				border-collapse: collapse;
				background: white;
				border-radius: 6px;
				overflow: hidden;
				width: 100%;
				margin: 0 auto;
				position: relative;
				background: #9BC86A;
			}
			
			table td,
			table th {
				padding-left: 8px;
			}
			
			table thead tr,
			.cus-header {
				height: 40px;
				background: #FFED86;
				font-size: 16px;
				text-align: center;
			}
			
			.cus-header .mui-table-cell {
				vertical-align: middle;
				font-size: 16px;
				font-weight: bold;
			}
			
			.cus-header-detail .mui-table-cell {
				vertical-align: middle;
				font-size: 14px;
				font-weight: bold;
			}
			
			.mui-collapse-content .mui-table .mui-table-cell {
				border-bottom: 1px solid #E3F1D5;
				font-size: 14px;
				height: 30px;
				vertical-align: middle;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis
			}
			
			table tbody tr {
				height: 40px;
				border-bottom: 1px solid #E3F1D5;
				background: white;
			}
			
			table tbody tr:last-child {
				border: 0;
			}
			
			table tbody tr td input {
				color: blue;
			}
			
			table tbody .selected {
				background: lightgreen;
			}
			
			body {
				font: 400 16px 'Calibri', 'Arial';
			}
			
			.cus-small{
				border: none !important;
				width: 20px !important;;
				height: 20px !important;
				padding: 0px;
				background-color: transparent;
				font-size: 16pt;
				}
		</style>
	</head>

	<body>
		<nav class="mui-bar">
			<div id="segmentedControl" class="mui-segmented-control">
				<a class="mui-control-item mui-active" href="#item1">表格（
					<!--INCLUDE:count-->）</a>
				<a class="mui-control-item" href="#item2">表格（ 分组）
				</a>
				<a class="mui-control-item" href="#item3">列表</a>
			</div>
		</nav>

		<div class="mui-content">
			<div>
				<div id="item1" class="mui-control-content mui-active">
					<table>
						<thead>
							<tr>
								<th class="mui-col-sm-4">服务门店</th>
								<th class="mui-col-sm-4">客户</th>
								<th class="mui-col-sm-3">时间</th>
							</tr>
						</thead>
						<tbody id="t_content">
						</tbody>
					</table>
				</div>
				<div id="item2" class="mui-control-content">
					<div class="mui-table cus-header">
						<div class="mui-table-cell mui-col-sm-8">服务门店</div>
						<div class="mui-table-cell mui-col-sm-4">订单数量</div>
					</div>
					<ul id="u_group_content" class="mui-table-view">
					</ul>

				</div>
				<div id="item3" class="mui-control-content">
					<div class="mui-content-padded">
						<button type="button" id='b_get' class="mui-btn mui-btn-block mui-btn-primary">获取数据</button>
					</div>
					<ul id="ul_content" class="mui-table-view">

					</ul>
				</div>
			</div>
		</div>
		<!--------------------嵌入式模板------------------------->
		<script id="item_dw2json" type="text/x-jquery-tmpl">
			<tr>
				<td>${c_store}</td>
				<td>${c_user}</td>
				<td>${d_date}</td>
			</tr>
		</script>
		<!--分组-->
		<script id="item_dw2json_group" type="text/x-jquery-tmpl">
			<li id="grp_${c_store}" class='mui-table-view-cell mui-collapse'>
				<a class='mui-navigate-right' href='#'>
					<div class="mui-table">
						<div class="mui-table-cell mui-col-sm-8">${c_store}</div>
						<div id="sum_${c_store}" class="mui-table-cell mui-col-sm-4 mui-text-center">0</div>
					</div>
				</a>
				<div id="${c_store}_detail" class="mui-collapse-content">
					<div class="mui-table cus-header-detail">
						<div class="mui-table-cell mui-col-sm-4">单号</div>
						<div class="mui-table-cell mui-col-sm-5">客户</div>
						<div class="mui-table-cell mui-col-sm-3">时间</div>
					</div>
				</div>
			</li>
		</script>
		<script id="item_dw2json_group_detail" type="text/x-jquery-tmpl">
			<div class="mui-table">
				<div class="mui-table-cell mui-col-sm-4">${c_id}</div>
				<div class="mui-table-cell mui-col-sm-5">${c_user}
					{{if c_sex == "女"}}
						 <input type="checkbox" id="ck_sex_${c_id}" checked="checked"/>
						 {{else}}
						 <input type="checkbox" id="ck_sex_${c_id}"/>
					{{/if}}
				</div>
				<div  class="mui-table-cell mui-col-sm-3">
					<span id="dt_${c_id}">${d_date}</span>
					<button class="cus-small mui-icon mui-icon-compose" refid="${c_id}"></button>
				</div>
				
			</div>
		</script>
		<!--列表-->
		<script id="item_list" type="text/x-jquery-tmpl">
			<li class="mui-table-view-cell">门店: ${c_store}&nbsp;用户:${c_user}
				<h5>${d_date}</h5>
			</li>
		</script>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
		<script type="text/javascript" src="js/jquery.tmpl.js"></script>
		<script type="text/javascript" src="js/vdn.js"></script>
		<script>
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});

			/**
			 * 数据初始化
			 */
			mui.ready(function() {
				//这里等待服务器端嵌入列表数据
				var data = "/*<!--INCLUDE:data;JS-->*/";
				//阻止开发时未填充数据报错
				if(typeof(data) == "string") {
					return
				}
				//模板
				//var fmt = "<tr><td>${c_store}</td><td>${c_user}</td><td>${d_date}</td></tr>"
				vdn.appendTo("t_content", $("#item_dw2json"), data);
				//分组
				$.each(data, function(index, item) {
					//group header
					if($("#grp_" + item.c_store).length == 0) {
						vdn.appendTo("u_group_content", $("#item_dw2json_group"), item);
					}
					//明细
					vdn.appendTo(item.c_store + "_detail", $("#item_dw2json_group_detail"), item);
					//sum
					$("#sum_" + item.c_store).text(eval($("#sum_" + item.c_store).text()) + 1);
				});

				//前台修改关联合计
				$("#t_content2").on("change", ".cus-num", function() {
					f_sum();
				});
				
				//修改状态
				$("#t_content2").on("change", "input", function() {
					$(this).parents("tr").attr("sta")
				});
			});
			//vdn.disableBack();
			/* 列表 动态加载数据 */
			$(document).on("tap", "#b_get", function() {
				mui("#b_get").button('loading');
				$("#ul_content").empty();
				//获取明细数据
				vdn.get({
						method: 'nvo_dw2json.getdata_json'
					}, function(data) {
						//模板
						//var fmt = '<li class="mui-table-view-cell">门店:	${c_store}&nbsp;用户:${c_user}<h5>${d_date}</h5></li>'
						vdn.appendTo("ul_content", $("#item_list"), data.Result);
						mui("#b_get").button('reset');
					},
					function(err) {
						alert(err.Message + "(" + err.Code.toString() + ")");
						mui("#b_get").button('reset');
					});
			});
			//表格单选
			$("#t_content").on("tap", "tr", function() {
				if($(this).hasClass("selected")) {
					//已经选择则取消
					$(this).removeClass("selected");
				} else {
					//如果多选去掉这一行
					$("#t_content .selected").removeClass("selected");
					//选择
					$(this).addClass("selected");
					//获取选择行的单元格的值 索引从0开始
					//alert($("#t_content .selected td:eq(0)").text());
					//alert($("#t_content .selected td").eq(0).text());
					//alert($("#t_content .selected td")[0].innerText);
				}
			});
		</script>

	</body>

</html>