<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<title></title>
		<script src="../../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../../js/jquery-1.11.2.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../../css/mui.min.css" />
		<link href="../../../css/OA-style.css" rel="stylesheet" />
		<style>
			body {
				background-color: #FFFFFF;
			}
			/* table标题背景 */
			
			.th-back {
				background-color: #00BCD4;
				color: #fff;
			}
			
			.font-color {
				color: #00BCD4;
			}
			
			.mui-content {
				background-color: #FFFFFF;
			}
		</style>

	</head>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #FFFFFF;"></a>
		<h1 class="mui-title">
			<span >部门月度总结表</span>
		</h1>
	</header>
	<div class="mui-content" style="overflow: auto;width: 200%;">
		<div id="detailDiv">	
			
			<span id="title" style="text-align: center; display: block; font-size: 25px; margin: 10px;"></span>
			<span id="deptname" style="text-align: center; display: block; font-size: 25px; margin: 10px;"></span>

			<table id="tablePlan" border="1" style="background-color: #FFFFFF;margin: 5px;text-align: center;border: #e0e0e0 1px solid;">
				<tbody>
					<tr>
						<th width="12%" rowspan="2">项目</th>
						<th width="10%" rowspan="2">工作类别</th>
						<th width="5%" 	rowspan="2">序号</th>
						<th width="30%" rowspan="2">工作内容</th>
						<th width="5%" 	rowspan="2">工作量占比</th>
						<th width="20%" rowspan="2">评分标准</th>
						<th width="20%"	rowspan="2">评分依据</th>
						<th width="5%"	rowspan="2">自评</th>
						<th width="5%" 	colspan="8">评分人员</th>
					</tr>
					<tr >
						<th id="job_mutual1" width="5%"></th>
						<th id="job_mutual2" width="5%"></th>
						<th id="job_mutual3" width="5%"></th>
						<th id="job_mutual4" width="5%"></th>
						<th id="job_mutual5" width="5%"></th>
						<th id="job_mutual6" width="5%"></th>
						<th id="job_leader_score" width="5%"></th>
						<th id="job_manager_score" width="5%"></th>
					</tr>
					<tr v-for="item in itemAs">
						<td> {{item.job_project}}</td>
						<td> {{item.job_type_of_work}}</td>
						<td> {{item.job_serial_number}}</td>
						<td> {{item.job_content}}</td>
						<td> 
							<template v-if="item.job_workload_share != null ">
								{{   Number(item.job_workload_share*100).toFixed(0) }}%
							</template>
						</td>
						<td> {{item.job_score_standard}}</td>
						<td> {{item.job_score_basis}}</td>
						<td> 
							<template v-if="item.job_self_assessment != null ">
								{{   Number(item.job_self_assessment*100).toFixed(0) }}%
							</template>
						</td>
						<td>
							<template v-if="item.job_mutual1 != null ">
								{{   Number(item.job_mutual1*100).toFixed(0) }}%
							</template>
						</td>
						<td>
							<template v-if="item.job_mutual2 != null ">
								{{   Number(item.job_mutual2*100).toFixed(0) }}%
							</template>
						</td>
						<td> 
							<template v-if="item.job_mutual3 != null ">
								{{   Number(item.job_mutual3*100).toFixed(0) }}%
							</template>
						</td>
						<td>
							<template v-if="item.job_mutual4 != null ">
								{{   Number(item.job_mutual4*100).toFixed(0) }}%
							</template>
						</td>
						<td> 
							<template v-if="item.job_mutual5 != null ">
								{{   Number(item.job_mutual5*100).toFixed(0) }}%
							</template>
						</td>
						<td>
							<template v-if="item.job_mutual6 != null ">
								{{   Number(item.job_mutual6*100).toFixed(0) }}%
							</template>
						</td>
						<td>{{item.job_leader_score}}</td>
						<td>{{item.job_manager_score }}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<script src="../../../js/vue.min.js"></script>
	<script src="../../../js/config.js"></script>
	<script src="../../../js/app.js"></script>
	<script>
		mui.init();
		var vmA = new Vue({
			el: '#detailDiv',
			data: {
				itemAs: [], //列表信息流数据
				itemBs: [] //列表信息流数据
			}
		});
		mui.plusReady(function() {
			var self = plus.webview.currentWebview();
			var Excelid = 	self.Excelid;		//excel主键
			var job_type = 	self.job_type;		//类型  工作计划 | 工作总结
			var title  = 	self.title;			//excel标题
			var deptname  = self.deptname;		//excel部门

			document.getElementById("title").innerHTML = title;
			document.getElementById("deptname").innerHTML = deptname;
			doDetail(Excelid,job_type)
		});

		function doDetail(Excelid,job_type) {
			var url = API.API_URL();
			var state = app.getState(); //获取登陆信息
			var staffId = state.user.useId;
			var obj = {
				'serviceId': 'oa_2018A1126GetDeptJobDetail',
				'params': '{Excelid:' + Excelid + ',jobtype:"' + job_type + '"}'
			};
			mui.ajax(url, {
				dataType: 'json', 				//服务器返回json格式数据
				type: 'post', 					//HTTP请求类型
				data: obj,
				timeout: 10000, 				//超时时间设置为10秒；
				headers: {
					'Accept': 'application/json'
				}, //超时时间设置为10秒；
				success: function(data) {
					if(data.returnCode == "0") {						
						var result = data.returnParams.Rows;
						var Rules =  data.returnParams.Rules;
						//console.log(JSON.stringify(data));
						if(result.length > 0) {
							vmA.itemAs = vmA.itemAs.concat(result);
						
							for(var i=0; i<Rules.length; i++ ){
								var deptName = Rules[i].score_user_deptname;
								var scoreUser = Rules[i].score_username;
								    scoreUser  = scoreUser.substring(0,scoreUser.indexOf("("));	//替换成该值
								console.log(deptName+'/'+scoreUser);
								$('#'+Rules[i].set_type).text(deptName+'/'+scoreUser);
							}
							vmA.$nextTick(function(){		//数据加载完成之后
								var obj = $('#tablePlan');
								rowSpan(1,obj);
								rowSpan(2,obj);
								rowSpan(15,obj);
								rowSpan(16,obj);
							});
						}
					}					
				},
				error: function(xhr, type, errorThrown) {}
			});
		}
		function changepercent(floa){
        	var str=Number(floa*100).toFixed(0); 
        		str+="%";
        	if(floa == null ){
        		return '';
        	}
        	return str;
		}
		function rowSpan(num,obj){
			var colIdx = num-1;
			obj.each(function () {
	            var that;
	            $('tr', this).each(function (row) {
	                $('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) {
	                    if (that != null && $(this).html() == $(that).html()) {
	                        rowspan = $(that).attr("rowSpan");
	                        if (rowspan == undefined) {
	                            $(that).attr("rowSpan", 1);
	                            rowspan = $(that).attr("rowSpan");
	                        }
	                        rowspan = Number(rowspan) + 1;
	                        $(that).attr("rowSpan", rowspan);
	                        $(this).hide();
	                    } else {
	                        that = this;
	                    }
	                });
	            });
	        });
		}
	</script>
</html>