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

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

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
	<div class="easyui-layout" data-options="fit:true">
		<div title='<%: Html.Language("AirConditioningMgmt")%>' style="border-right:1px solid #95B8E7;" data-options="region:'center',border:false">
			<table id="dg" class="easyui-datagrid" style="width:100%; height:auto;"
				data-options="
						toolbar: '#tb',
						border: false,
						singleSelect: true,
						pagination: true,
						pageSize: 20,
						rownumbers: true,
						sortName: 'Name',
						sortOrder: 'asc',
						fit: true,
						fitColumns: true,
						striped: true,
						idField: 'ID',
						frozenColumns: [[
							{ field: 'ID', checkbox: true }
						]],
						url: '/Model/LoadAllByPage/',
						method: 'post',
						onDblClickRow: function(rowIndex, rowData) { editModel(rowData); },
						onSelect: dgOnSelect
					">
				<thead>
					<tr>
						<th data-options="field:'Name',width:60,sortable:true">
								<%: Html.Language("Name")%>
						</th>
						<th data-options="field:'CorrectedTemp',sortable:true">
								<%: Html.Language("CorrectedTemp")%>
						</th>
						<th data-options="field:'ModifiedDate',sortable:true,formatter:$.tools.formatDateTime">
							<%: Html.Language("ModifiedDate")%>
						</th>
						<th data-options="field:'ApplyDate',sortable:true,formatter:$.tools.formatDateTime">
							<%: Html.Language("ApplyDate")%>
						</th>
						<th data-options="field:'ApplyUser',sortable:true">
							<%: Html.Language("ApplyUser")%>
						</th>
					</tr>
				</thead>
			</table>
			<div id="tb">
				<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true" onclick="$('#dg').datagrid('reload');"><%: Html.Language("Refresh")%></a> 
				<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="addModel()"><%: Html.Language("New")%></a>
				<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="editModel()"><%: Html.Language("Edit")%></a>
				<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="delModel()"><%: Html.Language("Delete")%></a>
				<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-update',plain:true" onclick="apply()"><%: Html.Language("Apply")%></a>
			</div>
		</div>


		<div id="editModel" class="easyui-window"   title='<%: Html.Language("EditEnergySavingMode")%>' style="width:620px; height:500px;padding: 5px;" 
			closed="true" modal="true" collapsible="false" minimizable="false" maximizable="false">

			<div class="easyui-layout" fit="true">
				<div data-options="region:'center'">

					<div style="height:240px;padding:10px;">
						<form id="editModelForm" method="post" action="#">
							<input type="hidden" name="ID" value="0" />

							<ul id="ulModel">
								<li>
									<span><%: Html.Language("Name")%>&nbsp;：</span>
									<input name="Name" class="easyui-validatebox textbox text" data-options="required:true" />
								</li>

								<li>
									<span><%: Html.Language("CorrectedTemp")%>&nbsp;：</span>
									<input id="txtCorrectedTemp" name="CorrectedTemp" class="easyui-numberbox textbox text" style="width:80px;" data-options="required:true" value="0" />
								</li>

								<li><hr /></li>

								<li>
									<span></span>
									<input name="FanRunStatus" type="checkbox" value="true" /><%: Html.Language("RTSTATFKRALSP")%>
								</li>

								<li><hr /></li>

								<li>
									<span><%: Html.Language("WTNOITRFS")%>&nbsp;：</span>
									<input name="ExhaustFanStatus" type="radio" value="0" /><%: Html.Language("Close")%>
									<input name="ExhaustFanStatus" type="radio" value="1" checked="checked" /><%: Html.Language("Open")%>
									<input name="ExhaustFanStatus" type="radio" value="2" /><%: Html.Language("TimedOpening")%>&nbsp;
									<%: Html.Language("TimingLength")%>：<input id="txtExhausFanTime" name="ExhausFanTime" class="easyui-numberbox textbox text" disabled="disabled" style="width:80px;" value="0" /><%: Html.Language("MinutesHour")%>
								</li>

								<li><hr /></li>

								<li>
									<span><%: Html.Language("InfraredDelayPowerOffTime")%>：</span>
									<input id="txtInfraredDelayPO" name="InfraredDelayPO" class="easyui-numberbox textbox text" style="width:80px;" value="0" />
									<span><%: Html.Language("MagneticDelayPowerOffTime")%>：</span>
									<input id="txtDoorDelayPO" name="DoorDelayPO" class="easyui-numberbox textbox text" style="width:80px;" value="0" />
								</li>

								<li>
									<span><%: Html.Language("PullTheCardDelayedPowerOffTime")%>：</span>
									<input id="txtPullCardDelayPO" name="PullCardDelayPO" class="easyui-numberbox textbox text" style="width:80px;" value="0" />
								</li>
							</ul>
					
						</form>
					</div>

					<div style="height:160px;">
						<table id="dgModelDetail" title='<%: Html.Language("FanStatus")%>' class="easyui-datagrid" style="width:100%;border-top:1px solid #95B8E7;"
							data-options="
									border: true,
									singleSelect: true,
									fit: true,
									striped: true,
									idField: 'ID',
									method: 'post'
								">
							<thead>
								<tr>
									<th data-options="field:'ModelStatus',width:50,align:'center'">
										<%: Html.Language("Status")%>
									</th>
									<th data-options="field:'OnOff',width:50,align:'center', 
										formatter: function(val) { return val == 0 ?lang.Close : lang.Open; }, 
										editor: { 
											type: 'combobox', 
											options: { 
												panelHeight: 'auto',
												data: [
													{ value: 0, text: lang.Close },
													{ value: 1, text: lang.Open  }
												]
											} 
										}">
										<%: Html.Language("Switch")%>
									</th>
									<th data-options="field:'ModelType',width:50,align:'center',
										formatter: function(val) { return val == 0 ? lang.Manually : lang.Automatic; }, 
										editor: {
											type: 'combobox',
											options: {
												panelHeight: 'auto',
												data: [
													{ value: 1, text: lang.Automatic },
													{ value: 0, text: lang.Manually}
												]
											}
										}
										">
										<%: Html.Language("Type")%>
									</th>
									<th data-options="field:'Speed',width:50,align:'center',
										formatter: function(val) { 
											if(val == 0) {
												return lang.Stop;
											} else if(val == 1) {
												return lang.low;
											} else if(val == 2) {
												return lang.Middle;
											} else if(val == 3) {
												return lang.HighSpeed;
											}
											return '';
										}, 
										editor: {
											type: 'combobox',
											options: {
												panelHeight: 'auto',
												data: [
													{ value: 0, text: lang.Stop },
													{ value: 1, text: lang.low },
													{ value: 2, text: lang.Middle },
													{ value: 3, text: lang.HighSpeed },
												]
											}
										}
										">
											<%: Html.Language("Speed")%>
									</th>
									<th data-options="field:'SummerTemp',width:60,align:'center',
										editor: {
											type: 'numberbox'
										}
										">
										<%: Html.Language("SummerTemp")%>
									</th>
									<th data-options="field:'WinterTemp',width:60,align:'center',
										editor: {
											type: 'numberbox'
										}
										">
										<%: Html.Language("WinterTemp")%>
									</th>
									<th data-options="field:'TimingControl',width:60,align:'center',
										formatter: function(val) {
											if(typeof val === 'string') {
												val = eval(val.toLowerCase());
											}
											return val ? lang.Yes : lang.No; 
										}, 
										editor: {
											type: 'checkbox',
											options: {
												on: true,
												off: false,
											}
										}">
										<%: Html.Language("TimingControl")%>
									</th>
									<th data-options="field:'Timer',width:150,align:'center',
										editor: {
											type: 'numberbox',
											options: {
												min:0,
											}
										}
										">
										<%: Html.Language("TimeLength")%>
									</th>
									<th data-options="field:'AllowElectric',width:60,align:'center',
										formatter: function(val) {
											if(typeof val === 'string') {
												val = eval(val.toLowerCase());
											}
											return val ? lang.Yes : lang.No; 
										},
										editor: {
											type: 'checkbox',
											options: {
												on: true,
												off: false,
											}
										}
										">
										<%: Html.Language("AllowElectric")%>
									</th>
								</tr>
							</thead>
						</table>
					</div>
				</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="saveModel()"><%: Html.Language("Save")%></a>
					<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="$('#editModel').window('close')"><%: Html.Language("Cancel")%></a>
				</div>
			</div>
		</div>

		<div style="width:200px;border-left:1px solid #95B8E7;" data-options="region:'east',title:lang.GuestRoom,split:true,border:false">
			<ul id="groupTree" class="easyui-tree" data-options="checkbox:true,animate:true,lines:true,url:'/Model/LoadGroupTreeWithRoom/'"></ul>
		</div> 

		<div id="editGroup" class="easyui-window"   title='<%: Html.Language("NewGroup")%>' style="width: 300px; height: 200px;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="groupForm" class="easyui-form" method="post" data-options="novalidate:true">
					<table style="margin: 20px auto;" cellpadding="3">
						<tr>
							<td class="align-right">
								<%: Html.Language("Name")%>：
							</td>
							<td>
								<input id="txtGroupName" name="Name" class="easyui-validatebox textbox text" data-options="required:true,validType:'length[3,20]'" />
							</td>
						</tr>
					
						<tr>
							<td class="align-right">
								<%: Html.Language("Sort")%>：
							</td>
							<td>
								<input id="txtGroupSort" name="Sort" class="easyui-numberspinner text" value="1" style="width:60px;" data-options="required:true,min:1" />
							</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="group.save();"><%: Html.Language("Save")%></a>
					<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="$('#editGroup').window('close');"><%: Html.Language("Cancel")%></a>
				</div>
			</div>
		</div>
	</div>
</asp:Content>

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

		function addModel() {
			$("#editModelForm").form("reset");
			$("#dgModelDetail").datagrid({ url: "/Model/LoadModelDetail/", queryParams: {} });
			$("#editModel").window({ title: lang.NewEnergySavingMode }).window("open");
		}

		function editModel(row) {

			var selectedRow = null;

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

			if (selectedRow) {

				$("#editModelForm").form("load", selectedRow);

				$("#dgModelDetail").datagrid({
					url: "/Model/LoadModelDetail/",
					queryParams: { modelId: selectedRow.ID }
				});

				$("#editModel").window({ title: lang.EditEnergySavingMode+"：" + selectedRow.Name }).window("open");

			} else {
				$.tools.alert(lang.PleaseSelectTheData);
			}
		}

		function delModel() {

			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, "/Model/Delete/", function () {
				$('#dg').datagrid("clearSelections");
				$('#dg').datagrid("reload");
			}, this);
		}

		function saveModel() {
			if ($("#editModelForm").form("enableValidation").form("validate")) {

				var entry = {};
				entry.ID = $("#editModelForm input[name='ID']").val();
				entry.Name = $("#editModelForm input[name='Name']").val();
				entry.CorrectedTemp = $("#txtCorrectedTemp").numberbox("getValue");
				entry.FanRunStatus = $("#editModelForm input[name='FanRunStatus']").is(":checked");
				entry.ExhaustFanStatus = $("#editModelForm input[name='ExhaustFanStatus']:checked").val();
				entry.ExhausFanTime = $("#txtExhausFanTime").numberbox("getValue");
				entry.InfraredDelayPO = $("#txtInfraredDelayPO").numberbox("getValue");
				entry.DoorDelayPO = $("#txtDoorDelayPO").numberbox("getValue");
				entry.PullCardDelayPO = $("#txtPullCardDelayPO").numberbox("getValue");
				entry.Details = $("#dgModelDetail").datagrid("getRows");

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

				$.tools.post(param, "/Model/Save/", function () {
					$('#dg').datagrid("reload");
					$('#editModel').window('close');
				}, this);
			}
		}

		function apply() {

			var row = $("#dg").datagrid("getSelected");
			if (row == null) {
			    $.tools.alert(lang.PCACCS);
				return;
			}

			var nodes = $("#groupTree").tree("getChecked");
			if (nodes.length == 0) {
			    $.tools.alert(lang.PleaseSelectRoom);
				return;
			}

			var hostIDs = [];
			for (var i in nodes) {
				if (nodes[i].attributes.isHost) {
					hostIDs.push(nodes[i].id);
				}
			}

			var param = { modelID: row.ID, hostIDs: JSON.stringify(hostIDs) };

			$.tools.confrimPost(lang.CAACCS, param, "/Model/Apply/");
		}

		//扩展 easyui-datagrid 单击单元格时进入编辑状态
		$.extend($.fn.datagrid.methods, {
			editCell: function (jq, param) {
				return jq.each(function () {
					var opts = $(this).datagrid('options');
					var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
					for (var i = 0; i < fields.length; i++) {
						var col = $(this).datagrid('getColumnOption', fields[i]);
						col.editor1 = col.editor;
						if (fields[i] != param.field) {
							col.editor = null;
						}
					}
					$(this).datagrid('beginEdit', param.index);
					var ed = $(this).datagrid('getEditor', param);
					if (ed) {
						if ($(ed.target).hasClass('textbox-f')) {
							$(ed.target).textbox('textbox').focus();
						} else {
							$(ed.target).focus();
						}
					}
					for (var i = 0; i < fields.length; i++) {
						var col = $(this).datagrid('getColumnOption', fields[i]);
						col.editor = col.editor1;
					}
				});
			},
			enableCellEditing: function (jq) {
				return jq.each(function () {
					var dg = $(this);
					var opts = dg.datagrid('options');
					opts.oldOnClickCell = opts.onClickCell;
					opts.onClickCell = function (index, field) {
						if (opts.editIndex != undefined) {
							if (dg.datagrid('validateRow', opts.editIndex)) {
								dg.datagrid('endEdit', opts.editIndex);
								opts.editIndex = undefined;
							} else {
								return;
							}
						}
						dg.datagrid('selectRow', index).datagrid('editCell', {
							index: index,
							field: field
						});
						opts.editIndex = index;
						opts.oldOnClickCell.call(this, index, field);
					}
				});
			}
		});

		function dgOnSelect(index, row) {
			$("#groupTree").tree({ url: "/Model/LoadGroupTreeWithRoom/", queryParams: { modelID: row.ID} });
		}

		$(function () {
			$("#dgModelDetail").datagrid("enableCellEditing");
			$("#editModelForm input[name='ExhaustFanStatus']").on("change", function () {
				if (this.value == 2) {
					$("#txtExhausFanTime").numberbox("enable");
				} else {
					$("#txtExhausFanTime").numberbox("disable");
				}
			});
		});

	</script>

	<style type="text/css">
		
		#ulModel {
			list-style-type:none;
			margin:0px;
			padding:0px;
		}
		
		#ulModel li {
			/*background:pink;*/
			padding:5px 0;
		}
		
		#ulModel li hr{
			border:none;
			border-top:1px solid #ccc;
			height:0px;
			margin:0px;
			padding:0px;
		}
		#ulModel li span {
			display:inline-block;
			text-align:right;
			width:150px;
		}
	</style>
</asp:Content>