<%@ page language="VB" masterpagefile="~/Template/Master.master" autoeventwireup="false" inherits="RCC_VPS_VPSUsageReport, MachSol.MachPanel.Web" %>

<asp:Content ID="Content1" ContentPlaceHolderID="CPH_Content" runat="Server">


    <script type="module">

        import { createApp } from 'vue'
        import VPSUsageReport from '/Components/VPS/VPSUsageReport.js?v=3.9'
        import VPSUpTimeReport from '/Components/VPS/VPSUpTimeReport.js?v=3.9'
        import TabContainer from '/Components/Common/TabContainer.js?v=3.9'
        import { getLabelText } from '/Components/Common/utils.js?v=3.9'

        createApp({
            data() {
                return {
                    readOnly: <%= Helper.ReadOnlyRole %>,
                    usageReprtsSortPreference: <%= Newtonsoft.Json.JsonConvert.SerializeObject(UsageReprtsSortPreference) %>,
                    vmUpTimeReprtsSortPreference: <%= Newtonsoft.Json.JsonConvert.SerializeObject(VMUpTimeReprtsSortPreference) %>,
                    globalFromDate: <%= Newtonsoft.Json.JsonConvert.SerializeObject(GlobalFromDate) %>,
                    globalToDate: <%= Newtonsoft.Json.JsonConvert.SerializeObject(GlobalToDate) %>,
                    companyIdFilter: <%= CompanyIdFilter.ToString().ToLower() %>,
                    hideColumnsDueToQuota: <%= HideColumnsDueToQuota.ToString().ToLower() %>,
                    isLoggedInAsCustomer: <%= Helper.IsLoggedInAsCustomer.ToString().ToLower() %>,
                    isLoggedInAsReseller: <%= Helper.IsLoggedInAsReseller.ToString().ToLower() %>,
                    allowVirtualMachinesUsageReportView: <%= Helper.CustomerAccessTemplates.AllowVirtualMachinesUsageReportView.ToString().ToLower() %>,
                    allowVirtualMachinesUpTimeReport: <%= Helper.CustomerAccessTemplates.AllowVirtualMachinesUpTimeReport.ToString().ToLower() %>,
                    currentTab: 0,
                    tabPanels: []
                }
            },
            methods: {
                getLabelText,
                activeTabChanged: function (newTabIndex) {
                    this.currentTab = vueActiveTabChanged(newTabIndex, this.currentTab, this.tabPanels);
                },
            },
            components: {
                TabContainer,
                VPSUsageReport,
                VPSUpTimeReport
            },
            created: function () {

                this.tabPanels = [{ text: this.getLabelText('strVPSUsageReport'), enabled: this.allowVirtualMachinesUsageReportView, hideTabs: [] },
                { text: this.getLabelText('strVPSUpTimeReport'), enabled: this.allowVirtualMachinesUpTimeReport, hideTabs: [] }];
            },
            template: `
<TabContainer :id="'vpsusagereports'" :tabPanels="tabPanels" :activeTabIndex="currentTab" @onActiveTabChanged="activeTabChanged"></TabContainer>

<VPSUsageReport v-if="currentTab == 0" :sortPreference="usageReprtsSortPreference" :companyIdFilter="companyIdFilter.toString()" :readOnly="readOnly"
    :isLoggedInAsCustomer="isLoggedInAsCustomer" :isLoggedInAsReseller="isLoggedInAsReseller" :hideColumnsDueToQuota="hideColumnsDueToQuota" />

<VPSUpTimeReport v-if="currentTab == 1" :sortPreference="vmUpTimeReprtsSortPreference" :globalFromDate="globalFromDate" :globalToDate="globalToDate"
    :isLoggedInAsCustomer="isLoggedInAsCustomer" :isLoggedInAsReseller="isLoggedInAsReseller" />

`
        }).mount('#app')

    </script>

    <div id="app">
    </div>

</asp:Content>
