<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<title></title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<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" type="text/css" th:href="@{/libs/mui/css/mui.min.css}"/>
		<link rel="stylesheet" type="text/css" th:href="@{/libs/mui/css/mui.picker.min.css}"/>
		<!--自定义的css-->
		<link rel="stylesheet" type="text/css" th:href="@{/libs/mui/css/app.css}"/>
		<style>
			* { touch-action: pan-y; } /* 使用全局样式样式去掉: 滑动报错Unable to preventDefault inside passive event listener due to target being treated as passive */
			
			.mui-content>.mui-table-view:first-child {
				margin-top: -1px;
			}
			
			.mui-table h4,.mui-table h5,.mui-table .mui-h5,.mui-table .mui-h6,.mui-table p{
		        margin-top: 0;
		    }
		    .mui-table h4{
		        line-height: 21px;
		        font-weight: 500;
		    }
		</style>
	</head>
	<body>
		
		<div class="mui-content">
			
			<!--下拉刷新容器-->
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<!--数据列表-->
					<!-- <ul class="mui-table-view mui-table-view-chevron"></ul> -->
					
					<div class="mui-input-row mui-search" id="div-global-search" style="margin-top: 5px; margin-bottom: -10px;">
						<input type="search" id="searchInput" class="mui-input-clear" placeholder="搜索">
					</div>
					
					<ul id="project-all-list" class="mui-table-view mui-table-view-striped mui-table-view-condensed"></ul>
				</div>
			</div>
			
		</div>
		
		<!-- 项目详情模态框 start -->
		<div id="modal_project_moreinfo" class="mui-modal">
			<header class="mui-bar mui-bar-nav">
				<a id="btn_colse_modal" class="mui-icon mui-icon-close mui-pull-right" href="#modal_project_moreinfo"></a>
				<h1 class="mui-title">项目详情</h1>
			</header>
			
			<div class="mui-content" style="height: 100%; background-color: #fff; margin: 10px 8px;">
				<!-- 下面两个div属于滚动插件 -->
				<div class="mui-scroll-wrapper mui-scroll-wrapper-projectdetails" style="margin-top: 55px; padding-bottom: 50px;">
				<div class="mui-scroll">
					<div id="project-content" style="padding: 20px 10px;"></div>
					
					<div id="btngroups" dataid="" class="" style="margin: 5px 10px;">
				        <button type="button" class="mui-btn mui-btn-success" id="btn_projectfiles" style="width:48%;float:left;margin-right: 4%;">项目文档</button>
				        <button type="button" class="mui-btn mui-btn-primary" id="btn_projecttasks" style="width:48%;float:right;">任务进度</button>
				    </div>
				</div>
				</div><!-- 滚动插件div -->
			</div> <!-- /.mui-content -->
		</div> <!-- #modal_project_moreinfo -->
		<!-- 项目详情模态框 start -->
		
	</body>
	<script th:src="@{https://lib.baomitu.com/zepto/1.2.0/zepto.min.js}"></script>
	<script th:src="@{https://res.wx.qq.com/open/js/jweixin-1.4.0.js}"></script>
	<script th:src="@{/libs/mui/js/mui.min.custom.js}"></script>
	<script th:src="@{/libs/mui/js/mui.pullToRefresh.js}"></script>
	<script th:src="@{/libs/mui/js/mui.pullToRefresh.material.js}"></script>
	<script th:src="@{/libs/mui/js/mui.picker.min.js}"></script>
	<script th:src="@{/js/weixin-work/public.js}"></script>
	<script th:src="@{/libs/vConsole/vconsole.min.js}"></script>
	
	<!-- 根路径 -->
	<script type="text/javascript" th:inline="javascript">
	/*<![CDATA[*/
	var ctxPath = /*[[@{/}]]*/ '';
	/*]]>*/
	</script>
	
	<script>
	
	var project_list_item_html = 
		'<li class="mui-table-view-cell">'+
			'<div class="mui-table">'+
				'<div class="mui-table-cell">'+
					'<h4 class="mui-ellipsis-2 p-title" dataid="{dataid}">'+
						'{name}'+
						'&nbsp;<span class="mui-badge">{area}</span>'+
					'</h4>'+
					'<table class="nbclass-table">'+
						'<tr>'+
							'<td class="mui-h5 td-label">创建人员：</td>'+
							'<td class="mui-h5">{createUserName}</td>'+
							'<td class="mui-h5 text-right pl15 td-label">创建时间：</td>'+
							'<td class="mui-h5">{createTime}</td>'+
						'</tr>'+
						'<tr>'+
							'<td class="mui-h5">重要程度：</td>'+
							'<td class="mui-h5">{importanceName}</td>'+
							'<td class="mui-h5 text-right pl15">负责人员：</td>'+
							'<td class="mui-h5">{fzrNames}</td>'+
						'</tr>'+
						'<tr>'+
							'<td class="mui-h5">计划时间：</td>'+
							'<td class="mui-h5" colspan="3">{startTime} ~ {endTime}</td>'+
						'</tr>'+
						'<tr>'+
							'<td class="mui-h5">客户单位：</td>'+
							'<td class="mui-h5" colspan="3">{typeName}</td>'+
						'</tr>'+
						'<tr>'+
							'<td class="mui-h5">对接人员：</td>'+
							'<td class="mui-h5" colspan="3">{customer}</td>'+
						'</tr>'+
						'<tr>'+
							'<td class="mui-h5">合同编号：</td>'+
							'<td class="mui-h5" colspan="3" style="width: 100%;">{contractno}'+
								'<div class="text-right" colspan="3" style="float:right; text-align:right;">项目状态：{status}</div>'+
							'</td>'+
						'</tr>'+
					'</table>'+
				'</div>'+
			'</div>'+
		'</li>';
		
		
		mui.init({
			pullRefresh: {
				container: '#pullrefresh',
				down: {
					style:'circle',
					callback: pulldownRefresh
				},
				up: {
					auto:true,
					contentrefresh: '正在加载...',
					callback: pullupRefresh
				}
			}
		});
		
		var loading = false;
		var pageNum = 0;
		// 上拉加载
		function pullupRefresh() {
			if(loading)return;
			setTimeout(function() {
				pageNum++;
				getProjectList(pageNum);
			}, 600);
		}
		
		// 下拉刷新
		function pulldownRefresh() {
			if(loading)return;
		//	mui('#pullrefresh').pullRefresh().refresh(true); // 重置上拉加载
			setTimeout(function() {
				pageNum = 1;
				getProjectList(pageNum);
				mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
				mui.toast("刷新成功");
			}, 600);
		}

		function fmtDateTime(dd){
			if(dd==null || dd==undefined)return '';
			if(dd.length > 18)dd = dd.substring(6,16);
			return dd;
		}

		// 查询项目列表
		function getProjectList(page){
			if(loading)return;
			var pagesize = 15;
			var params = {};
			params['offset'] = page;
			params['limit'] = pagesize;
			params['status'] = 1;
			params['name']  = $('#searchInput').val();
			
			var pullObj = mui('#pullrefresh').pullRefresh();
			if(page == 1){
				$('#project-all-list').html('');
				pullObj.refresh(true); // 重置上拉加载
			}
			loading = true;
			$.post(ctxPath+'mobile/api/project/getList', params, function(result){
				loading = false;
				if(result.total > 0 && (result.rows).length>0){
					var items = result.rows;
					var html = '';
					for(var i in items){
						var projectstatus = '';
						if(items[i].status == 0){
							projectstatus = '<span class="mui-badge">未开始</span>';
						}else if(items[i].status == 1){
							projectstatus = '<span class="mui-badge mui-badge-success">运行中</span>';
						}else if(items[i].status == 2){
							projectstatus = '<span class="mui-badge mui-badge-warning">已暂停</span>';
						}else if(items[i].status == 3){
							projectstatus = '<span class="mui-badge mui-badge-primary">已结束</span>';
						}
						var createUserName=(items[i].createUserName==null||items[i].createUserName=='null'||items[i].createUserName=='') ? items[i].createUserId : items[i].createUserName;
					//	var createTime = formatDate(items[i].createTime,'MM-dd hh:mm');
						var createTime = fmtDateTime(items[i].createTime);
						html += project_list_item_html.replace("{dataid}", items[i].id).replace("{name}", items[i].name).replace("{status}", projectstatus)
						.replace("{area}", items[i].area).replace("{customer}", items[i].customer).replace("{contractno}", items[i].contractno)
						.replace("{createUserName}", createUserName).replace("{createTime}", createTime)
						.replace("{importanceName}", items[i].importanceName).replace("{typeName}", items[i].typeName)
						.replace("{startTime}", fmtDateTime(items[i].startTime)).replace("{endTime}", fmtDateTime(items[i].endTime))
						.replace("{fzrNames}", items[i].fzrNames);
					}
					if(page == 1)$('#project-all-list').html(html); // 如果是第一页清空数据
					else $('#project-all-list').append(html);
				}
				
				if(result.total == 0 || result.total<=(page*pagesize) || page>20){
					pullObj.endPullupToRefresh(true);	// 当为true时，底部出现没有更多数据，并且不能滑动
				}else{
					pullObj.endPullupToRefresh();	// 当为false或空时，底部出现正在加载，滑动到下一页
				}
			}, 'json');
		}
		
		//根据项目ID查询项目详情
		function getProjectDetail(pid){
			$.post(ctxPath+'mobile/api/project/findById', {id:pid}, function(result){
				var hasContent = false;
				if(result.ret == 0 && result.name){
					$('#btngroups').attr("dataid", result.id);
					hasContent = (result.content!=null && $.trim(result.content)!='');
				}
				$('#project-content').html(hasContent ? result.content : '<p style="text-align:center;">该创建者很懒，什么内容都没写下~</p>');
			}, 'json');
		}
		
		$(function(){
			
			$('#searchInput')
			    .on('blur', function () {
				//	console.log('鼠标离开了...');
			        if(!this.value.length){
			        	
			        }
			    })
			    .on('input', function(){
			    //	console.log('input,value='+this.value);
			    	pageNum = 1;
					getProjectList(pageNum);
			    })
			;
			// 搜索栏点击x图标
			mui('#div-global-search').on('tap', '.mui-icon-clear', function(e) {
				pageNum = 1;
				getProjectList(pageNum);
			});
			
			// 弹出项目详情模态框(这能不能用jquery的click事件绑定，否则弹出层会事件穿透，在弹层上点击会响应遮挡层的事件)
			mui("#project-all-list, #project-area-list, #project-user-list, #project-time-list").on('tap','.p-title',function(){
				$('#modal_project_moreinfo').addClass('mui-active');
				var pid = this.getAttribute("dataid");
				getProjectDetail(pid);
			});
			
			// 关闭项目详情模态框
			$('#btn_colse_modal').click(function(){ // 关闭模态框，其实不需要这个也会关闭，加这个可做些事件处理
				$('#modal_project_moreinfo').removeClass('mui-active');
				$('#project-content').html('');
				$('#btngroups').attr("dataid", '');
			});
			
			// 点击项目文档按钮
			$('#btn_projectfiles').click(function(){
				var dataid = $(this).parent().attr('dataid');
				if(dataid == null || $.trim(dataid)=='')return;
				window.location.href = ctxPath+'mobile/page/project/file/list?pid='+dataid;
			});
			
			// 点击任务进度按钮
			$('#btn_projecttasks').click(function(){
				var dataid = $(this).parent().attr('dataid');
				if(dataid == null || $.trim(dataid)=='')return;
				window.location.href = ctxPath+'mobile/page/project/task/list?pid='+dataid;
			});
			
		});
	</script>
</html>