<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/SimonMasterPage.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	<%: Html.Language("FaultCategorySetting")%>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
	<div class="easyui-layout" data-options="fit:true">
		<div data-options="region:'north',border:false" style="overflow:hidden;height:30px;">
			<div class="toolbar">
				<a href="javascript:void(0)" class="toolbar-button tb-icon-refresh" onclick="$('#dg').datagrid('load',{});"><%: Html.Language("Refresh")%></a>
				<a href="javascript:void(0)" class="toolbar-button tb-icon-add" onclick="add()"><%: Html.Language("New")%></a>
				<a href="javascript:void(0)" class="toolbar-button tb-icon-edit" onclick="edit()"><%: Html.Language("Edit")%></a>
				<a href="javascript:void(0)" class="toolbar-button tb-icon-remove" onclick="del()"><%: Html.Language("Delete")%></a>
			</div>
		</div>
		<div data-options="region:'center',border:false">
			<table id="dg" class="easyui-datagrid" style="width:100%; height:auto;"
				data-options="
						border: false,
						pagination: true,
						pageSize: 20,
						rownumbers: true,
						striped: true,
						sortName: 'Code',
						sortOrder: 'asc',
						fit: true,
						fitColumns: true,
						idField: 'ID',
						frozenColumns: [[
							{ field: 'ID', checkbox: true }
						]],
						method: 'post',
						url: '/FaultType/LoadAllByPage/',
						onDblClickRow: function(index, row) { edit(row); }
					">
				<thead>
					<tr>
						<th data-options="field:'Code',sortable:true,resizable:false">
							<%: Html.Language("FaultID")%>
						</th>
						<th data-options="field:'Name',sortable:true,resizable:false">
							<%: Html.Language("Name")%>
						</th>
						<th data-options="field:'Remark',sortable:true,width:200,resizable:false">
							<%: Html.Language("FaultInstructions")%>
						</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
	
	<div id="editFaultType" class="easyui-window"   title='<%: Html.Language("NewFaultType")%>' style="width:350px; height: 220px;padding: 5px;" 
			closed="true" modal="true" collapsible="false" minimizable="false" maximizable="false">

			<div class="easyui-layout" fit="true">
				<div data-options="region:'center'">
					<form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
					<table style="margin: 20px auto;" cellpadding="3">
						<tr>
							<td class="align-right">
								<%: Html.Language("FaultID")%>：
							</td>
							<td>
								<input id="txtCode" name="Code" class="easyui-validatebox textbox text" data-options="required:true,validType:'length[1,20]'" />
							</td>
						</tr>
						<tr>
							<td class="align-right">
								<%: Html.Language("Name")%>：
							</td>
							<td>
								<input id="txtName" name="Name" class="easyui-validatebox textbox text" data-options="required:true,validType:'length[1,50]'" />
							</td>
						</tr>
						<tr>
							<td class="align-right">
								<%: Html.Language("FaultInstructions")%>：
							</td>
							<td>
								<input id="txtRemark" name="Remark" class="easyui-validatebox textbox text" data-options="required:true,validType:'length[1,200]'" />
							</td>
						</tr>
					</table>
					</form>
				</div>
				<div data-options="region:'south',border:false" style="text-align: right; padding: 5px 0 0;">
					<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" href="javascript:void(0)" onclick="save();"><%: Html.Language("Save")%></a>
					<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="$('#editFaultType').window('close');"><%: Html.Language("Cancel")%></a>
				</div>
			</div>
		</div>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent" runat="server">
	<script type="text/javascript">

		var selectedRow = null;

		function add() {
			selectedRow = null;
			$('#ff').form('reset');
			$('#editFaultType').window({ title: lang.NewFaultCategory }).window('open');
		}

		function edit(row) {
			if (row !== null && typeof (row) === "object") {
				selectedRow = row;
			} else {
				selectedRow = $("#dg").datagrid("getSelected");
			}

			if (selectedRow) {
			    $('#ff').form('load', selectedRow);
			    $('#editFaultType').window({ title: lang.EditFaultCategory + selectedRow.Name }).window('open');
} else {
    $.tools.alert(lang.PleaseSelectTheData);
			}
		}

		function del() {
			var rows = $('#dg').datagrid('getSelections');
			if (!rows || rows.length == 0) {
				$.tools.alert(lang.PleaseSelectTheData);
				return;
			}

			var param;
			$.each(rows, function (i, n) {
				if (i == 0) {
					param = "idList=" + n.ID + "&nameList=" + n.Name;
				}
				else {
					param += "&idList=" + n.ID + "&nameList=" + n.Name;
				}
			});

			$.tools.delPost(param, "/FaultType/Delete/", function () {
				$('#dg').datagrid("clearSelections");
				$('#dg').datagrid("reload");
			}, this);
		}

		function save() {
			if ($("#ff").form("enableValidation").form("validate")) {

				var entry = {};

				entry.ID = (null != selectedRow) ? selectedRow.ID : 0
				entry.Code = $("#txtCode").val();
				entry.Name = $("#txtName").val();
				entry.Remark = $("#txtRemark").val();

				var param = { jsonData: JSON.stringify(entry) };

				$.tools.post(param, "/FaultType/Save/", function () {
					$("#dg").datagrid("reload");
					$("#editFaultType").window("close");
				}, this);
			}
		}
	</script>
</asp:Content>
