<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%
    //var connectingRooms = ViewData["ConnectingRooms"] as IList<Domain.Host>;
    var services = ViewData["Services"] as IList<string>;
    //var abnormities = ViewData["Abnormities"] as IList<string>;
%>
<style type="text/css">
    #connectingRoomList
    {
        margin: 0;
        padding: 0;
    }
    #connectingRoomList li
    {
        float: left;
        padding: 3px 5px;
        list-style-type: none;
        cursor: default;
    }
    #connectingRoomList li:hover
    {
        background: #00A2EA;
        color: #FFF;
        border-radius: 5px;
    }
    ul.list
    {
        margin: 0;
        padding: 0;
    }
    ul.list li
    {
        float: left;
        padding: 3px 5px;
        list-style-type: none;
        cursor: default;
    }
    ul.list li label
    {
        font-weight: bold;
    }
    ul.list li:hover
    {
        background: #00A2EA;
        color: #FFF;
        border-radius: 5px;
    }
    #roomInfo li
    {
        min-width: 90px;
    }
</style>
<table id="layout" style="width: 100%; height: 100%;">
    <tr>
        <td style="height: 50px; vertical-align: top;">
            <div class="box">
                <div class="title">
                    <%: Html.Language("RoomInformation")%></div>
                <div class="container">
                    <div class="content">
                        <ul id="roomInfo" class="list clearfix">
                            <li>
                                <label>
                                    <%: Html.Language("RoomNumber")%>：</label><%: Model.RoomNumber %></li>
                            <li>
                                <label>
                                    <%: Html.Language("RoomStatus")%>：</label><%: Model.RoomStatus %></li>
                            <li>
                                <label>
                                    <%: Html.Language("Identity")%>：</label><%: Model.Identity %></li>
                            <li>
                                <label>
                                    <%: Html.Language("Status")%>：</label><%: Model.HostStatus %></li>
                            <li>
                                <label>
                                    IP：</label><%: Model.IP %></li>
                            <%--<li>
                                <label>
                                    <%: Html.Language("Port")%>：</label><%: Model.Port %></li>--%>
                        </ul>
                    </div>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td style="vertical-align: top;">
            <div class="box">
                <div class="title">
                    <%: Html.Language("ServiceInformation")%></div>
                <div class="container">
                    <div class="content">
                        <ul id="serviceList" class="list clearfix">
                            <% foreach (var service in services)
                               {  %>
                            <li>
                                <%: service %></li>
                            <% } %>
                        </ul>
                    </div>
                </div>
            </div>
        </td>
    </tr>
    <%--<tr>
        <td style="vertical-align: top;">
            <div class="box">
                <div class="title">
                    <%: Html.Language("AbnormityMessage")%></div>
                <div class="container">
                    <div class="content">
                        <ul id="alarmList" class="list clearfix">
                            <% foreach (var abnormity in abnormities)
                               { %>
                            <li>
                                <%: abnormity %></li>
                            <% } %>
                        </ul>
                    </div>
                </div>
            </div>
        </td>
    </tr>--%>

    <tr>
        <td style="height: 40%; vertical-align: top;">
            <table title='<%: Html.Language("AbnormityMessage")%>' id="abnormityMessage"
                class="easyui-datagrid" data-options="
						url: '/RoomStatus/LoadCurrentHostFault/',
						queryParams: { hostID: <%: Model.HostID %> },
						border: true,
						singleSelect: false,
						rownumbers: true,
						striped: true,
						fit: true,
						fitColumns: false,
						idField: 'HostID',
						method: 'post',
						tools:[
							{ iconCls: 'icon-reload', handler: function() { $('#abnormityMessage').datagrid('reload'); } }
						]
					">
                <thead>
                    <tr>
						<th data-options="field:'Address',resizable:false">
							  <%: Html.Language("ReturnAddress")%>
						</th>
						<th data-options="field:'Name',resizable:false">
							 <%: Html.Language("Name")%>
						</th>
						<th data-options="field:'AbnormalStatus',resizable:false,formatter:statusFormatter">
							  <%: Html.Language("Status")%>
						</th>
						<th data-options="field:'StatusDate',resizable:false">
							  <%: Html.Language("StatusDate")%>
						</th>
                        <th data-options="field:'AbnormalElectricQty',align:'center',resizable:false,formatter:electricQtyFormatter">
                            <%: Html.Language("Electricity")%>
                        </th>
						<th data-options="field:'ElectricQtyDate',resizable:false">
							  <%: Html.Language("ElectricQtyDate")%>
						</th>
                        <th data-options="field:'Abnormal3',align:'center',resizable:false">
                            <%: Html.Language("Abnormal3")%>
                        </th>
						<th data-options="field:'Abnormal3Date',resizable:false">
							  <%: Html.Language("Abnormal3Date")%>
						</th>
                        <th data-options="field:'Abnormal4',align:'center',resizable:false">
                            <%: Html.Language("Abnormal4")%>
                        </th>
						<th data-options="field:'Abnormal4Date',resizable:false">
							  <%: Html.Language("Abnormal4Date")%>
						</th>
                        <th data-options="field:'Abnormal5',align:'center',resizable:false">
                            <%: Html.Language("Abnormal5")%>
                        </th>
						<th data-options="field:'Abnormal5Date',resizable:false">
							  <%: Html.Language("Abnormal5Date")%>
						</th>
                    </tr>
                </thead>
            </table>
        </td>
    </tr>

    <%--<tr>
        <td style="vertical-align: top;">
            <div class="box">
                <div class="title">
                    <%: Html.Language("ConnectingRoom")%></div>
                <div class="container">
                    <div class="content">
                        <ul id="" class="list clearfix">
                            <% foreach (var host in connectingRooms)
                               {  %>
                            <li>
                                <%: host.RoomNumber %></li>
                            <% } %>
                        </ul>
                    </div>
                </div>
            </div>
        </td>
    </tr>--%>
    <tr>
        <td style="height: 50%; vertical-align: top;">
            <table title='<%: Html.Language("AirConditioningInformationDisplay")%>' id="air1"
                class="easyui-datagrid" data-options="
						url: '/RoomStatus/LoadHostAirs/', 
						queryParams: { HostID: <%: Model.HostID %> },
						border: true,
						singleSelect: false,
						rownumbers: true,
						striped: true,
						fit: true,
						fitColumns: false,
						idField: 'HostID',
						method: 'post',
						tools:[
							{ iconCls: 'icon-reload', handler: function() { $('#air1').datagrid('reload'); } }
						]
					">
                <thead>
                    <tr>
						<th data-options="field:'ModalAddress',resizable:false">
							  <%: Html.Language("ReturnAddress")%>
						</th>
						<th data-options="field:'Name',resizable:false">
							 <%: Html.Language("Name")%>
						</th>
						<th data-options="field:'Status',align:'center',resizable:false,
							formatter: function(val){
								if(val == 1){
									return lang.Opened;
								} else {
									return lang.Closed;
								}
							}">
							<%: Html.Language("Status")%>
						</th>
                        <th data-options="field:'CurrentTemp',align:'center',resizable:false">
                            <%: Html.Language("CurrentTemperature")%>
                        </th>
                        <th data-options="field:'SettingTemp',align:'center',resizable:false">
                            <%: Html.Language("SetTemperature")%>
                        </th>
						<th data-options="field:'Mode',align:'center',resizable:false,
							formatter: function(val){                            
                                switch (val) {
                                    case 1:
                                        return lang.Refrigeration;
                                    case 2:
                                        return lang.Heating;
                                    case 3:
                                        return lang.BlowingIn;
                                    default:
                                        return '';
                                }
							}">
							<%: Html.Language("Mode")%>
						</th>
						<th data-options="field:'FanSpeed',align:'center',resizable:false,
							formatter: function(val){                            
                                switch (val) {
                                    case 1:
                                        return lang.low;
                                    case 2:
                                        return lang.Middle;
                                    case 3:
                                        return lang.HighSpeed;
                                    default:
                                        return '';
                                }
							}">
							<%: Html.Language("FanSpeed")%>
						</th>
                        <th data-options="field:'Valve',resizable:false">
                            <%: Html.Language("Valve")%>
                        </th>                    
                    </tr>
                </thead>
            </table>
        </td>
    </tr>
</table>
<script type="text/javascript">
    function timeFormatter(val) {
        var hour = Math.floor(val / 60);
        var minute = val % 60;
        return hour + lang.Hour + minute + lang.Minute;
    }
    //格式化异常状态
    function statusFormatter(val) {
        switch (val) {
            case 0:
                return lang.Online;
            case 1:
                return '<font style=' + 'color:red;' + '>' + lang.Offline + '</font>';
            default:
                return "";
        }
    }
    //格式化异常电量
    function electricQtyFormatter(val) {
        if (val == undefined || val === "") {
            return "";
        }
        else if (val < 26) {
            return '<font style=' + 'color:red;' + '>' + val + '%</font>';
        }
        else {
            return val + "%";
        }
    }
</script>
