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

<asp:Content ID="Content1" ContentPlaceHolderID="CPH_Content" Runat="Server">
    
    <script type="module">

        import { createApp } from 'vue'
        import StatementDetail from '/Components/Billing/StatementDetail.js?v=3.4'
        import TabContainer from '/Components/Common/TabContainer.js?v=3.4'
        import { getLabelText } from '/Components/Common/utils.js?v=3.4'

        createApp({
            data() {
                return {
                    readOnly: <%= Helper.ReadOnlyRole %>,
                    isLoggedInAsReseller: <%= Helper.IsLoggedInAsReseller.ToString().ToLower() %>,
                    globalDateAfter: <%= Newtonsoft.Json.JsonConvert.SerializeObject(DateAfter) %>,
                    globalDateBefore: <%= Newtonsoft.Json.JsonConvert.SerializeObject(DateBefore) %>,
                    sortPreference: <%= Newtonsoft.Json.JsonConvert.SerializeObject(InitialSortPreference) %>,
                    currentTab: 0,
                    tabPanels: [{ text: this.getLabelText('GN00001395'), enabled: true, hideTabs: [] },
                        { text: this.getLabelText('GN00001398'), enabled: false, hideTabs: [] }],
                    paymentGroupId: <%= PaymentGroupId %>,
                    customerId: <%= CustomerId.ToString() %>,
                }
            },
            methods: {
                getLabelText,
                activeTabChanged: function (newTabIndex) {
                    this.currentTab = vueActiveTabChanged(newTabIndex, this.currentTab, this.tabPanels);
                },
            },
            created: function () {
            },
            components: {
                TabContainer,
                StatementDetail
            },
            template: `

<TabContainer :id="'statements'" :tabPanels="tabPanels" :activeTabIndex="currentTab" @onActiveTabChanged="activeTabChanged"></TabContainer>

<StatementDetail v-if="currentTab == 0" :readOnly="readOnly" :sortPreference="sortPreference" :globalDateAfter="globalDateAfter" :globalDateBefore="globalDateBefore"
    :paymentGroupId="paymentGroupId" :customerId="customerId" :isLoggedInAsReseller="isLoggedInAsReseller" />
`
        }).mount('#app')

    </script>

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

</asp:Content>
