<%@ 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/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>
 .tongjiTab td{border:1px solid #999999;}
 .first{width: 100px;height: 25px;text-align: center;}
  .second{width: 280px;height: 25px; text-align: center;}
.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/validator.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/swfupload/swfupload.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/swfupload/swfupload.queue.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/swfupload/uploadHandlers.js"></script>
<%@ include file="../../common/validation.jsp"%>
<title>题型管理</title>

<script language="javascript">
$(document).ready(function(){
	
	$("#downQuestionType").on('click',function(){
		window.location.href="${ctx}/resources/downloads/题型导入模板.xlsx";
	});
    $('#search-form').submit(function(event){
        event.preventDefault(); 
        var param = $('#search-form').serializeJson();
        param = $.extend(param, {page:1,rows:10});
        $('#dg').datagrid('load',param);
    });
    
    $("#searchBtn").on('click',function(){
    	$('#search-form').submit();
    });
    
    $("#addBtn").on('click',function(){
    	openQuestionTypeWin("新增题型");
    	return false;
    });
    $("#cancleAddBtn").on('click',function(){
    	$('#addQuestionTypeDiv').window('close');
    	return false;
    });
    $("#cancleEditBtn").on('click',function(){
    	$('#editQuestionTypeDiv').window('close');
    	return false;
    });
    
    $("#saveEditBtn").on('click',function(){
    	saveEditQuestionType();
    	return false;
    });
    $("#saveAddBtn").click(function(){
    	saveQuestionType();
    	return false;
    });
    $("#editBtn").on('click',function(){
    	editQuestionType("编辑题型");
    });
    
    $("#dg").datagrid({
        onDblClickRow: function (rowIndex, rowData) {
        	editQuestionType("编辑题型");
        }
    });
    
    $("#formForAdd").validationEngine();
    $("#formForEdit").validationEngine();
});

function editQuestionType(title){
	var row = $('#dg').datagrid('getSelected');
	if (row){
		var type;
		var status;
		if(row.type=="单选题"){
			type=1;
		}else if(row.type=="多选题"){
			type=2;
		}else if(row.type=="主观题"){
			type=0;
		}
		
		$("#codeForEdit").val(row.code);
		$("#nameForEdit").val(row.name);
		$("#correctOptionNumForEdit").val(type);
		$("#statusCodeForEdit").val(row.statusCode);
		$("#remarkForEdit").val(row.remark);
		$("#defaultScoreForEdit").val(row.defaultScore);
		$("#idForEdit").val(row.id);
		
		$('#editQuestionTypeDiv').window({"title":title});
		$('#editQuestionTypeDiv').window('open');
	}else{
		$.messager.alert('提示','请选择一行进行编辑操作');
	}
}


function chooseType(){
	var num=$("#correctOptionsNum").val();
	if(num=='1'){
		$("#nameForAdd").val("单项选择题");
	}else if(num=='2'){
		$("#nameForAdd").val("多项选择题");
	}else{
		$("#nameForAdd").val("");
	}
}

function openQuestionTypeWin(title){
	$('#addQuestionTypeDiv').window({"title":title});
	$('#addQuestionTypeDiv').window('open');
}
function saveQuestionType(){
	if($("#formForAdd").validationEngine('validate')){
		$.ajax({
			type : "POST",
			url : "${ctx}/questionType/addQuestionType",
			data : $('#formForAdd').serialize(), 
			success : function(callback) {
				if(callback.flag == 'success'){
					$.messager.alert('提示', callback.msg, 'info', function () {
						$('#addQuestionTypeDiv').window('close');
						$('#dg').datagrid('reload');
                    });
				}else{
					$.messager.alert('提示', "更新失败，请刷新后操作!", 'error');
				}
			}
		});
	}
}

function saveEditQuestionType(){
	if($("#formForEdit").validationEngine('validate')){
		$.ajax({
			type : "POST",
			url : "${ctx}/questionType/editQuestionType",
			data : $('#formForEdit').serialize(), 
			success : function(callback) {
				if(callback.flag == 'success'){
					$.messager.alert('提示', callback.msg, 'info', function () {
						$('#editQuestionTypeDiv').window('close');
						$('#dg').datagrid('reload');
                    });
				}else{
					$.messager.alert('提示', "更新失败，请刷新后操作!", 'error');
				}
			}
		});
	}
}

function formatStatus(data){
	if(data=="0"){
		return "停用";
	}else if(data=="1"){
		return "启用";
	}
}

</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 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}/questionType/queryQuestionTypes',fitColumns:true,singleSelect:true,striped:true,pagination:true,toolbar: '#tb',pageSize:20">
	                     <thead>
	                         <tr class="title">
	                             <th data-options="field:'id',width:80">ID</th>
	                             <th data-options="field:'code',width:80">题型编码</th>
	                             <th data-options="field:'name',width:100">题型名称</th>
	                             <th data-options="field:'type',width:80">类型</th>
	                             <th data-options="field:'defaultScore',width:80">默认分值</th>
	                             <th data-options="field:'statusCode',width:80,formatter:formatStatus" >状态</th>
	                             <th data-options="field:'remark',width:80">题型说明</th>
	                         </tr>
	                     </thead>
	                   </table>
	               </div>
	            </div>
	            <div id="tb" style="height:auto">
	            	<div style="margin-bottom:5px">
				        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" id="addBtn">新增题型</a>
				        <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-search',plain:true" id="importTypeBtn">导入题型</a>
				        <a href="#" class="easyui-linkbutton" iconCls="icon-download" id="downQuestionType">下载题型模板</a>
				     </div>
	            	<div>
			            <form id="search-form" method="post" >
				            <input name="keyword" placeholder="题型名称"/>
				            <select name="correctOptionsNum">
		                        <option value="">类型</option>
		                        <option value="0">主观题</option>
		                        <option value="1">单选题</option>
		                        <option value="2">多选题</option>
		                    </select>
		                     <a href="#" class="easyui-linkbutton" iconCls="icon-search" id="searchBtn">查找</a>
			            </form>
					</div>
				</div>
	        </div>

<div style="display: none;">
	        <div id="addQuestionTypeDiv" class="easyui-window" data-options="modal:true,closed:true,iconCls:'icon-import'" style="width:430px;height:350px;padding:5px;overflow-x: hidden;">
		        <div id="barcode-scan" style="font-size: 12px;">
		        	<form action="#" id="formForAdd">
			            <table style="width: 450px;" cellpadding="5" border="0">
			            	<tr>
			            		<td class="myTitleTd">题型编码</td>
			            		<td class="myValueTd"><input type="text" name="code" id="codeForAdd" maxlength="40"/></td>
			            	</tr>
			            	<tr>
			            		<td class="myTitleTd">类型</td>
			            		<td class="myValueTd">
			            			<select  class="validate[groupRequired[type]]" name="correctOptionsNum" onchange="chooseType()" id="correctOptionsNum">
			            				<option value="">请选择</option>
			            				<option value="0">主观题</option>
			            				<option value="1">单选题</option>
			            				<option value="2">多选题</option>
			            			</select>
			            			<label>*</label>
			            		</td>
			            	</tr>
			            	<tr>
			            		<td class="myTitleTd">题型名称</td>
			            		<td class="myValueTd"><input type="text" name="name" id="nameForAdd" maxlength="40" class="validate[required]"/><label>*</label></td>
			            	</tr>
			            	<tr>
			            		<td class="myTitleTd">默认分值</td>
			            		<td class="myValueTd"><input type="text" name="defaultScore" id="defaultScoreForAdd" maxlength="2" class="validate[custom[integer],max[99],min[0]]" title="请输入正整数"/></td>
			            	</tr>
			            	<tr>
			            		<td class="myTitleTd">状态</td>
			            		<td class="myValueTd">
			            			<select  class="validate[groupRequired[type]]" name="statusCode" id="statusCodeForAdd">
			            				<option value="">请选择</option>
			            				<option value="0">停用</option>
			            				<option value="1" selected="selected">启用</option>
			            			</select>
			            		</td>
			            	</tr>
			            	<tr>
			            		<td class="myTitleTd">题型说明</td>
			            		<td class="myValueTd"><textarea rows="" cols="" name="remark" id="remarkForAdd"></textarea><span id="count"></span></td>
			            	</tr>
			            	
			            	<tr>
			            		<td colspan="2" align="center"><button style="margin-right: 50px;" id="saveAddBtn">保存</button><button id="cancleAddBtn">取消</button></td>
			            	</tr>
			            </table>
		            </form>
		        </div>
		    </div>
		    
		    
		    
		    <div id="editQuestionTypeDiv" class="easyui-window" data-options="modal:true,closed:true,iconCls:'icon-import'" style="width:430px;height:350px;padding:5px;overflow-x: hidden;">
		        <div id="barcode-scan" style="font-size: 12px;">
		        	<form action="#" id="formForEdit">
			        	<input type="hidden" name="id" id="idForEdit"/>
			            <table style="width: 450px;" cellpadding="5" border="0" align="center">
			            	<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="name" id="nameForEdit" maxlength="40" class="validate[required]"/><label>*</label></td>
			            	</tr>
			            	<tr>
			            		<td class="myTitleTd">类型</td>
			            		<td class="myValueTd">
			            			<select  class="validate[groupRequired[type]]" name="correctOptionsNum" id="correctOptionNumForEdit">
			            				<option value="">请选择</option>
			            				<option value="0">主观题</option>
			            				<option value="1">单选题</option>
			            				<option value="2">多选题</option>
			            			</select>
			            			<label>*</label>
			            		</td>
			            	</tr>
			            	<tr>
			            		<td class="myTitleTd">默认分值</td>
			            		<td class="myValueTd"><input type="text" name="defaultScore" id="defaultScoreForEdit" maxlength="2" class="validate[custom[integer],max[99],min[0]]" title="请输入正整数"/></td>
			            	</tr>
			            	<tr>
			            		<td class="myTitleTd">状态</td>
			            		<td class="myValueTd">
			            			<select  class="validate[groupRequired[type]]" name="statusCode" id="statusCodeForEdit">
			            				<option value="">请选择</option>
			            				<option value="0">停用</option>
			            				<option value="1">启用</option>
			            			</select>
			            		</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" align="center"><button style="margin-right: 50px;" id="saveEditBtn">保存</button><button id="cancleEditBtn">取消</button></td>
			            	</tr>
			            </table>
		            </form>
		        </div>
		    </div>
        </div>
    </div>
</div>

<div id="importTypeDiv" title="导入题型" class="easyui-window" data-options="modal:true,closed:true,iconCls:'icon-import'" style="width:500px;height:300px;padding:10px;">
			<div style="display: inline;   padding: 2px;">
				<span id="spanButtonPlaceholder"></span> 
				
				<div style="padding-top: 25px;" >
				  	<div id="success" style="display:none;"></div>
				  	
					  <div id="error" style="display:none;">
					  <div>
				  		<span>行数据存在错误信息无法导入:</span>
				  		</div>
				        <table style="border-collapse: collapse;" class="tongjiTab">
				        	<tr>
				        		<td class="first">行号</td>
				        		<td class="second">错误信息</td>
				        	</tr>
				        	<tr style="color: red;">
				        		<td class="first" id="firstTd"></td>
				        		<td class="second" id="secondTd"></td>
				        	</tr>
				        	<!-- <tr>
				        		<td class="first">22</td>
				        		<td class="second">22</td>
				        	</tr> -->
				        </table>
	    			</div>
    			</div>
			</div>
		</div>
</body>
</html>

<script type="text/javascript">
$(function(){
	loadSwfUpload();	//首先加载swfupload();
	$("#importTypeBtn").on('click',function(){
		$("#importTypeDiv").window('open');
		$("#error").hide();
	});
});
var swfUpload = null;
function loadSwfUpload() {
	swfUpload = new SWFUpload({
		 upload_url :"${ctx}/attachment/upload",
		 post_params: {"userId":"${sessionScope.web_session_user.id}"},
		 use_query_string : false,
		  
		// File Upload Settings
		file_size_limit : "50 MB",	// 50MB
		file_types : "*.xls;*.xlsx",
		file_types_description : "Excel文件",
		file_upload_limit 	:	0,

		file_queue_error_handler : fileQueueError,
		file_dialog_complete_handler : fileDialogComplete,//选择好文件后提交
		upload_progress_handler : uploadProgress,
		upload_error_handler : uploadError,
		upload_success_handler : uploadSuccess,
		upload_complete_handler : uploadComplete,
		
		// Button Settings
		button_image_url : '${ctx}/resources/images/SmallSpyGlassWithTransperancy_17x18.png',
		button_placeholder_id : "spanButtonPlaceholder",
		button_width: 180,
		button_height: 18,
		button_text : '<span class="button">导入题型<span class="buttonSmall"></span></span>',
		button_text_style : '.button { font-family: Helvetica, Arial, sans-serif; font-size: 12px; } .buttonSmall { font-size: 10px; color: #ff0000;}',
		button_text_top_padding: 0,
		button_text_left_padding: 18,
		button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
		button_cursor: SWFUpload.CURSOR.HAND,
		button_action: SWFUpload.BUTTON_ACTION.SELECT_FILE,
		
		
		// Flash Settings
		flash_url : '${ctx}/resources/js/swfupload/swfupload.swf',

		custom_settings : {
			upload_target : "importDivFileProgressContainer"
		},
		// Debug Settings
		debug: false //是否显示调试窗口
	});
};

function uploadSuccess(file, serverData) {
	serverData=eval('(' + serverData + ')');
	if(serverData.flag=='success'){
		//文件信息保存到数据库后需要对文件进行解析处理
		var param={
				"attId":serverData.att.id
		}
		
		$.ajax({
			type : "POST",
			url : "${ctx}/questionType/upLoadType",
			data : param,
			dataType : "json",
			success : function(res) {
				$(document).unmask();
				if(res.result=='fail'){ 
					$("#success").hide();
					$("#firstTd").html(res.lineNum);
					$("#secondTd").html(res.msg);
					$("#error").show();
				}else if(res.result=='success'){
					$("#success").html("成功导入"+res.successNum+"条记录");
					$("#success").show();
					$("#error").hide();
					$('#dg').datagrid('reload');
				}else{
					$("#firstTd").html("-");
					$("#secondTd").html(res.msg);
				}
			}
		});
	}else{
		$(document).unmask();
		$.messager.alert('提示',serverData.msg,'error');
	}
}
</script>
