@using Edge.WebHost.Models.OnlineMonitor
@model Edge.WebHost.Models.OnlineMonitor.PageNavigationInfo
@{
    int screenWidth = 1280;
}

<div id="PumpsPage_Bottom" style="position: absolute; top:@(635-65)px;width:@(screenWidth)px; height: 65px;">
    <div id="PumpsPage_Bottom_tabs_blank" style="position: relative; float: left; width: 2%; height: 100%;"></div>
    <div id="PumpsPage_Bottom_tabs" style="position: relative; float: left; width: 73%; height: 100%;">
        @{
            string nozzleTablevisibilty = (Model != null && Model.CurrentTab == Operation.NozzleView) ? "visible" : "hidden";
            string nozzleTextcolor = (nozzleTablevisibilty == "visible") ? "white" : "brown";

            string pumpTablevisibilty = (Model == null || Model.CurrentTab == Operation.PumpView) ? "visible" : "hidden";
            string pumpTextcolor = (pumpTablevisibilty == "visible") ? "white" : "brown";

            string chartTablevisibilty = (Model != null && Model.CurrentTab == Operation.ChartView) ? "visible" : "hidden";
            string chartTextcolor = (chartTablevisibilty == "visible") ? "white" : "brown";

            string uploadTablevisibilty = (Model != null && Model.CurrentTab == Operation.UploadView) ? "visible" : "hidden";
            string uploadTextcolor = (uploadTablevisibilty == "visible") ? "white" : "brown";

        }
        <img id="PumpsPage_Bottom_tab_nozzle" src="~/images/onlineMonitor/footer/pagTab.png" style="position: relative; margin-left: 10px; margin-top: 15px;visibility: @nozzleTablevisibilty" />
        <span id="PumpsPage_Bottom_tab_nozzle_text" onclick="TabClicked(this.id)" style="position: absolute; left: 20px; top: 15px; width: 130px; height: 37px; line-height: 37px; text-align: center; color:@nozzleTextcolor; font-size: 22px;">
            油枪查看
        </span>
        <img id="PumpsPage_Bottom_tab_pumps" src="~/images/onlineMonitor/footer/pagTab.png" style="position: relative; margin-left: 10px; margin-top: 15px;visibility: @pumpTablevisibilty" />
        <span id="PumpsPage_Bottom_tab_pumps_text" onclick="TabClicked(this.id)" style="position: absolute; left: @(140 + 2 * 10 + 2 * 10)px; top: 15px; width: 130px; height: 37px; line-height: 37px; text-align: center; color:@pumpTextcolor; font-size: 22px;">
            油机总览
        </span>
        <img id="PumpsPage_Bottom_tab_tables" src="~/images/onlineMonitor/footer/pagTab.png" style="position: relative; margin-left: 10px; margin-top: 15px;visibility: @chartTablevisibilty" />
        <span id="PumpsPage_Bottom_tab_tables_text" onclick="TabClicked(this.id)" style="position: absolute; left: @(2 * 140 + 2 * 10 + 2 * 10)px; top: 15px; width: 130px; height: 37px; line-height: 37px; text-align: center; color:@chartTextcolor; font-size: 22px;">
            图表查询
        </span>
        <img id="PumpsPage_Bottom_tab_upload" src="~/images/onlineMonitor/footer/pagTab.png" style="position: relative; margin-left: 10px; margin-top: 15px;visibility: @uploadTablevisibilty" />
        <span id="PumpsPage_Bottom_tab_upload_text" onclick="TabClicked(this.id)" style="position: absolute; left: @(3 * 140 + 3 * 10 + 3 * 10)px; top: 15px; width: 130px; height: 37px; line-height: 37px; text-align: center; color:@uploadTextcolor; font-size: 22px;">
            数据上传
        </span>
    </div>
    <div id="PumpsPage_Bottom_pages" style="position: relative; float: left; width: 25%; height: 100%;">

        @{
            var pagePointWidth = 16;
            var currentpageMargintop = (65 - pagePointWidth) / 2;
            var marginRight = 40;
        }
        @for (var p = 1; p < 6; p++)
        {
            var currentPageVisible = (p==1)?"visible":"hidden";
            var pageNotShowedVisible = (p == 1) ? "hidden" : "visible";
        <img id="PumpsPage_Bottom_pages_img_@p" src="~/images/onlineMonitor/footer/currentpage.png" style="position:absolute; left:@((pagePointWidth+marginRight)*(p-1))px;margin-top: @(currentpageMargintop)px;visibility: @currentPageVisible;" />
        <img id="PumpsPage_Bottom_pages_notshowed_img_@p" src="~/images/onlineMonitor/footer/notshowed.png" style="position:absolute; left:@((pagePointWidth+marginRight)*(p-1))px;margin-top: @(currentpageMargintop)px; visibility:@pageNotShowedVisible;" />
        }

        @*ShowPreviousPage() must be defined in the view which use this partial page,otherwise the page will crash*@
        <div id="previousPage" onclick="ShowPreviousPage()" style="position: absolute; width: 50%; height: 100%; left: 0px; top: 0px;"></div>
        <div id="nextPage" onclick="ShowNextPage()" style="position: absolute; width: 50%; height: 100%; left:50%; top: 0px;"></div>
    </div>
</div>
<script>
    var imgChart = document.getElementById("PumpsPage_Bottom_tab_tables");
    var imgUpload = document.getElementById("PumpsPage_Bottom_tab_upload");
    if ((imgChart!=null &&imgChart.style.visibility==="visible")||(imgUpload!=null && imgUpload.style.visibility==="visible")) {
        var pagesDiv = document.getElementById("PumpsPage_Bottom_pages");
        if (pagesDiv != null) {
            pagesDiv.style.visibility = "hidden";
            pagesDiv.style.display = "none";
        }
    }
    function TabClicked(tabId) {
        //var tab = document.getElementById(tabId);
        //tab.innerHTML = "Clicked";
        UpdateTabsDisplay(tabId);
        var taburl = "";
        if (tabId === "PumpsPage_Bottom_tab_tables_text")
            taburl = "/OnlineMonitor/Chart";
        //document.location = '@Url.Action("Index","OnlineMonitor",new{tab="ChartView"})';
        else if (tabId === "PumpsPage_Bottom_tab_nozzle_text") {
            taburl = "/OnlineMonitor/Nozzles";
            //document.location = '@Url.Action("Index","OnlineMonitor",new{tab="NozzleView"})';
        }
        else if (tabId === "PumpsPage_Bottom_tab_upload_text")
            taburl = "/OnlineMonitor/Upload";
        //document.location = '@Url.Action("Index","OnlineMonitor",new{tab="UploadView"})';
        else
            taburl = "/OnlineMonitor/Pumps";
        //document.location = '@Url.Action("Index","OnlineMonitor")';

        $.ajax({
            url: taburl,
            success: function(data) {
                $("#online_tabview").html(data);
            }
        });

    }
    function UpdateTabsDisplay(tab) {
        var nozzleTablevisibilty = (tab === "PumpsPage_Bottom_tab_nozzle_text") ? "visible" : "hidden";
        var nozzleTextcolor = (nozzleTablevisibilty === "visible") ? "white" : "brown";

        var pumpTablevisibilty = (tab === "PumpsPage_Bottom_tab_pumps_text") ? "visible" : "hidden";
        var pumpTextcolor = (pumpTablevisibilty === "visible") ? "white" : "brown";

        var chartTablevisibilty = (tab === "PumpsPage_Bottom_tab_tables_text") ? "visible" : "hidden";
        var chartTextcolor = (chartTablevisibilty === "visible") ? "white" : "brown";

        var uploadTablevisibilty = (tab === "PumpsPage_Bottom_tab_upload_text") ? "visible" : "hidden";
        var uploadTextcolor = (uploadTablevisibilty === "visible") ? "white" : "brown";
        if (client != null && client.connected) {
            client.end(true, function (err) {
                if (err != null) {
                    console.log("error happens when call mqtt client end");
                }
            });
            client = null;
        }
        if (document.getElementById("PumpsPage_Bottom_tab_nozzle") !== null && document.getElementById("PumpsPage_Bottom_tab_nozzle_text")) {
            document.getElementById("PumpsPage_Bottom_tab_nozzle").style.visibility = nozzleTablevisibilty;
            document.getElementById("PumpsPage_Bottom_tab_nozzle_text").style.color = nozzleTextcolor;
        }
        if (document.getElementById("PumpsPage_Bottom_tab_pumps") !== null && document.getElementById("PumpsPage_Bottom_tab_pumps_text")) {
            document.getElementById("PumpsPage_Bottom_tab_pumps").style.visibility = pumpTablevisibilty;
            document.getElementById("PumpsPage_Bottom_tab_pumps_text").style.color = pumpTextcolor;
        }
        if (document.getElementById("PumpsPage_Bottom_tab_tables") !== null && document.getElementById("PumpsPage_Bottom_tab_tables_text")) {
            document.getElementById("PumpsPage_Bottom_tab_tables").style.visibility = chartTablevisibilty;
            document.getElementById("PumpsPage_Bottom_tab_tables_text").style.color = chartTextcolor;
        }
        if (document.getElementById("PumpsPage_Bottom_tab_upload") !== null && document.getElementById("PumpsPage_Bottom_tab_upload_text")) {
            document.getElementById("PumpsPage_Bottom_tab_upload").style.visibility = uploadTablevisibilty;
            document.getElementById("PumpsPage_Bottom_tab_upload_text").style.color = uploadTextcolor;
        }
    }
    @*function TabClicked(tabId) {
        //var tab = document.getElementById(tabId);
        //tab.innerHTML = "Clicked";
        if (tabId === "PumpsPage_Bottom_tab_tables_text")
            document.location = '@Url.Action("Index","OnlineMonitor",new{tab="ChartView"})';
        else if (tabId === "PumpsPage_Bottom_tab_nozzle_text")
            document.location = '@Url.Action("Index","OnlineMonitor",new{tab="NozzleView"})';
        else if (tabId === "PumpsPage_Bottom_tab_upload_text")
            document.location = '@Url.Action("Index","OnlineMonitor",new{tab="UploadView"})';
        else
            document.location = '@Url.Action("Index","OnlineMonitor")';

    }*@
</script>