<%@page import="com.qmth.qrzk.repository.utils.Consts"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../../common/init.jsp"%>
<c:set var="defaultBookInCourseStatus" value="<%=Consts.BookInCourseStatus.USED%>" scope="request"/>
<!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/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>
.myTitleTd{
	font-size: 12px;
	font-weight: normal;
	width: 100px;
	height:25px;
	text-align: right;
}

.bookSelTable{
	font-size: 12px;
	font-weight: normal;
}

.myValueTd{
	font-size: 12px;
	font-weight: normal;
	text-align: left;
}

.myValueTd input[type=text]{
	width: 200px;
}

.myValueTd textarea{
	width: 200px;
	height: 50px;
}

.myValueTd select{
	width: 200px;
}

.myValueTd label{
	color: red;
}

.formErrorContent{
	display: none;
}
</style>
<%@ include file="../../common/top.jsp"%>
<script type="text/javascript" src="${ctx}/resources/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/jquery.mask.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/validator.js"></script>
<%@ include file="../../common/validation.jsp"%>
<title>课程管理</title>

<script language="javascript">
var inCourseStatusMap = ${inCourseStatusMap};
function inCourseStatusFormatter(value, rowData, rowIndex) {
    for (var i = 0; i < inCourseStatusMap.length; i++) {
        if (inCourseStatusMap[i].key == value) {
            return inCourseStatusMap[i].text;
        }
    }
}

$(document).ready(function(){
    $('#search-form').submit(function(event){
        event.preventDefault(); 
        var param = $('#search-form').serializeJson();
        param = $.extend(param, {page:1,rows:10});
        $('#dg').datagrid('load',param);
    });

    $("#dg").datagrid({
        onDblClickRow: function (rowIndex, rowData) {
            openCourseWin(rowData,"编辑课程信息");
        }
    });
    
    $("#addBtn").click(function(){
    	openCourseWin({},"添加课程信息");
    	return false;
    });
    
    $("#cancleEditBtn").click(function(){
    	$('#editCourseDiv').window('close');
    	return false;
    });
    
    $("#saveEditBtn").click(function(){
    	saveCourseEdit();
    	return false;
    });
    
    $("#formForEdit").validationEngine();
    
    $("#remarkForEdit").keydown(function(){
    	calculate_byte(200,'remarkForEdit','count');
    });
    $("#remarkForEdit").keyup(function(){
    	calculate_byte(200,'remarkForEdit','count');
    });
    $("#remarkForEdit").keypress(function(){
    	calculate_byte(200,'remarkForEdit','count');
    });
    
    $("#editBtn").click(function(){
    	var rowData = $("#dg").datagrid('getSelected');
    	if(rowData != null){
    		openCourseWin(rowData,"编辑课程信息");
    	}
    });
    
    $("#linkBooksBtn").click(function(){
    	var rowData = $("#dg").datagrid('getSelected');
    	if(rowData != null){
    		openLinkBooksWin(rowData.id);
    	}
    });
    
    $("#cancleLinkBooksBtn").click(function(){
    	$('#linkBooksDiv').window('close');
    	return false;
    });
    
    $("#saveLinkBooksBtn").click(function(){
    	saveLinkBooks();
    	return false;
    });
    
    $('#searchBookBtn').click(function(){
        var param = {'keyword':$('#keywordForSearchBook').val()};
        param = $.extend(param, {page:1,rows:10});
        $('#allBooksDg').datagrid('load',param);
        return false;
    });
    
    $("#addBooksBtn").click(function(){
    	var rows1 = $("#allBooksDg").datagrid('getSelections');
    	for(var i=0;i<rows1.length;i++){
    		var index = -1;
    		var existed = ((index = $("#chosenBooksDg").datagrid('getRowIndex',rows1[i])) >= 0);
    		if(!existed){
        		rows1[i].inCourseStatus = ${defaultBookInCourseStatus};
        		index = $('#chosenBooksDg').datagrid('insertRow',{row:rows1[i]}).datagrid('getRows').length-1;
        		$('#chosenBooksDg').datagrid('beginEdit', index);
    		}
    		$('#chosenBooksDg').datagrid('selectRow', index);
    	}
    	$("#allBooksDg").datagrid('unselectAll');
    });
    
    $("#delBooksBtn").click(function(){
    	var selectedRow = null;
    	while((selectedRow = $("#chosenBooksDg").datagrid('getSelected')) != null){
    		var selectedIndex = $("#chosenBooksDg").datagrid('getRowIndex',selectedRow);
    		$("#chosenBooksDg").datagrid('deleteRow',selectedIndex);
    	}
    });
});

function openCourseWin(course,title){
	$("#idForEdit").val(course.id);
	$("#codeForEdit").val(course.code);
	$("#codeHubeiForEdit").val(course.codeHubei);
	$("#nameForEdit").val(course.name);
	$("#typeForEdit").val(course.type);
	$("#statusForEdit").val(course.status);
	$("#scoreForEdit").val(course.score);
	$("#remarkForEdit").val(course.remark);
	calculate_byte(200,'remarkForEdit','count');
	$("#codeForEdit").focus();
	$('#editCourseDiv').window({"title":title});
	$('#editCourseDiv').window('open');
}

function openLinkBooksWin(courseId){
	$("#courseIdForlinkBooks").val(courseId);
	$('#chosenBooksDg').datagrid({
	    url:"${ctx}/course/selectedBooks/" + courseId,
	    onLoadSuccess:function(data){
	    	for(var i=0;i<data.total;i++){
	    		$('#chosenBooksDg').datagrid('beginEdit', i);
	    	}
	    }
	});
	$('#linkBooksDiv').window('open');
}

function saveCourseEdit(){
	$(document).mask('正在保存中，请稍等...');
	if($("#formForEdit").validationEngine('validate')){
		$.ajax({
			type : "POST",
			url : "${ctx}/course/save",
			data : $('#formForEdit').serialize(), 
			success : function(callback) {
				$(document).unmask();
				if(callback.flag == 'success'){
					$.messager.alert('提示', callback.msg, 'info', function () {
						$('#editCourseDiv').window('close');
						$('#dg').datagrid('reload');
                    });
				}else{
					$.messager.alert('提示', "更新失败，请刷新后操作!", 'error');
				}
			}
		});
	}
}

function saveLinkBooks(){
	$(document).mask('正在保存中，请稍等...');
	var rows = $('#chosenBooksDg').datagrid('getRows');
	var arr = [];
	for(var i=0;i<rows.length;i++){
		var status = $('#chosenBooksDg').datagrid('getEditor',{index:i,field:'inCourseStatus'}).target.combobox('getValue');
		arr[arr.length] = rows[i].id + "@" + status;
	}
	var param = {'courseId':$('#courseIdForlinkBooks').val(),'links':arr};
	$.ajax({
		type : "POST",
		url : "${ctx}/course/saveLinkBooks",
		data : param,
		success : function(callback) {
			$(document).unmask();
			if(callback.flag == 'success'){
				$.messager.alert('提示', callback.msg, 'info', function () {
					$('#linkBooksDiv').window('close');
                });
			}else{
				$.messager.alert('提示', "更新失败，请刷新后操作!", 'error');
			}
		}
	});
}
</script>
</head>
<body>
    <%@ include file="../../common/header.jsp"%>
    <div id="content" class="content">
        <%@ include file="../../common/sub_menu.jsp"%>
        <div class="page" id="page" >
        <div class="page-header" >课程管理</div>
        <div class="page-body">
        
	        <div>
	            <form id="search-form" method="post" >
		            <select name="type">
		                <option value="">课程类型</option>
		                <c:forEach items="${courseTypeDic}" var="m">
            			<option value="${m.key }">${m.value }</option>
            			</c:forEach>
		            </select>
		            &nbsp;&nbsp;<input name="keyword" placeholder="课程名称或编号"/>
		            <button id="searchBtn">查询</button>
		            <button id="addBtn" style="margin-left: 20px;">添加</button>
	            </form>
				</div>
	        
	        <div class="right" style="min-height:300px;position: relative;">
	             <div id="list-wrap posts" class="listview">
	                 <table id="dg" class="easyui-datagrid"
	                     data-options="url:'${ctx}/course/queryCourses',fitColumns:true,singleSelect:true,striped:true,pagination:true,toolbar: '#tb'">
	                     <thead>
	                         <tr class="title">
	                             <th data-options="field:'code',width:80">国编</th>
	                             <th data-options="field:'codeHubei',width:100">省编码</th>
	                             <th data-options="field:'name',width:150">课程名称</th>
	                             <th data-options="field:'typeName',width:80">课程类型</th>
	                             <th data-options="field:'statusName',width:80">状态</th>
	                             <th data-options="field:'score',width:80">学分</th>
	                             <th data-options="field:'remark',width:80">备注</th>
	                         </tr>
	                     </thead>
	                   </table>
	                   <div id="tb" style="height:auto">
					        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" id="editBtn">编辑</a>
					        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-import-plan',plain:true" id="linkBooksBtn">教材</a>
					    </div>
	               </div>
	            </div>
	        </div>
        </div>
    </div>
    
    <div id="editCourseDiv" class="easyui-window" data-options="modal:true,closed:true,iconCls:'icon-import'" style="width:500px;height:380px;padding:5px;overflow-x: hidden;">
        <div id="barcode-scan" style="text-align: center; font-weight: bold; font-size: 19px;">
        	<form action="#" id="formForEdit">
        	<input type="hidden" name="id" id="idForEdit"/>
            <table style="width: 450px;" cellpadding="5" border="0">
            	<tr>
            		<td class="myTitleTd">国编</td>
            		<td class="myValueTd"><input type="text" name="code" id="codeForEdit" maxlength="40"/></td>
            	</tr>
            	<tr>
            		<td class="myTitleTd">省编码</td>
            		<td class="myValueTd"><input type="text" name="codeHubei" id="codeHubeiForEdit" maxlength="40"/></td>
            	</tr>
            	<tr>
            		<td class="myTitleTd">课程名称</td>
            		<td class="myValueTd"><input type="text" name="name" id="nameForEdit" maxlength="50" class="validate[required]"/><label>*</label></td>
            	</tr>
            	<tr>
            		<td class="myTitleTd">课程类型</td>
            		<td class="myValueTd"><select name="type" id="typeForEdit" class="validate[groupRequired[type]]">
            			<option value="">请选择</option>
            			<c:forEach items="${courseTypeDic}" var="m">
            			<option value="${m.key }">${m.value }</option>
            			</c:forEach>
            		</select></td>
            	</tr>
            	<tr>
            		<td class="myTitleTd">状态</td>
            		<td class="myValueTd"><select name="status" id="statusForEdit" class="validate[groupRequired[status]]">
            			<option value="">请选择</option>
            			<c:forEach items="${courseStatusDic}" var="m">
            			<option value="${m.key }">${m.value }</option>
            			</c:forEach>
            		</select></td>
            	</tr>
            	<tr>
            		<td class="myTitleTd">课程学分</td>
            		<td class="myValueTd"><input type="text" name="score" id="scoreForEdit" maxlength="3" class="validate[custom[integer],max[200],min[0]]" title="请输入学分[0-200]"/></td>
            	</tr>
            	<tr>
            		<td class="myTitleTd">备注</td>
            		<td class="myValueTd"><textarea rows="" cols="" name="remark" id="remarkForEdit"></textarea><span id="count"></span></td>
            	</tr>
            	<tr>
            		<td colspan="2"><button style="margin-right: 50px;" id="saveEditBtn">保存</button><button id="cancleEditBtn">取消</button></td>
            	</tr>
            </table>
            </form>
        </div>
    </div>
    
    <div id="linkBooksDiv" title="关联教材" class="easyui-window" data-options="modal:true,closed:true,iconCls:'icon-import'" style="width:860px;height:380px;padding:5px;overflow-x: hidden;">
        <div id="barcode-scan" style="text-align: center; font-weight: bold; font-size: 19px;">
        	<form action="#" id="formForlinkBooks">
        	<input type="hidden" name="courseId" id="courseIdForlinkBooks"/>
<table style="width: 830px;margin-top: 5px;" cellpadding="0" border="0" class="bookSelTable" align="center">
<tr>
<td>
<div style="text-align: left;">
	<input id="keywordForSearchBook" placeholder="教材名称或编号"/>
	<button id="searchBookBtn">查询</button>
</div>
<table id="allBooksDg" class="easyui-datagrid" style="width:450px;height:240px;" data-options="url:'${ctx}/book/queryBooks',fitColumns:true,singleSelect:false,pagination:true">
    <thead>
        <tr>
            <th data-options="field:'code',width:80">编码</th>
            <th data-options="field:'name',width:300">名称</th>
            <th data-options="field:'statusName',width:60">状态</th>
        </tr>   
    </thead>
</table>
</td>
<td valign="middle" align="center"><div style="margin-bottom: 30px;"><input type="button" value="&gt;" style="width: 30px;" id="addBooksBtn"/></div><div><input type="button" value="&lt;" style="width: 30px;" id="delBooksBtn"/></div></td>
<td align="right" valign="bottom">
<table id="chosenBooksDg" class="easyui-datagrid" style="width:320px;height:240px" data-options="fitColumns:true,singleSelect:false">
    <thead>   
        <tr>
            <th data-options="field:'code',width:80">编码</th>
            <th data-options="field:'name',width:160">名称</th>
            <th data-options="field:'inCourseStatus',width:80,formatter: inCourseStatusFormatter,editor:{type: 'combobox', options: { data: inCourseStatusMap,valueField: 'key', textField: 'text',required: true,editable:false} }">课程中状态</th>
        </tr>   
    </thead>   
</table>
</td>
</tr>
<tr>
<td colspan="3" style="padding-top: 10px;"><button style="margin-right: 50px;" id="saveLinkBooksBtn">保存</button><button id="cancleLinkBooksBtn">取消</button></td>
</tr>
</table>
            </form>
        </div>
    </div>
</body>
</html>