<!VDNDOC "PageBase":"nvo_bill","IniEvent":"ListBill">
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>我的预约</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">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
	</head>

	<body>
		<!--header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title"></h1>
		</header-->
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul class="mui-table-view mui-table-view-chevron" id="list">
					<!--动态加载列表-->
				</ul>
			</div>
		</div>
		<!--模板-->
		<div id="item_list" type="text/x-jquery-tmpl">
			<li id='${c_id}' class='mui-table-view-cell mui-collapse'>
				<a class='mui-navigate-right' href='#'>${d_date}&nbsp;${c_store}</a>
				<ul class='mui-table-view mui-table-view-chevron'>
					<li class='mui-table-view-cell'>
						<div class='mui-slider-right mui-disabled'>
							<a class='mui-btn mui-btn-red'>取消</a>
						</div>
						<div class='mui-table mui-slider-handle' id='${c_id}_content'></div>
					</li>
				</ul>
			</li>
		</div>
		
		<!--模板-->
		<div id="item_detail" type="text/x-jquery-tmpl">
			<h4 class='mui-ellipsis-2'>服务:${oper}</h4>
			<p class='mui-h6 mui-ellipsis'>项目:{{html items}}</p>
			<p class='mui-h6 mui-ellipsis'>预留电话:${tel}</p>
		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
	<script src="js/jquery.tmpl.js"></script>
	<script src="js/vdn.js"></script>
	<script>
		mui.init({
			swipeBack: true, //启用右滑关闭功能
			pullRefresh: {
				container: '#pullrefresh',
				down: {
					callback: pulldownRefresh
				},
				up: {
					contentrefresh: '正在加载...',
					callback: pullupRefresh
				}
			}
		});
		//记录第一条和最后一条数据
		var ls_start = "",
			ls_end = "";

		function RecordMark() {
			objs = $("#list .mui-collapse");
			if(objs.length > 0) {
				ls_start = objs[0].id;
				ls_end = objs[objs.length - 1].id;
			}
		}
		/**
		 * 下拉刷新具体业务实现
		 * 这里使用了get方式，注意与下面的post在params格式上的区别
		 */
		function pulldownRefresh() {
			vdn.get({
					"method": "nvo_bill.getbill_json",
					"params": ls_start + "/refresh"
				}, function(data) {
					var count = data.Result.length;
					if(count > 0) {
						parseBill("refresh", data.Result);
					}
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				},
				function(err) {
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
					mui.toast(err.Message + "(" + err.Code.toString() + ")");
				});
		}

		/**
		 * 上拉加载具体业务实现
		 * 这里使用了post方式
		 */
		function pullupRefresh() {
			vdn.post({
					"method": "nvo_bill.getbill_json",
					"params": [ls_end, "load"]
				}, function(data) {
					var count = data.Result.length;
					if(count > 0) {
						parseBill("load", data.Result);
					}
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((count == 0)); //参数为true代表没有更多数据了。
				},
				function(err) {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((false)); //参数为true代表没有更多数据了。
					mui.toast(err.Message + "(" + err.Code.toString() + ")");
				});
		}
		/**
		 * 数据初始化
		 */
		mui.ready(function() {
			//mui('#pullrefresh').pullRefresh().pullupLoading();
			//这里等待服务器端嵌入列表数据
			var data = <!--INCLUDE:ListData;JS-->;
				//模板
				parseBill("load", data);
			//msg
			mui.toast('展开明细，左滑可以取消预约</br>该页面主要演示了数据的动态加载</br>主要使用了嵌入数据块及API两种形式</br>下拉刷新上拉加载');
		});
		/**
		 *解析主列表 
		 *使用appendTo、prependTo函数分别将数据格式化后并插入或追加到列表中
		 */
		function parseBill(action, data) {
			//Appent to List
			if(action == "load") {
				vdn.appendTo("list", $("#item_list"), data);
			} else {
				vdn.prependTo("list", $("#item_list"), data);
			}
			RecordMark();
		}
		/**
		 * 解析明细数据
		 * 使用appendTo函数将数据格式化后并追加到指定对象中
		 */
		function parseDetail(id, data) {
			//模板
			//var fmt = "<h4 class='mui-ellipsis-2'>服务:${oper}</h4><p class='mui-h6 mui-ellipsis'>项目:{{html items}}</p><p class='mui-h6 mui-ellipsis'>预留电话:${tel}</p>";
			//vdn.appendTo(id + "_content", fmt, data);
			vdn.appendTo(id + "_content", $("#item_detail"), data);
		}
		//点击列表加载明细
		mui(".mui-table-view").on('tap', '.mui-collapse', function() {
			//获取id
			var id = this.getAttribute("id");
			if($("#" + id).attr("loaded")) {
				return;
			}
			//设置已经加载标志
			$("#" + id).attr("loaded", true);
			//获取明细数据
			vdn.get({
					method: 'nvo_bill.getdetail_json',
					params: id,
				}, function(data) {
					parseDetail(id, data.Result);
				},
				function(err) {
					//设置已经加载标志
					$("#" + id).attr("loaded", false);
					mui.toast(err.Message + "(" + err.Code.toString() + ")");
				});
		});
		var btnArray = ['确认', '取消'];
		//删除；
		(function($) {
			$('.mui-table-view').on('tap', '.mui-btn', function(event) {
				var elem = this;
				var li = elem.parentNode.parentNode.parentNode.parentNode;
				var id = li.getAttribute("id");
				mui.confirm('确认取消该预约？', '我的预约', btnArray, function(e) {
					if(e.index == 0) {
						vdn.post({
								"method": "nvo_bill.DelDetail",
								"params": [id]
							}, function(data) {
								li.parentNode.removeChild(li);
							},
							function(err) {
								mui.toast(err.Message + "(" + err.Code.toString() + ")");
							});
					} else {
						setTimeout(function() {
							$.swipeoutClose(elem.parentNode.parentNode);
						}, 0);
					}
				});
			});
		})(mui);
	</script>

</html>