<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/taglib/c.tld" prefix="c"%>
<%@ include file="../../common/init.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="../../common/top.jsp"%>
</head>
<body class="easyui-layout">
	<%@ include file="../../common/header.jsp"%>
	<%@ include file="../../leftMenu/exam-admin.jsp"%>
	<div data-options="region:'center',title:'首页 - 【考试管理】- 客观题设置'">
		<div class="easyui-layout" data-options="fit:true,border:false">
			<div data-options="region:'north',border:false" class="domain">
				<%@ include file="../../common/message.jsp"%>
				<div id="block-search-div">
					<form class="form-inline" action="${ctx}/admin/exam-param/objective" method="post" id="search-form">
						<%@ include file="../../common/subjectClassTypeSelect.jsp"%>
						<span class="help-inline">AB卷：</span> 
						<select name="paperTypeValue" class="span2">
							<c:forEach var="paperType" items="${paperTypeList}">
								<option value="${paperType.value}"
									<c:if test="${paperTypeValue!=null && paperTypeValue==paperType.value}">selected</c:if>>${paperType.name}</option>
							</c:forEach>
						</select>
						<button type="submit" class="btn">
							<i class="icon-search"></i> 查询
						</button>
					</form>
				</div>
			</div>
			
			<div class="border" data-options="region:'center'">
				<div class="Marking-cont row-fluid">
					<c:if test="${subjectId!=null && classTypeValue!=null && paperTypeValue!=null}">
					<div class="span4 Marking-cont-middle">
						<div class="Marking-cont-middle-title">大题列表</div>
						<div class="Marking-cont-middle-tab">
							<%--<c:if test="${!isMarking}">--%>
							<a id="add-button" class="btn btn-primary btn-mr">添加大题</a>
							<%--</c:if>--%>
							<%--<c:if test="${isFinish==false}">--%>
							<a id="save-button" class="btn btn-success btn-mr">保存</a>
							<%--</c:if>--%>
							<%--<c:if test="${isMarking==false}">--%>
							<a id="clear-button" class="btn btn-danger">清空</a>
							<%--</c:if>--%>
							<form id="submit-form" action="${ctx}/admin/exam-param/objective/update" method="post">
								<input type="hidden" name="subjectId" value="${subjectId}" />
								<input type="hidden" name="classTypeValue" value="${classTypeValue}" /> 
								<input type="hidden" name="paperTypeValue" value="${paperTypeValue}" />  
								<input type="hidden" name="value" value="" />
							</form>
							<div id="block-div-list">
								<c:forEach items="${oList}" var="block" varStatus="status">
									<div class="block-div" data-block-id="${status.count}">
										<p class="list-num">${block.number}</p>
										<a href="javascript:void(0)" class="list-text">${block.title}</a> 
										<%--<c:if test="${isMarking==false}">--%>
										<a href="javascript:void(0)" class="list-lion delete-button" title="删除"> 
											<i class="icon-cancel"></i> 
										</a>
										<%--</c:if>--%>
									</div>
								</c:forEach>
							</div>
						</div>
					</div>
					
					<div class="span8 Marking-cont-right hide" id="info-div" data-block-id="">
						<div class="Marking-cont-right-title"></div>
						<div class="Marking-cont-right-content">
							<form class="form-horizontal mr-t3">
								<c:if test="${subject!=null && subject.type.value==1}">
								<div class="control-group">
									<label class="control-label" for="">小科目</label>
									<div class="controls">
										<select name="baseSubjectId" <c:if test="${isFinish==true}">disabled</c:if>>
										<c:forEach var="baseSubject" items="${baseSubjectList}">
											<option value="${baseSubject.id}">${baseSubject.name}</option>
										</c:forEach>
										</select>
									</div>
								</div>
								</c:if>
								<div class="control-group">
									<label class="control-label" for="">标题</label>
									<div class="controls">
										<input type="text" name="title" class="info-input" <c:if test="${isFinish==true}">disabled</c:if>/> 
										<span class="help-inline"></span>
									</div>
								</div>
								<div class="control-group">
									<label class="control-label" for="">小题满分(*)</label>
									<div class="controls">
										<input type="text" name="questionScore" data-min="0"
											class="info-input required-input number-input" <c:if test="${isFinish==true}">disabled</c:if>/> 
										<span class="help-inline"></span>
									</div>
								</div>
								<div class="control-group">
									<label class="control-label" for="">漏选得分(*)</label>
									<div class="controls">
										<input type="text" name="missScore" data-min="0"
											class="info-input required-input number-input" value="0" <c:if test="${isFinish==true}">disabled</c:if>/> 
										<span class="help-inline"></span>
									</div>
								</div>
								<div class="control-group">
									<label class="control-label" for="">小题个数(*)</label>
									<div class="controls">
										<input type="text" name="questionCount" data-min="1"
											class="info-input required-input number-input" <c:if test="${isFinish==true}">disabled</c:if>/> 
										<span class="help-inline"></span>
									</div>
								</div>
								<div class="control-group">
									<label class="control-label" for="">选项个数(*)</label>
									<div class="controls">
										<input type="text" name="optionCount" data-min="1"
											class="info-input required-input number-input" <c:if test="${isFinish==true}">disabled</c:if>/> 
										<span class="help-inline"></span>
									</div>
								</div>
								<div class="control-group">
									<label class="control-label" for="">是否单项选择题(*)</label>
									<div class="controls">
										<label class="radio inline"> 
										<input type="radio" name="isSingle" value="1" checked <c:if test="${isFinish==true}">disabled</c:if>/>
										是 </label> 
										<label class="radio inline"> 
										<input type="radio" name="isSingle" value="0" <c:if test="${isFinish==true}">disabled</c:if>/> 
										否 </label>
									</div>
								</div>
								<div class="control-group">
									<label class="control-label" for="">是否选做题组(*)</label>
									<div class="controls">
										<label class="radio inline"> 
										<input type="radio" name="isSelective" value="1" <c:if test="${isFinish==true}">disabled</c:if>/>
										是 </label> 
										<label class="radio inline"> 
										<input type="radio" name="isSelective" value="0" checked <c:if test="${isFinish==true}">disabled</c:if>/> 
										否 </label>
									</div>
								</div>
								<div class="control-group" style="display: none" id="select-count-div">
									<label class="control-label" for="">必选个数(*)</label>
									<div class="controls">
										<input type="text" name="selectCount" data-min="1" class="info-input" <c:if test="${isFinish==true}">disabled</c:if>/> 
										<span class="help-inline"></span>
									</div>
								</div>
								<div class="board-text">
									<a class="board-text-color" href="javascript:void(0)" id="answer-link">设置答案</a>
								</div>
							</form>
						</div>
					</div>

					<div class="span8 Marking-cont-right hide" id="answer-div">
						<div class="Marking-cont-right-title"></div>
						<div class="Marking-cont-right-content">
							<c:if test="${!flag}"><p class="btn-mr">
								<input id="return-button" type="button" class="btn btn-primary" value="保存并返回" />
							</p></c:if>
							<div class="biaoge-header">
								<ul>
									<li><p>题号</p>
										<em>答案</em>
									</li>
									<li><p>题号</p>
										<em>答案</em>
									</li>
								</ul>
							</div>
							<div class="biaoge-content">
								<ul>
								</ul>
							</div>
						</div>
					</div>
					</c:if>
				</div>
			</div>
			
		</div>
	</div>
</body>
<script type="text/javascript">
var maxId = 0;
var blockArray = new Array();

$(document).ready(function() {
	<c:forEach items="${oList}" var="block" varStatus="status">
	var block ={
		id: ${status.count},
		number: ${block.number},
		title: '${block.title}',
		baseSubjectId: '${block.baseSubjectId}',
		questionScore: ${block.questionScore},
		missScore: ${block.missScore},
		questionCount: ${block.questionCount},
		optionCount: ${block.optionCount},
		isSingle: false,
		isSelective: false,
		selectCount: ${block.selectCount},
		questionList: [],
		blockDiv: $(".block-div[data-block-id="+${status.count}+"]")
	}
	//block.blockDiv.find('a.list-text').html('总分:'+block.totalScore+', 小题个数:'+block.questionCount);
	<c:if test="${block.single==true }">
	block.isSingle = true;
	</c:if>
	<c:if test="${block.selective==true }">
	block.isSelective = true;
	</c:if>
	<c:forEach items="${block.questionList}" var="question">
	block.questionList.push('${question.answer}');
	</c:forEach>
	blockArray[block.id]=block;
	maxId = block.id;
	</c:forEach>
	
	$('#add-button').click(addBlock);
	$('.delete-button').live('click', function(){
		var id = $(this).parent().attr('data-block-id');
		deleteBlock(blockArray[id]);
	});
	$('#answer-link').click(function(){
		if(validAllInfo()){
			$('#info-div').hide();
			initAnswerDiv();
		}
	});
	$('#return-button').click(validAnswer);
	$('#save-button').click(submit);
	$('.block-div a.list-text').live('click', function(){
		selectBlock(blockArray[$(this).parent().attr('data-block-id')]);
	});
	<%--<c:if test="${isFinish==false && isMarking==false}">--%>
	$("input[name='isSelective']").change(function(){
		changeSelective($(this).val()==1);
	});
	$('.info-input').keyup(function(){
		validBlockInput($(this));
	});
	$('#info-div select[name="baseSubjectId"]').change(function(){
		currentBlock().baseSubjectId=$(this).val();
	});
	<%--</c:if>--%>
	$('#clear-button').click(function(){
		if(confirm("确定要删除所有客观题吗？")){
			$('#submit-form').attr('action', '${ctx}/admin/exam-param/objective/clear');
			$('#submit-form').submit();
		}
	});
});

function addBlock(){
	maxId = maxId + 1;
	var block = {
		id: maxId,
		number: '',
		title: '',
		baseSubjectId:0,
		questionScore:'',
		missScore:0,
		questionCount:'',
		optionCount: '',
		isSingle: true,
		isSelective: false,
		selectCount: '',
		questionList: []
	}
	var element = '<div class="block-div" data-block-id="'+block.id+'">';
	element = element + '<p class="list-num"></p>';
	element = element + '<a href="javascript:void(0)" class="list-text">请点击设置参数</a>';
	element = element + '<a href="javascript:void(0)" class="list-lion delete-button" title="点击删除"><i class="icon-cancel"></i></a></div>';
	$('#block-div-list').append(element);
	block.blockDiv = $(".block-div[data-block-id="+block.id+"]");
	blockArray[block.id]=block;
	resetBlockNumber();
	selectBlock(block);
}

function deleteBlock(block){
	$('#block-div-list .block-div[data-block-id='+block.id+']').remove();
	$('#info-div').attr('data-block-id', '0');
	$('#info-div').hide();
	blockArray[block.id]='';
	resetBlockNumber();
}

function selectBlock(block){
	if(block==undefined){
		return;
	}
	block.blockDiv.addClass('currt');
	$('#block-div-list .block-div[data-block-id!='+block.id+']').removeClass('currt');
	for(var p in block){
		if(typeof(block[p])!="function"){ 
			$('.info-input[name='+p+']').val(block[p]);
        } 
	}
	$('#info-div select[name="baseSubjectId"]').val(block.baseSubjectId);
	$('#info-div').attr('data-block-id', block.id);
	$('#info-div div.Marking-cont-right-title').html('#'+block.number+'-详细参数设置');
	$('#info-div').show();
	$('#answer-div').hide();
	changeSelective(block.isSelective);
	changeSingle(block.isSingle);
}

function resetBlockNumber(){
	$('#block-div-list .block-div').each(function(index, block){
		var block = blockArray[$(this).attr('data-block-id')];
		block.number = parseInt(index+1);
		block.blockDiv.children('p.list-num').html(block.number);
	});
}

function validAllInfo(){
	var block = currentBlock();
	if(block==undefined){
		return false;
	}
	var flag = true;
	$('.info-input').each(function(index, obj){
		flag = validBlockInput($(obj)) && flag;
		return true;
	});
	block.baseSubjectId=$('#info-div select[name="baseSubjectId"]').val();
	return flag;
}

function validBlockInput(inputObj){
	var block = currentBlock();
	var flag = validInfoInput(inputObj, block);
	if(flag){
		block.blockDiv.find('a.list-text').html(block.title);
	}
	return flag;
}

function changeSingle(flag){
	if(flag){
		$("input[name='isSingle'][value=1]").attr("checked", true);  
	}else{
		$("input[name='isSingle'][value=0]").attr("checked", true);  
	}
	blockArray[$('#info-div').attr('data-block-id')].isSingle=flag;
}

function changeSelective(flag){
	if(flag){
		$("input[name='isSelective'][value=1]").attr("checked", true);  
		$('#select-count-div').show();
		$('.info-input[name="selectCount"]').addClass('required-input');
		$('.info-input[name="selectCount"]').addClass('number-input');
	}else{
		$("input[name='isSelective'][value=0]").attr("checked", true);  
		$('#select-count-div').hide();
		$('.info-input[name="selectCount"]').removeClass('required-input');
		$('.info-input[name="selectCount"]').removeClass('number-input');
	}
	blockArray[$('#info-div').attr('data-block-id')].isSelective=flag;
}

function initAnswerDiv(){
	var block = currentBlock();
	$('#answer-div div.biaoge-content li').remove();
	for(var i=1;i<=block.questionCount;i++){
		var answer='';
		if(block.questionList.length>=i){
			answer=block.questionList[i-1];
		}else{
			block.questionList[i-1]='';
		}
		<%--<c:if test="${isFinish==true}">
		$('#answer-div div.biaoge-content ul').append('<li><p>'+i+'</p><em><input class="input-small" type="text" value="'+answer+'" disabled></em></li>');
		</c:if>--%>
		<%--<c:if test="${isFinish==false}">--%>
		$('#answer-div div.biaoge-content ul').append('<li><p>'+i+'</p><em><input class="input-small" type="text" value="'+answer+'"></em></li>');
		<%--</c:if>--%>
	}
	$('#answer-div div.Marking-cont-right-title').html('#'+block.number+'-小题答案设置');
	$('#answer-div').show();
}

function validAnswer(){
	var block = currentBlock();
	var errors = new Array();
	var answers = new Array();
	$('#answer-div div.biaoge-content li').each(function(){
		var number = $(this).find('p').html()
		var answer = $(this).find(':input').val();
		if(answer.length==0){
			errors.push(number);
		}else{
			var flag = true;
			answer = answer.toUpperCase();
			for(var i=0;i<answer.length;i++){
				if((answer.charCodeAt(i)-"A".charCodeAt(0))>=block.optionCount){
					flag = false;
				}
			}
			if(flag){
				answers.push(answer);
			}else{
				errors.push(number);
			}
		}
	});
	if(errors.length>0){
		alert('第'+errors.join(',')+'小题答案设置有误');
	}else{
		block.questionList=[];
		$.merge(block.questionList, answers);
		$('#answer-div').hide();
		$('#info-div').show();
	}
}

function currentBlock(){
	return blockArray[$('#info-div').attr('data-block-id')];
}

function submit(){
	var submitArray = new Array();
	var flag = true;
	$('.block-div').each(function(){
		var block = blockArray[$(this).attr('data-block-id')];
		if(validBlock(block)){
			submitArray.push({
				title: block.title,
				number: block.number,
				baseSubjectId: block.baseSubjectId,
				questionScore: block.questionScore,
				missScore: block.missScore,
				questionCount: block.questionCount,
				optionCount: block.optionCount,
				single: block.isSingle,
				selective: block.isSelective,
				selectCount: block.selectCount,
				answerArray: block.questionList
			});
		}else{
			flag=false;
			return false;
		}
	});
	if(flag){
		if(submitArray.length==0){
			alert('大题数量为0');
			return;
		}else{
			$('#submit-form :input[name=value]').val(JSON.stringify(submitArray));
			$('#submit-form').submit();
		}
	}
}

function validBlock(block){
	if(block.questionScore>0 && block.missScore<block.questionScore && block.questionCount>0 && block.optionCount>0 && block.questionCount==block.questionList.length){
		if((block.isSelective && block.selectCount>0) || !block.isSelective){
			var flag = true;
			for(var i=0;i<block.questionCount;i++){
				var answer = block.questionList[i];
				for(var j=0;j<answer.length;j++){
					if((answer.charCodeAt(j)-"A".charCodeAt(0))>=block.optionCount){
						flag = false;
					}
				}
				if(!flag){
					alert('第'+block.id+'大题答案设置有误！');
					return false;
				}
			}
			if(!flag){
				alert('第'+block.id+'大题答案设置有误！');
				return false;
			}else{
				return true;
			}
		}
	}
	alert('第'+block.id+'大题参数设置有误！');
	return false;
}
</script>
</html>