<!DOCTYPE html>
<html lang="en" 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">
		
<link th:href="@{/graphic/css/index-327d228dbecdc633f03c.css}"
	rel="stylesheet">
	<!--标准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}"/>
		
<style type="text/css">
td {width ="50%"
	
}

.data_content {
	font-size: 20px;
	text-align: center;
	vertical-align: middle;
}
</style>
</head>

<body>

	<div class="select_time_content">
		<div class="select_start_date">
			<div class="start_date_left">开始时间</div>
			<div class="start_date_right">
				<input type="text" name="start_date" id="start_date"
					placeholder="选择开始日期" readonly="readonly">
			</div>
		</div>
		<div class="select_start_date">
			<div class="start_date_left">结束时间</div>
			<div class="start_date_right">
				<input type="text" name="end_date" id="end_date"
					placeholder="选择开始日期" readonly="readonly">
			</div>
		</div>
	</div>
	<div class="mui-slider">
		           		<div style="padding: 5px 10px;">
		           			 <div style="width: 100%;">
								<input type="search" id="s_departmentname" class="" placeholder="请选择部门" readonly="readonly" style="float:left; width: 65%; margin-bottom: 8px;">
								<input type="hidden" id="s_departmentid" value="" />
								<div style="float: right; ">
									<button type="button" id="btn_selectqydept" class="selectqycontact mui-btn" style="height: 34px; line-height: 17px;">选择</button>
									<button type="button" id="btn_clearqydept" class="mui-btn btn-clear" style="height: 34px; line-height: 17px;">清空</button>
								</div>
							</div> 
		           			 <div style="width: 100%;">
								 <input type="search" id="s_username" class="" placeholder="请选择联系人" readonly="readonly" style="float:left; width: 65%; margin-bottom: 8px;">
								<input type="hidden" id="s_userid" value="" /> 
								 <div style="float: right; ">
									<button type="button" id="btn_selectqyuser" class="selectqycontact mui-btn" style="height: 34px; line-height: 17px;">选择</button>
									<button type="button" id="btn_clearqyuser" class="mui-btn btn-clear" style="height: 34px; line-height: 17px;">清空</button>
								</div> 
							</div> 
							<button type="button" id="search_btn" class="mui-btn mui-btn-primary" style="width:100%;">查&nbsp;&nbsp;询</button>
						</div>

		            </div>




	<br>
	<div class="data_content" style="margin: 0 auto; width: 95%">
		<table border="1" id="person_list" width="100%">
			<tr>
				<td>姓名</td>
				<td>数量</td>
			</tr>			
		</table>
	</div>
<script type="text/javascript" src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript"
		th:src="@{/graphic/js/index-327d228dbecdc633f03c.js}"></script>
	<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="@{/js/weixin-work/public.js}"></script>
	
	<script type="text/javascript">
		$(function() {
			getJsConfig();
			saveAction();
		});
		function saveAction() {
			var starttime = $("input[name='start_date']").val();
			var endtime = $("input[name='end_date']").val();
			var deptId = $('#s_departmentid').val();
			var userId = $('#s_userid').val();
			$.post('[[@{/mobile/api/graphic/queryPersonProject}]]', {
				starttime : starttime,
				endtime : endtime,
				deptId : deptId,
				userId : userId
			}, function(result) {
				var $table = $("#person_list");	
				$table.html("<tr><td>姓名</td><td>数量</td></tr>");
				 $.each(result.list, function (index, itemobj) {
					 var vTr = "<tr><td>"+itemobj.true_name+"</td>"+"<td>"+itemobj.num+"</td></tr>";
						$table.append(vTr);
		         });
				
			}, 'json');
		}
		$('#search_btn').click(function() {
			console.log("查询");
			saveAction();
		});
		
		
		// 从企业通讯录选择部门或者联系人
		$('.selectqycontact').click(function(){
			var btnid = $(this).attr('id');
			var type = (btnid == 'btn_selectqydept') ? 'department' : 'user';
			selectEnterpriseContact(type);
		});
		
		// 清空已选择的部门或联系人
		$('.btn-clear').click(function(){
			var btnid = $(this).attr('id');
			if(btnid == 'btn_clearqydept'){
				$('#s_departmentid').val('');
				$('#s_departmentname').val('');
			}else if(btnid == 'btn_clearqyuser'){
				$('#s_userid').val('');
				$('#s_username').val('');
			}
		});
		
		//通过jsapi选择企业联系人
		function selectEnterpriseContact(type){
			var seltype = [];
			seltype.push(type);
			
			var select_deptIds = '', select_userIds = '';
			var select_deptNames = '', select_userNames = '';

			wx.invoke("selectEnterpriseContact", {
		     "fromDepartmentId": -1,// 必填，表示打开的通讯录从指定的部门开始展示，-1表示自己所在部门开始, 0表示从最上层开始
				"mode": "single",	// 必填，选择模式，single表示单选，multi表示多选
			//	"type": ["department", "user"],// 必填，选择限制类型，指定department、user中的一个或者多个
				"type": seltype,
		     "selectedDepartmentIds": [],// 非必填，已选部门ID列表。用于多次选人时可重入，single模式下请勿填入多个id
		     "selectedUserIds": []	// 非必填，已选用户ID列表。用于多次选人时可重入，single模式下请勿填入多个id
		        },function(res){
		      		if(!(res.err_msg == "selectEnterpriseContact:ok")){
		      			
		      			return;
		      		}
		       		if(typeof res.result == 'string'){
		          		res.result = JSON.parse(res.result) // 由于目前各个终端尚未完全兼容，需要开发者额外判断result类型以保证在各个终端的兼容性
		       		}
		       		
		       		if(seltype == 'department'){ // 选择部门
		       			var selectedDepartmentList = res.result.departmentList;// 已选的部门列表
		           		for (var i = 0; i < selectedDepartmentList.length; i++){
		              		var department = selectedDepartmentList[i];
		              		var departmentId = department.id;// 已选的单个部门ID
		               		var departemntName = department.name;// 已选的单个部门名称
		               		select_deptIds += ((select_deptIds=='')?'':',') + departmentId;
		               		select_deptNames += ((select_deptNames=='')?'':', ') + departemntName;
		               		$('#s_departmentid').val(select_deptIds);
		               		$('#s_departmentname').val(select_deptNames);
		              	}
		       		}else{ // 选择用户
		       			var selectedUserList = res.result.userList; // 已选的成员列表
		              	for (var i = 0; i < selectedUserList.length; i++){
		              		var user = selectedUserList[i];
		                  	var userId = user.id; // 已选的单个成员ID
		               		var userName = user.name;// 已选的单个成员名称
		                  	var userAvatar= user.avatar;// 已选的单个成员头像
		              		select_userIds += ((select_userIds=='')?'':',') + userId;
		              		select_userNames += ((select_userNames=='')?'':', ') + userName;
		              		$('#s_userid').val(select_userIds);
		              		$('#s_username').val(select_userNames);
		      			}
		       		}
				}
			);
		}
	</script>
</body>

</html>