<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../common/init.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="${ctx}/resources/css/main.css" type="text/css" />
<link rel='stylesheet' href='${ctx}/resources/css/easyui.css' type='text/css' media='screen' />
<link rel='stylesheet' href='${ctx}/resources/css/easyui/icon.css' type='text/css' media='screen' />
<link rel='stylesheet' href='${ctx}/resources/css/user-center-style.css' type='text/css' media='screen' />
<style>
.boderTbl {border-collapse:collapse;border:none;}
.boderTbl th{text-align:center;vertical-align:middle;border:1px solid #000000;padding:0px;}
.boderTbl td{text-align:center;vertical-align:middle;border:1px solid #000000;padding:0px;}

.absPos{
	position:absolute;top:0px;left:0px;
}
.remarkTextarea{
	height: 100%;
	width: 100%;
	resize: none;
	border-width: 0px;
}
.input1{
	border-style:none;
	text-align: center;
	font-size:12px;
	background-color: #FFFFFF;
	width: 25px;
}
.input2{
	border-style:none;
	text-align: center;
	font-size:12px;
	width: 28px;
	height: 28px;
	margin: 0px;
}
.writeBg{
	background-color: #FFFFFF;
}
.grayBg{
	background-color: #E0E9E3;
}
.normalChapter{
	font-weight: normal;
	font-size:12px;
	background-color: #FFFFFF;
	width: 95px;
}
.importantChapter{
	font-weight: bold;
	font-size:14px;
	background-color: #d6edfe;
	width: 95px;
}

.myMargin1{
	margin-right: 10px;
}
.myMargin3{
	margin-right: 30px;
}
.myMargin4{
	margin-left: 3px;
}
.myTd1{
	width: 35px;
	text-align: left;
}

.myTd2{
	text-align: left;
}

.logDiv{
	margin-bottom: 10px;
	border-style: solid;
	border-width: 1px;
	border-color: #000000;
}
</style>
<%@ include file="../common/top2.jsp"%>
<script type="text/javascript" src="${ctx}/resources/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/validator.js"></script>
<%@ include file="../common/validation.jsp"%>
<title>细目表</title>
</head>
<body style="margin-left: 2px;margin-top: 2px;">
<div>
	<table class="searchTable">
			               <tr>
			                   <th>课程：</th>
			                   <td style="padding:0px 5px;">
			                       <input type="hidden" id="courseId" value="${course.id}"/>
			                       ${course.showName}
		                       </td>
		                       <th>教材：</th>
			                   <td style="padding:0px 5px;width: 190px;">
		                           <input type="hidden" id="bookId" value="${book.id}"/>
			                       ${book.name}
		                       </td>
		                  </tr>
		                  <tr>
		                       <th>细目表名称：<input type="hidden" id="nameTmp" value="<c:out value='${name}'/>"/></th>
			                   <td style="padding:0px 5px;" colspan="3">${name}</td>
			               </tr>
	</table>
	<div style="clear:both;"></div>
</div>
<div id="nothingDiv" style="height: 5px;">&nbsp;</div>
<!-- 细目表Table区域Begin -->
<div>
	<TABLE id='skelTbl' class="boderTbl absPos" cellpadding="0" cellspacing="0" border="0" style="visibility: hidden;">
		<TR>
			<th id="headTd" height='100' colspan="2" rowspan="2"></th>
			<c:forEach items="${questionTypes}" var="type">
			<th colspan="4" tdType='quesType' height="66"><div>${type.name}</div><div>(<input textType="quesTypeText" quesTypeId='${type.id}' type="text" class="input1" value="${fn:formatScore(type.defaultScore)}" maxlength="2"/> 分/题)</div></th>
			</c:forEach>
			<th rowspan="2" width="56">小计</th>
			<th rowspan="2" width="50">合计</th>
		</TR>
		<tr>
		<c:forEach items="${questionTypes}" var="type">
			<c:forEach var="x" begin="1" end="4">
				<td height="34">${fn:toUpperLetter(x)}</td>
			</c:forEach>
		</c:forEach>
		</tr>
		<c:forEach var="x" begin="1" end="${book.chapterSize}" step="1">
		<c:forEach var="y" begin="1" end="4">
		<tr>
			<c:if test="${y==1}">
			<td rowspan="4"  class="normalChapter" tdType='chapterNo' onselectstart="return false"><span>第${x}章节</span><span style="visibility: hidden;">*</span></td>
			</c:if>
			<td width="28">${fn:toUpperRoman(y)}</td>
			<c:forEach items="${questionTypes}" var="type" varStatus="u">
			<c:forEach var="z" begin="1" end="4">
				<c:set var="detailKey" value="${x}|${y}|${u.index + 1}|${z}"/>
				<td style="border-color: #DADCDD;
				<c:if test="${z == 1}">border-left-color:#000000;</c:if>
				<c:if test="${z == 4}">border-right-color:#000000;</c:if>
				<c:if test="${y == 1}">border-top-color:#000000;</c:if>
				<c:if test="${y == 4}">border-bottom-color:#000000;</c:if>"><input textType="quesNum" type="text" class="input2 writeBg" value="${skeletonDetailMap[detailKey]}" maxlength="2"/></td>
			</c:forEach>
			</c:forEach>
			<td tdType='subtotal' sumType='chapterToQuesTypeSubtotal'></td>
			<c:if test="${y==1}">
			<td tdType='amount' rowspan="4" sumType='chapterToQuesTypeAmount'></td>
			</c:if>
		</tr>
		</c:forEach>
		</c:forEach>
		<tr>
			<td colspan="2" height="30">小计</td>
			<c:forEach items="${questionTypes}" var="type">
			<c:forEach var="x" begin="1" end="4">
				<td tdType='subtotal' sumType='quesTypeToChapterSubtotal'></td>
			</c:forEach>
			</c:forEach>
			<td tdType='amount' sumType='totalSum' colspan="2" rowspan="2"></td>
		</tr>
		<tr>
			<td colspan="2" height="30">合计</td>
			<c:forEach items="${questionTypes}" var="type">
				<td tdType='amount' colspan="4" sumType='quesTypeToChapterAmount'></td>
			</c:forEach>
		</tr>
		<tr>
			<td colspan="2">试卷结构</td>
			<td colspan="${fn:length(questionTypes) * 4 + 2}">
				<table class="boderTbl" cellpadding="0" cellspacing="0" border="0" width="100%">
					<tr>
						<c:forEach var="x" begin="1" end="4" varStatus="i">
						<td height="24" style="border-top-width: 0px;<c:if test="${i.first}">border-left-width: 0px;</c:if>">${fn:toUpperLetter(x)}</td>
						</c:forEach>
						<c:forEach var="x" begin="1" end="4" varStatus="i">
						<td height="24" style="border-top-width: 0px;<c:if test="${i.last}">border-right-width: 0px;</c:if>">${fn:toUpperRoman(x)}</td>
						</c:forEach>
					</tr>
					<tr>
						<c:forEach var="x" begin="1" end="4" varStatus="i">
						<td tdType='amountDiffi' height="24" width="12.5%" style="border-bottom-width: 0px;<c:if test="${i.first}">border-left-width: 0px;</c:if>">0</td>
						</c:forEach>
						<c:forEach var="x" begin="1" end="4" varStatus="i">
						<td tdType='amountAbility' height="24" width="12.5%" style="border-bottom-width: 0px;<c:if test="${i.last}">border-right-width: 0px;</c:if>">0</td>
						</c:forEach>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td colspan="2">备注</td>
			<td colspan="${fn:length(questionTypes) * 4 + 2}" height="80" style="padding: 5px;">
				<textarea class="remarkTextarea" readonly="readonly"><c:out value="${skel.remark}"/></textarea>
			</td>
		</tr>
	</TABLE>
</div>
<!-- 细目表Table区域End -->
<!-- 细目表填写说明区域Begin -->
<div id="noticeDiv" style="margin-bottom: 10px;">
说明：<span style="margin-right: 40px;">1.预计难度：A.易；  B.中等偏易；  C.中等偏难；  D.难</span><span>2.认知层次：I.识记；  II.理解；  III.简单应用；  IV.综合应用</span>
</div>
<!-- 细目表填写说明区域End -->
</body>
</html>
<script language="javascript">
var perDiffiSize = 4;//预计难度的个数 
var perAbilitySize = 4;//认知层次的个数
var editable = false;
var keyschapter = [];

var chapterSize = ${book.chapterSize};

var curTd;

$(document).ready(function(){
    $('#goBack').click(function(){
    	<c:if test="${skel == null}">
    	window.location.href = '${ctx}/paperSkeleton/add?courseId=${course.id}&bookId=${book.id}&name=' + encodeURIComponent($('#nameTmp').val());
    	</c:if>
    	<c:if test="${skel != null}">
    	window.history.go(-1);
    	</c:if>
    });
	 
    {//初始化细目表的位置
    	var div1 = document.getElementById('nothingDiv');
		var div2 = document.getElementById('noticeDiv');
		var tbl = document.getElementById('skelTbl');
		tbl.style.top = (div1.offsetTop + div1.offsetHeight) + 'px';
		tbl.style.left = div1.offsetLeft + 'px';
		div2.style.marginTop = (tbl.offsetHeight + 10) + 'px';
    }
    {//设置斜分割线
    	lineHeadTd();
    	$("[tdType='subtotal']").each(function(){
    		lineSubtotalTd($(this).get(0));
    	});
    	$("[tdType='amount']").each(function(){
    		lineAmountTd($(this).get(0));
    	});
    	$('#skelTbl').css('visibility','visible');
    }
    {//重新布局
    	layout();
    }
    if(editable){//设置/取消重点章节
    	$("[tdType='chapterNo']").each(function(){
    		$(this).dblclick(function(){
        		var span1 = $(this).find("span").eq(1);
        		if($(this).hasClass("normalChapter")){
        			$(this).removeClass("normalChapter");
        			$(this).addClass("importantChapter");
        			span1.css("visibility","visible");
        		}else{
        			$(this).removeClass("importantChapter");
        			$(this).addClass("normalChapter");
        			span1.css("visibility","hidden");
        		}
            });
    	});
    }
    {//输入题型分值，各统计值级联更新
    	$("[textType='quesTypeText']").each(function(){
    		//background-color: #F3F3F3;
    		var val = $(this).val() - 0;
			if(editable){
	    		$(this).keyup(function(e){
	    			var val = $(this).val() - 0;
	    			if(!val || val <= 0){
	    				val = '';
	    				$(this).css({'background-color': '#FFFF99'});
	    			}else{
	    				$(this).css({'background-color': '#F3F3F3'});
	    			}
	    			$(this).val(val);
	    			calcStat();
	    		});
			}else{
    			$(this).attr("readonly","readonly");
			}
    	});
    }
    {//输入题量，各统计值级联更新
    	$("[textType='quesNum']").each(function(){
    		if(editable){
	    		$(this).keyup(function(e){
	    			var val = $(this).val() - 0;
	    			if(!val || val <= 0){
	    				val = '';
	    			}
	    			$(this).val(val);
	    			calcStat();
	    		});
    		}else{
    			$(this).attr("readonly","readonly");
    		}
    	});
    }

    calcStat();
    var keyChapters = '${skel.keyChapters}';
    if(keyChapters != ''){
	    var keyChapterArr = keyChapters.split(',');
	    for(var i=0;i<keyChapterArr.length;i++){
	    	var tdTmp = $("[tdType='chapterNo']").eq(keyChapterArr[i]-1);
	    	tdTmp.removeClass("normalChapter");
	    	tdTmp.addClass("importantChapter");
	    	tdTmp.find("span").eq(1).css("visibility","visible");
	    }
    }
    
    window.print();
});

function reloadWin(){
	window.location.reload();
}

function calcStat(){
	var chapterToQuesTypeSubtotalForScore = 0;//统计行上面的小计分数
	var chapterToQuesTypeSubtotalForNum = 0;//统计行上面的小计题量
	var chapterToQuesTypeAmountForScore = 0;//统计行上面的合计分数
	var chapterToQuesTypeAmountForNum = 0;//统计行上面的合计题量
	var quesTypeToChapterSubtotalForScores = [];//统计行上面的小计分数
	var quesTypeToChapterSubtotalForNums = [];//统计行上面的小计题量
	var totalSumForScore = 0;//总计分数
	var totalSumForNum = 0;//总计题量
	var diffiScoreArr = [0,0,0,0];//用于统计不同"预计难度"的分值
	var abilityScoreArr = [0,0,0,0];//用于统计不同"认知层次"的分值
	var quesTypeArr = $("[textType='quesTypeText']");
	var quesTypeScoreArr = [];
	quesTypeArr.each(function(index){
		var cellVal = $(this).val();
		cellVal = (cellVal == '')?0:(cellVal - 0);
		quesTypeScoreArr[index] = cellVal;
	});
	var quesTypeSize = quesTypeArr.size();//题型的数量
	var trPerTdSize = quesTypeSize * perDiffiSize;//每行的单元格数量
	for(var i=0;i<trPerTdSize;i++){
		quesTypeToChapterSubtotalForScores[i] = 0;
		quesTypeToChapterSubtotalForNums[i] = 0;
	}
	
	var chapterToQuesTypeSubtotalArr = $("[divType='chapterToQuesTypeSubtotal']");
	var chapterToQuesTypeAmountArr = $("[divType='chapterToQuesTypeAmount']");
	$("[textType='quesNum']").each(function(index){
		var cellVal = $(this).val();
		if(cellVal != ''){
			cellVal = cellVal - 0;
			chapterToQuesTypeSubtotalForNum += cellVal;
			chapterToQuesTypeAmountForNum += cellVal;
			totalSumForNum += cellVal;
			
			var cellScore = cellVal * quesTypeScoreArr[parseInt((parseInt(index % trPerTdSize) / perDiffiSize))];
			chapterToQuesTypeSubtotalForScore += cellScore;
			chapterToQuesTypeAmountForScore += cellScore;
			totalSumForScore += cellScore;
			
			quesTypeToChapterSubtotalForNums[index % trPerTdSize] += cellVal;
			quesTypeToChapterSubtotalForScores[index % trPerTdSize] += cellScore;
			
			diffiScoreArr[index % perDiffiSize] += cellScore;
			abilityScoreArr[parseInt(index / trPerTdSize) % perAbilitySize] += cellScore;
			//alert('quesTypeToChapterSubtotalForScores[' + (index % trPerTdSize) + ']=' + quesTypeToChapterSubtotalForScores[index % trPerTdSize]);
		}
		if(parseInt(index % trPerTdSize) == (trPerTdSize - 1)){
			var rowIndex = parseInt(index / trPerTdSize);
			chapterToQuesTypeSubtotalArr.eq(rowIndex * 2 + 1).text(chapterToQuesTypeSubtotalForNum);
			chapterToQuesTypeSubtotalArr.eq(rowIndex * 2).text(chapterToQuesTypeSubtotalForScore);
			chapterToQuesTypeSubtotalForScore = 0;
			chapterToQuesTypeSubtotalForNum = 0;
		}
		if(parseInt(index % (trPerTdSize * perAbilitySize)) == (trPerTdSize * perAbilitySize - 1)){
			var rowIndex = parseInt(index / (trPerTdSize * perAbilitySize));
			chapterToQuesTypeAmountArr.eq(rowIndex * 2 + 1).text(chapterToQuesTypeAmountForNum);
			chapterToQuesTypeAmountArr.eq(rowIndex * 2).text(chapterToQuesTypeAmountForScore);
			chapterToQuesTypeAmountForScore = 0;
			chapterToQuesTypeAmountForNum = 0;
		}
	});
	var quesTypeToChapterAmountArr = $("[divType='quesTypeToChapterAmount']");
	var amountScore = 0;
	var amountNum = 0;
	$("[divType='quesTypeToChapterSubtotal']").each(function(index){
		if(index % 2 == 0){
			$(this).text(quesTypeToChapterSubtotalForScores[parseInt(index / 2)]);
			amountScore += quesTypeToChapterSubtotalForScores[parseInt(index / 2)];
		}else{
			$(this).text(quesTypeToChapterSubtotalForNums[parseInt(index / 2)]);
			amountNum += quesTypeToChapterSubtotalForNums[parseInt(index / 2)];
		}
		if(index % 8 == 7){
			quesTypeToChapterAmountArr.eq(2*parseInt(index / 8)).text(amountScore);
			quesTypeToChapterAmountArr.eq(2*parseInt(index / 8) + 1).text(amountNum);
			amountScore = 0;
			amountNum = 0;
		}
	});
	$("[tdType='amountDiffi']").each(function(index){
		$(this).text(diffiScoreArr[index]);
	});
	$("[tdType='amountAbility']").each(function(index){
		$(this).text(abilityScoreArr[index]);
	});
	var totalSumArr = $("[divType='totalSum']");
	totalSumArr.eq(1).text(totalSumForNum);
	totalSumArr.eq(0).text(totalSumForScore);
}

function moveTds(quesTypeTdIndex,isLeft){
	var myIndex = quesTypeTdIndex - (isLeft?1:0);
	{//交换“小计”单元格
		var divArr = $("[divType='quesTypeToChapterSubtotal']");
		var needExchangeSize = 2 * perDiffiSize;//每列2个，一个题型对应4列
		for(var i=0;i<needExchangeSize;i++){
			var ecDiv1 = divArr.eq(needExchangeSize * (myIndex - 1) + i);
			var ecDiv2 = divArr.eq(needExchangeSize * myIndex + i);
			var tmp = ecDiv1.html();
			ecDiv1.html(ecDiv2.html());
			ecDiv2.html(tmp);
		}
	}
	{//交换“合计”单元格
		var divArr = $("[divType='quesTypeToChapterAmount']");
		var needExchangeSize = 2 * 1;//每列2个，一个题型对应1列
		for(var i=0;i<needExchangeSize;i++){
			var ecDiv1 = divArr.eq(needExchangeSize * (myIndex - 1) + i);
			var ecDiv2 = divArr.eq(needExchangeSize * myIndex + i);
			var tmp = ecDiv1.html();
			ecDiv1.html(ecDiv2.html());
			ecDiv2.html(tmp);
		}
	}
	{//交换“题量”单元格
		var textArr = $("[textType='quesNum']");
		var quesTypeSize = $("[tdType='quesType']").size();
		var trPerTdSize = quesTypeSize * perDiffiSize;//每行的单元格数量
		var needExchangeSize = perDiffiSize * perAbilitySize * chapterSize;//一个章节有4行
		for(var i=0;i<needExchangeSize;i++){
			var ecText1 = textArr.eq(trPerTdSize * parseInt(i / perDiffiSize) + (myIndex - 1) * perDiffiSize + (i % perDiffiSize));
			var ecText2 = textArr.eq(trPerTdSize * parseInt(i / perDiffiSize) + myIndex * perDiffiSize + (i % perDiffiSize));
			var tmp = ecText1.val();
			ecText1.val(ecText2.val());
			ecText2.val(tmp);
		}
	}
}

function lineHeadTd() {
	var td = document.getElementById('headTd');
	var x1 = td.offsetLeft;
	var y1 = td.offsetTop;
	var x2 = x1 + td.offsetWidth;
	var y2 = y1 + td.offsetHeight;
	var color = '#003399';
	{
		var newX1 = x1 + 70;
		var newY1 = y1;
		var newX2 = x2;
		var newY2 = y2 - 40;
		paintObliqueLine(td,newX1,newY1,newX2,newY2,color);
		paintObliqueText(td,newX1 + 25,newY1 + 5,'题');
		paintObliqueText(td,newX1 + 25 + 13,newY1 + 5 + 13,'型');
	}
	{
		var newX1 = x1 + 30;
		var newY1 = y1;
		var newX2 = x2;
		var newY2 = y2;
		paintObliqueLine(td,newX1,newY1,newX2,newY2,color);
		paintObliqueText(td,newX1 + 25,newY1 + 5,'预');
		paintObliqueText(td,newX1 + 25 + 13,newY1 + 5 + 13,'估');
		paintObliqueText(td,newX1 + 25 + 13*2,newY1  + 5 + 13*2,'难');
		paintObliqueText(td,newX1 + 25 + 13*3,newY1  + 5 + 13*3,'度');
	}
	{
		var newX1 = x1;
		var newY1 = y1 + 30;
		var newX2 = x2;
		var newY2 = y2;
		paintObliqueLine(td,newX1,newY1,newX2,newY2,color);
		paintObliqueText(td,newX1 + 15,newY1 - 17,'数');
		paintObliqueText(td,newX1 + 15 + 15,newY1 - 17 + 10,'量');
	}
	{
		var newX1 = x1;
		var newY1 = y1 + 60;
		var newX2 = x2 - 40;
		var newY2 = y2;
		paintObliqueLine(td,newX1,newY1,newX2,newY2,color);
		paintObliqueText(td,newX1 + 15,newY1 - 15,'认');
		paintObliqueText(td,newX1 + 15 + 15,newY1 - 15 + 9,'知');
		paintObliqueText(td,newX1 + 15 + 15*2,newY1 - 15 + 9*2,'层');
		paintObliqueText(td,newX1 + 15 + 15*3,newY1 - 15 + 9*3,'次');
	}
	paintObliqueText(td,x1 + 5,y2 - 17,'考核内容');
}

function lineSubtotalTd(td){
	var jTd = $(td);
	var sumType = jTd.attr('sumType');
	var x1 = td.offsetLeft;
	var y1 = td.offsetTop;
	var x2 = x1 + td.offsetWidth;
	var y2 = y1 + td.offsetHeight;
	var color = '#000000';
	{
		var newX1 = x1;
		var newY1 = y1;
		var newX2 = x2;
		var newY2 = y2;
		paintObliqueLine(td,newX1,newY1,newX2,newY2,color,true);
		paintObliqueText(td,newX1 + 3,newY1 + 3,0,sumType);
	}
	paintObliqueText(td,x2 - 18,y2 - 15,0,sumType);
}

function lineAmountTd(td){
	var jTd = $(td);
	var sumType = jTd.attr('sumType');
	var x1 = td.offsetLeft;
	var y1 = td.offsetTop;
	var x2 = x1 + td.offsetWidth;
	var y2 = y1 + td.offsetHeight;
	var color = '#000000';
	{
		var newX1 = x1;
		var newY1 = y1;
		var newX2 = x2;
		var newY2 = y2;
		paintObliqueLine(td,newX1,newY1,newX2,newY2,color,true);
		paintObliqueText(td,newX1 + 8,newY1 + 8,0,sumType);
	}
	paintObliqueText(td,x2 - 22,y2 - 22,0,sumType);
}

function paintObliqueLine(td, x1, y1, x2, y2, color,fromRight) {
	for (var i = x1 + 1; i < x2; i++) {
		var x = i;
		var y = fromRight?(y2 - (y2 - 1.0*y1) / (x2 - x1) * (x - x1)):((y2 - 1.0*y1) / (x2 - x1) * (x - x1) + y1);
		y = parseInt(y);
		var oDiv=document.createElement("div");
		oDiv.innerHTML = "<div style='position: absolute; left: "
			+ x + "px; top: " + y + "px;background-color: "
			+ color + ";width:1px;height:1px;padding:0px;margin:0px;'><img src='${ctx}/resources/images/px.png'/></div>";
		td.appendChild(oDiv);
	}
}

function paintObliqueText(td, x,y,text,divType){
	var oDiv=document.createElement("div");
	oDiv.innerHTML = '<div' + (divType?(' divType="' + divType + '"'):'') + ' style="position: absolute; left: ' + x + 'px; top: ' + y + 'px;background: transparent; font-size:9pt;">' + text + '</div>';
	td.appendChild(oDiv);
}

</script>