<%@ 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>
.myTitleTd{
	font-size: 12px;
	font-weight: normal;
	width: 100px;
	height:25px;
	text-align: right;
}

.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/validator.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/easyui-lang-zh_CN.js"></script>
<%@ include file="../../common/validation.jsp"%>
<title>教材管理</title>

<script language="javascript">
$(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) {
            openBookWin(rowData,"编辑教材信息");
        }
    });
    
    $("#addBtn").click(function(){
    	openBookWin({},"添加教材信息");
    	return false;
    });
    
    $("#cancleEditBtn").click(function(){
    	$('#editBookDiv').window('close');
    	return false;
    });
    
    $("#saveEditBtn").click(function(){
    	saveBookEdit();
    	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');
    });
    
    $("#searchBtn").on('click',function(){
    	$('#search-form').submit();
    });
});

function openBookWin(book,title){
	$("#idForEdit").val(book.id);
	$("#codeForEdit").val(book.code);
	$("#nameForEdit").val(book.name);
	$("#statusForEdit").val(book.status);
	$("#chapterSizeForEdit").val(book.chapterSize);
	$("#editorForEdit").val(book.editor);
	$("#pressForEdit").val(book.press);
	$("#versionForEdit").val(book.version);
	$("#priceForEdit").val(book.price);
	$("#remarkForEdit").val(book.remark);
	calculate_byte(200,'remarkForEdit','count');
	$("#codeForEdit").focus();
	$('#editBookDiv').window({"title":title});
	$('#editBookDiv').window('open');
}

function saveBookEdit(){
	if($("#formForEdit").validationEngine('validate')){
		$.ajax({
			type : "POST",
			url : "${ctx}/book/save",
			data : $('#formForEdit').serialize(), 
			success : function(callback) {
				if(callback.flag == 'success'){
					$.messager.alert('提示', callback.msg, 'info', function () {
						$('#editBookDiv').window('close');
						$('#dg').datagrid('reload');
                    });
				}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 id="tb">
	            <form id="search-form" method="post" >
		            <input name="keyword" placeholder="教材名称或编号"/>
		            <a href="#" class="easyui-linkbutton" iconCls="icon-search" id="searchBtn">查找</a>
		            <!--  <button id="addBtn" style="margin-left: 20px;">添加</button>-->
		            <a href="#" class="easyui-linkbutton" iconCls="icon-add" id="addBtn">添加</a>
	            </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}/book/queryBooks',fitColumns:true,singleSelect:true,striped:true,pagination:true,toolbar: '#tb',pageSize:20">
	                     <thead>
	                         <tr class="title">
	                             <th data-options="field:'code',width:80">书号</th>
	                             <th data-options="field:'name',width:150">教材名称</th>
	                             <th data-options="field:'chapterSize',width:70">章数</th>
	                             <th data-options="field:'editor',width:80">作者</th>
	                             <th data-options="field:'press',width:80">出版社</th>
	                             <th data-options="field:'version',width:80">版次</th>
	                             <th data-options="field:'statusName',width:80">状态</th>
	                         </tr>
	                     </thead>
	                   </table>
	               </div>
	            </div>
	        </div>
        </div>
    </div>
<div style="display: none;">
    <div id="editBookDiv" class="easyui-window" data-options="modal:true,closed:true,iconCls:'icon-import'" style="width:500px;height:470px;padding:10px;overflow: 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">
            	<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="50" class="validate[required]"/><label>*</label></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="${bookStatusDic}" 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="chapterSize" id="chapterSizeForEdit" maxlength="2" class="validate[required,custom[integer],max[99],min[1]]" title="请输入正整数[1-99]"/><label>*</label></td>
            	</tr>
            	<tr>
            		<td class="myTitleTd">作者</td>
            		<td class="myValueTd"><input type="text" name="editor" id="editorForEdit" maxlength="50" class="validate[required]"/><label>*</label></td>
            	</tr>
            	<tr>
            		<td class="myTitleTd">出版社</td>
            		<td class="myValueTd"><input type="text" name="press" id="pressForEdit" maxlength="50" class="validate[required]"/><label>*</label></td>
            	</tr>
            	<tr>
            		<td class="myTitleTd">版次</td>
            		<td class="myValueTd"><input type="text" name="version" id="versionForEdit" maxlength="20"/></td>
            	</tr>
            	<tr>
            		<td class="myTitleTd">价格</td>
            		<td class="myValueTd"><input type="text" name="price" id="priceForEdit" maxlength="7" class="validate[custom[number],max[99999],min[0]]" title="请输入金额[0-99999]"/><span>元（人民币）</span></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>
</body>
</html>