<!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: 150%;">
		<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="10%">项目</th>
						<th width="10%">工作类别</th>
						<th width="5%">序号</th>
						<th width="40%">工作内容</th>
						<th width="5%">分值</th>
						<th width="40%">评分标准</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> {{item.job_score}}</td>
						<td> {{item.job_score_standard}}</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: [] //列表信息流数据
			}
		});
		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;
						//console.log(JSON.stringify(data));
						if(result.length > 0) {
							vmA.itemAs = vmA.itemAs.concat(result);
							vmA.$nextTick(function(){		//数据加载完成之后
								var obj = $('#tablePlan');
								rowSpan(1,obj);
								rowSpan(2,obj);
							});
						}
					}					
				},
				error: function(xhr, type, errorThrown) {}
			});
		}
		
		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>