<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<link type="text/css" rel="stylesheet" href="/Styles/app/air.css" />
<script type="text/javascript" src="/Scripts/jquery.min.js"></script>
<script type="text/javascript" src="/Scripts/avalon.mobile.min.js"></script>
<%@ Import Namespace="WebSite.Controllers" %>
<script type="text/javascript">

    function setAirCondition(HostId, AirId, Type, Status, callback) {
        showLoading();
        $.ajax({
            url: RoomConfig.AirConditionControlUrl,
            type: 'POST',
            async: false,
            dataType: 'JSON',
            data: {
                roomNumber: RoomConfig.RoomNumber,
                hostId: HostId,
                airId: AirId,
                property: Type,
                status: Status
            },
            success: callback
        });
    }

    var vm = avalon.define({
        $id: 'air-panel',
        air: [],
        hostId: '',
        airId: '',
        currentIndex: -1,
        Running: false, /*空调运行状态，0/停止，1/运行*/
        SettingTemp: 0, /*设定温度*/
        Speed: 0, /*风速：0/停止, 1/低速, 2/中速, 3/高速, 4/自动*/
        HightTemp: 35, /*最高温度*/
        LowerTemp: 16, /*最低温度*/
        Mode: 5, /*模式:  1/制冷模式，2/制热模式，4/送风模式，8/除湿模式*/
        hostAir: null,
        airClick: function (index) {
            if (vm.currentIndex == index) {
                return;
            }

            vm.airId = vm.air[index].RoomTypeAirID;
            vm.hostId = vm.air[index].HostID;
            vm.currentIndex = index;

            LoadAirControl(vm.hostId, vm.airId, function (r) {
                if (r != null) {
                    vm.Running = r.Running;
                    vm.SettingTemp = r.SettingTemp;
                    vm.Speed = r.Speed;
                    vm.HightTemp = r.HightTemp;
                    vm.LowerTemp = r.LowerTemp;
                    vm.Mode = r.Mode;
                }
            });
        }, settingAirClick: function (type, val) {
            if (vm.currentIndex == -1) {
                return;
            }
            var status = 0;
            if (type == 'OnOff') {
                vm.Running = !vm.Running;
                status = vm.Running ? 1 : 0;
            } else if (type == 'SettingTemp') {
                if (val == '+') {
                    if (vm.HightTemp >= vm.SettingTemp) {
                        vm.SettingTemp = vm.SettingTemp + 1;
                    } else {
                        return;
                    }

                } else if (val == '-') {
                    if (vm.LowerTemp <= vm.SettingTemp) {
                        vm.SettingTemp = vm.SettingTemp - 1;
                    } else {
                        return;
                    }
                }

                status = vm.SettingTemp;
            } else if (type == 'Mode') {
                vm.Mode = val;
                status = vm.Mode;
            } else if (type == 'Speed') {
                vm.Speed = val;
                status = vm.Speed;
            }
            setAirCondition(vm.hostId, vm.airId, type, status, function (r) {
                if (!r.IsSuccess) {
                    showTip(r.Message);
                }
                hideLoading();
            });
        }
    });
    
    function LoadAirControl(hostID, roomTypeAirID, callback) {
        showLoading();
        $.ajax({
            url: '/App/LoadAirSetting/',
            data: { hostId: hostID, airId: roomTypeAirID },
            type: "POST",
            dataType: "JSON",
            success: callback
        });
    }

    $(function () {
        showLoading();
        $.ajax({
            url: "/App/LoadAirCondition/",
            data: { roomNumber: RoomConfig.RoomNumber },
            type: "POST",
            dataType: "JSON",
            success: function (r) {
                vm.air = r;
                if (vm.air.length > 0) {
                    vm.airId = vm.air[0].RoomTypeAirID;
                    vm.hostId = vm.air[0].HostID;
                    vm.currentIndex = 0;

                    LoadAirControl(vm.hostId, vm.airId, function (r) {
                        if (r != null) {
                            vm.Running = r.Running;
                            vm.SettingTemp = r.SettingTemp;
                            vm.Speed = r.Speed;
                            vm.HightTemp = r.HightTemp;
                            vm.LowerTemp = r.LowerTemp;
                            vm.Mode = r.Mode;
                        }
                        hideLoading();
                    });
                }
                hideLoading();
            }
        });
    }); 

</script>
<div class="air-panel" ms-controller="air-panel">
    <div>
        <ul class="air-list-panel clearfix">
            <li ms-repeat="air"><a href="javascript:void(0)" class="air-btn air-btn-air" ms-class="{{$index == currentIndex? 'selected':''}}"
                ms-click='airClick($index)'>{{el.Name}}</a></li>
        </ul>
    </div>
    <div class="temp-panel">
        <div class="top clearfix">
            <a href="javascript:void(0)" class="air-btn air-btn-power " ms-class="{{Running ? 'selected':''}}"
                ms-click="settingAirClick('OnOff','')"><span class="air-btn-icon air-btn-icon-power">
                </span></a>
        </div>
        <a href="javascript:void(0)" class="air-btn air-btn-temp-down" ms-click="settingAirClick('SettingTemp','-')">
            &lt;</a>
        <div class="air-temp">
            <div style="position: absolute;right: 42%;"><em>℃</em> </div>
            <span><i>SET</i> <strong>{{SettingTemp}}</strong></span>
        </div>
        <a href="javascript:void(0)" class="air-btn air-btn-temp-up" ms-click="settingAirClick('SettingTemp','+')">
            &gt;</a>
        <div class="air-mode-panel">
            <a href="javascript:void(0)" class="air-btn air-btn-mode-cold" ms-class="{{Mode == 1 ? 'selected':''}}"
                ms-click="settingAirClick('Mode','1')"><span class="air-btn-icon air-btn-icon-mode-cold">
                </span></a><a href="javascript:void(0)" class="air-btn air-btn-mode-hot" ms-class="{{Mode == 2 ? 'selected':''}}"
                    ms-click="settingAirClick('Mode','2')"><span class="air-btn-icon air-btn-icon-mode-hot">
                    </span></a>
        </div>
    </div>
    <div class="air-divbtn clearfix">
        <a href="javascript:void(0)" ms-class="{{Speed == 4 ? 'air-auto-open':'air-auto-close'}}">
            <span ms-click="settingAirClick('Speed','4')" style=" position: relative;">
            <i style="position: absolute;bottom: 0;font-style: normal;">AUTO</i>
            </span> </a>
        <a href="javascript:void(0)">
            <span ms-class="{{Speed == 1 ? 'air-low-open':'air-low-close'}}" ms-click="settingAirClick('Speed','1')">
                </span></a>
                <a href="javascript:void(0)"><span ms-class="{{Speed == 2 ? 'air-middle-open':'air-middle-close'}}"
                    ms-click="settingAirClick('Speed','2')"></span></a><a href="javascript:void(0)"><span
                        ms-class="{{Speed == 3 ? 'air-high-open':'air-high-close'}}" ms-click="settingAirClick('Speed','3')">
                    </span></a>
    </div>
</div>
