<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="xlsx.bundle.js"></script>
<style>
table {
	border-spacing: 0;
	border-top: 1px solid lightgray;
	border-right: 1px solid lightgray;
	width: 100%;
	font-size: 12px;
}

th {
	font-size: 12px;
	font-weight: bold;
	text-align: right;
	padding: 5px 10px 5px 10px;
	border-left: 1px solid lightgray;
	border-bottom: 1px solid lightgray;
}

td {
	border-left: 1px solid lightgray;
	border-bottom: 1px solid lightgray;
	min-width: 100px;
	height: 38px;
}

.table th {
	background-color: #eee;
}

.table th, .table td {
	text-align: center;
}

.title th {
	font-size: 15px;
	padding: 10px;
}
.no-border{
	border:none;
}
.only-left-border{
	border-top:none;
	border-bottom:none;
	border-right:none;
}
.only-bottom-border{
	border-top:none;
	border-left:none;
	border-right:none;
}
.only-left-bottom-border{
	border-top:none;
	border-right:none;
}
</style>
<script>
	window.onload = function() {
		setWidth(document.getElementsByTagName('td'))
		setWidth(document.getElementsByTagName('th'))

		table2Excel()
	}

	function setWidth(tds) {
		for (var i = 0; i < tds.length; i++) {
			var td = tds[i]
			var colspan = td.getAttribute('colspan') || 1
			td.setAttribute('width', (100 / 12 * colspan) + '%')
		}
	}

	function table2Excel($table, filename, opts) {
		var sheet = XLSX.utils.table_to_sheet(document.getElementById('ECR'),
				opts);
		var wb = XLSX.utils.book_new();
		XLSX.utils.book_append_sheet(wb, sheet, "ECR");

		/* Export to file (start a download) */
		XLSX.writeFile(wb, (filename || document.title) + '-'
				+ new Date().getTime() + ".xlsx");

		return false
	}
</script>
</head>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content" th:object="${ecrRequest}">
		<div>
			<p>
				Hi <span th:text="${receiver}">Lisa</span>,<br />
			</p>
			<p>
				<span th:text="${subject}"></span>. Click the <a th:href="@{'http://'+${host}+':'+${port}+'/ecr/request'}">Link</a> to see detail.
			</p>
		</div>
		<table id="ECR">
			<tr class="table title">
				<th colspan="12">Engineering Change Request <br /> (ECR) 工程变更申请
				</th>
			</tr>
			<tr>
				<th>ECR NO. <br />ECR 编号
				</th>
				<td colspan="2" th:text="*{ecrNo}">44433</td>
				<th>Request Date<br /> 申请日期
				</th>
				<td colspan="2" th:text="${#dates.format(ecrRequest.requestDate, 'yyyy-MM-dd')}"></td>
				<th>Request Dept. <br />申请部门
				</th>
				<td colspan="2" th:text="*{requestDept}"></td>
				<th>Applicant<br />申请人
				</th>
				<td colspan="2" th:text="*{applicant}"></td>
			</tr> 
			<tr th:each="p : ${ecrProjects}">
				<th>Account <br />客户
				</th>
				<td colspan="2" th:text="${p.keyAccount}"></td>
				<th>Project Name <br />项目名称
				</th>
				<td colspan="2" th:text="${p.projectName}"></td>
				<th>Product Name <br />产品名称
				</th>
				<td colspan="2" th:text="${p.productName}"></td>
				<th>Item Code<br />机型
				</th>
				<td colspan="2" th:text="${p.itemCode}"></td>
			</tr>
			<tr class="table">
				<th colspan="6">Description of Change 变更描述</th>
				<th colspan="6">Change Type 变更类型</th>
			</tr>

			<tr>
				<td colspan="6" th:text="*{changeDescription}" rowspan="5"></td> 
				<td colspan="3"  th:text="*{changeTypeTxt}" class="only-left-border"></td> 
				<td colspan="3" th:text="*{othersChangeType}" class="no-border"></td> 
			</tr>
			<tr>	
				<td colspan="3"  th:text="*{changeTypeTxt}" class="only-left-border"></td> 
				<td colspan="3" th:text="*{othersChangeType}" class="no-border"></td> 
			</tr>
			<tr>	
				<td colspan="3"  th:text="*{changeTypeTxt}" class="only-left-border"></td> 
				<td colspan="3" th:text="*{othersChangeType}" class="no-border"></td> 
			</tr>
			<tr>	
				<td colspan="3"  th:text="*{changeTypeTxt}" class="only-left-border"></td> 
				<td colspan="3" th:text="*{othersChangeType}" class="no-border"></td> 
			</tr>
			<tr>	
				<td colspan="3"  th:text="*{changeTypeTxt}" class="only-left-bottom-border"></td> 
				<td colspan="3" th:text="*{othersChangeType}" class="only-bottom-border"></td>  
			</tr>
			
			<tr> 
				<th colspan="3">Reason of Change <br />变更原因
				</th>
				<td colspan="9" th:text="*{changeReason}"></td>
			</tr>
			<tr>
				<th colspan="3">Customer Requirement <br />客户要求
				</th>
				<td colspan="5" th:text="*{customerRequirement}"></td> 
				<td colspan="2" th:text="*{ecrRequired}"><input type="checkbox"/>No ECR Required <br/>无ECR要求</td> 
				<td colspan="2" th:text="*{ecrRequired}"><input type="checkbox"/>ECR required <br/>客户ECR要求</td>
			</tr>
		</table>

	</div>
</body>
</html>