<%@ 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"%>
<link rel="stylesheet" type="text/css" href="${ctx}/static/style/exam.css">
<link rel="stylesheet" type="text/css"
	href="${ctx}/static/themes/bootstrap/bootstrapSwitch.css">
<script type="text/javascript" src="${ctx}/static/js/bootstrapSwitch.js"></script>
<script type="text/javascript" src="${ctx}/static/js/bootstrap-alert.js"></script>
</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">
				<c:if test="${message != null}">
					<div class="curr-info alert alert-error">
						<a class="close" data-dismiss="alert">×</a>${message}
					</div>
				</c:if>
			</div>
			<div class="border" data-options="region:'center'">
				<div class="detail-cont row-fluid">
					<div class="span2 detail-cont-left">
						<div class="detail-cont-left-title">待选科目</div>
						<div class="detail-cont-left-subnav">
							<span class="all-btn"> 
								<a href="javascript:void(0);" class="select-all-button">
									<i class="icon-check"></i>选择全部
								</a> 
							</span>
							<ul id="subjectList">
								<c:forEach items="${examSubjectList}" var="subject">
									<li class="subject-select-li" data-subject-id="${subject.id}" title="${subject.name}"
										<c:if test="${subject.isSelected}">style="display:none"</c:if>>${subject.name}</li>
								</c:forEach>
							</ul>
						</div>
					</div>
					<div class="span10 detail-cont-right">
						<div class="detail-cont-right-title">已选科目</div>
						<div class="detail-cont-right-content">
							<div class="delete-btn">
								<a href="javascript:void(0);" class="unselect-all-button"><i class="icon-trash"></i>全部删除</a>
							</div>
							<div class="right-content-tab" id="subjectItem">
								<table class="table table-striped table-bordered table-hover">
									<c:forEach items="${examSubjectList}" var="subject">
										<tr data-subject-id="${subject.id}" data-selected="${subject.isSelected}"
											class="<c:if test="${!subject.isSelected}">hide</c:if>">
											<td>${subject.name}</td>
											<td>
												<c:if test="${subject.canEdit==true}">
												<form class="form-inline">
													<label class="checkbox"> 
														<input type="checkbox" class="class-type-check" name="class-type-1" value="1" <c:if test="${subject.hasClassTypeArt}">checked</c:if> />文科
													</label> 
													<label class="checkbox"> 
														<input type="checkbox" class="class-type-check" name="class-type-2" value="2" <c:if test="${subject.hasClassTypeScience}">checked</c:if> />理科 
													</label> 
													<label class="checkbox"> 
														<input type="checkbox" class="class-type-check" name="class-type-0" value="0" <c:if test="${!subject.hasClassType}">checked</c:if> />不分文理科
													</label>
												</form>
												</c:if>
												<c:if test="${subject.canEdit==false}">
													<c:if test="${subject.hasClassTypeArt}">文科 </c:if>
													<c:if test="${subject.hasClassTypeScience}">理科 </c:if>
													<c:if test="${!subject.hasClassType}">不分文理科 </c:if>
												</c:if>
											</td>
											<td>
												<c:if test="${subject.canEdit==true}">
												<span class="switch-text">是否使用AB卷？</span>
												<div class="switch switch-small fl">
													<input type="checkbox" class="paper-type-check" <c:if test="${subject.hasPaperType}">checked</c:if> />
												</div>
												</c:if>
												<c:if test="${subject.canEdit==false}">
													<c:if test="${subject.hasPaperType}">使用AB卷</c:if>
													<c:if test="${subject.hasPaperType}">不使用AB卷</c:if>
												</c:if>
											</td>
											<td>
												<input class="btn btn-danger unselect-button" type="button" data-subject-id="${subject.id}" value="删除" />
											</td>
										</tr>
									</c:forEach>
								</table>
							</div>
							<div class="control-group">
								<div class="controls">
									<input class="btn btn-primary save-button" type="button" value="保存" />
								</div>
							</div>
							<form id="submit-form" action="${ctx}/admin/exam-param/subject/update" method="post">
								<input type="hidden" id="submitValue" name="submitValue" value="" /> 
								<input type="hidden" id="examId" name="examId" value="${examId}" />
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
var subjectArray = new Array();
var idArray = new Array();

$(document).ready(function() {
	$('.subject-select-li').each(function(index, obj){
		var subject = {
			id: $(this).attr('data-subject-id'),
			name: $(this).html(),
			selected: false,
			source: $(this),
			dest: ''
		};
		subject.dest = $('table.subject-block[data-subject-id='+subject.id+']');
		subject.selected = subject.dest.attr('data-selected')=="true";
		subjectArray[subject.id] = subject;
		idArray.push(subject.id);
	});
	$('.subject-select-li').click(function(){
		selectSubject(subjectArray[$(this).attr('data-subject-id')]);
	})
	$('.select-all-button').click(function(){
		$.each(idArray, function(index, id){
			selectSubject(subjectArray[id]);
		});
	});
	$('.unselect-button').click(function(){
		unSelectSubject(subjectArray[$(this).attr('data-subject-id')]);
	});
	$('.unselect-all-button').click(function(){
		$.each(idArray, function(index, id){
			unSelectSubject(subjectArray[id]);
		});
	});
	$('.class-type-check').click(function(){
		var classType = $(this).val();
		if(classType==0){
			$(this).parent().parent().children().children('.class-type-check[name="class-type-1"]').removeAttr("checked");
			$(this).parent().parent().children().children('.class-type-check[name="class-type-2"]').removeAttr("checked");
		}
		if(classType>0){
			$(this).parent().parent().children().children('.class-type-check[name="class-type-0"]').removeAttr("checked");
		}
	});
	$('.save-button').click(submit);
});

function selectSubject(subject){
	if(subject==undefined || subject.selected){
		return;
	}
	subject.source.hide();
	subject.dest.show();
	subject.selected=true;
}

function unSelectSubject(subject){
	if(subject==undefined || !subject.selected){
		return;
	}
	subject.source.show();
	subject.dest.hide();
	subject.selected=false;
	clearSubjectBlock(subject.dest);
}

function clearSubjectBlock(block){
	block.find('.class-type-check').each(function(){
		$(this).removeAttr("checked");
	})
}

function submit(){
	var submitArray = new Array();
	var flag = true;
	$.each(idArray, function(index, id){
		var subject = subjectArray[id];
		if(subject!=undefined && subject.selected){
			if(valid(subject)){
				var item = {
					id: subject.id,
					hasPaperType: subject.dest.find('.paper-type-check').bootstrapSwitch('status'),
					classTypeValues: []
				}
				subject.dest.find('.class-type-check:checked').each(function(){
					item.classTypeValues.push($(this).val());
				});
				submitArray.push(item);
			}else{
				flag = false;
				return false;
			}
		}
	});
	if(flag){
		if(submitArray.length==0){
			alert("请选择科目！");
			return;
		}
		$('#submitValue').val(JSON.stringify(submitArray));
		$('#submit-form').submit();
	}
}

function valid(subject){
	if(subject.dest.find('.class-type-check:checked').length==0){
		alert("【"+subject.name+"】文理科设置未选择！");
		return false;
	}
	return true;
}
</script>
</html>