<template>
    <div class="container_fluid">
        <WM-PageTitle TitleFa=" مدیریت سفارشات " TitleEn=" Orders Management " Color="orange darken-3" TitleFaClass="WM-Color-Black"></WM-PageTitle>
        <v-alert :value="true" color="grey lighten-2" dismissible outline>
            <WM-PartTitle class="WM-Margin-T-20" TitleFa=" خلاصه ای از آمار " TitleEn=" Statistics Summery " ThemeColor="Orange" TextFaColor="black--text"></WM-PartTitle>
            <v-layout row wrap class="WM-Margin-T-20">
                <v-flex xs12 sm6 md4> <DoughnutChart :height="280"></DoughnutChart> </v-flex>
                <v-flex xs12 sm6 md8> <LineChart :height="380" Title=" فروش در 30 روز گذشته "></LineChart> </v-flex>
            </v-layout>
        </v-alert>

        <ul class="nav nav-tabs WM-Margin-T-20" id="WMTabs">
            <template v-for="(Tab, index) in Tabs">
                <component :is="Tab.Type" :TitleFa="Tab.NameFa" :TitleEn="Tab.NameEn" :Status="Tab.Status" :Quantity="Tab.Quantity" :SubItems="Tab.SubItems" :TabContent="index" Color="Orange"></component>
            </template>
        </ul>


        <div class="tab-content">
            <div class="tab-pane container-fluid active" id="OngoingOrders">
                <WM-PartTitle class="WM-Margin-T-20" TitleFa=" تمام سفارشات " TitleEn=" All Orders " Color="orange darken-3"></WM-PartTitle>
                <OrderFilters class="WM-Margin-T-20"></OrderFilters>
                <OrderItems class="WM-Margin-T-20"></OrderItems>

            </div>
            <div class="tab-pane container fade" id="CompletedOrders">  </div>
        </div>

        <template>
            <div class="text-xs-center ">
                <OrderDetailsModal></OrderDetailsModal>
                <!-- <SendEmailModal></SendEmailModal>
                <SendSMSModal></SendSMSModal> -->
            </div>
        </template>

    </div>

</template>



<script>
import TabItem from "@Global/components/Misc/TabItem.vue";
import TabDropdownItem from "@Global/components/Misc/TabDropdownItem.vue";
import DoughnutChart from '@Global/components/Charts/DoughnutChart.vue';
import LineChart from '@Global/components/Charts/LineChart.vue';

import OrderItems from '@Global/components/Orders/Items.vue';
import OrderFilters from '@Global/components/Orders/Filters.vue';
import OrderDetailsModal from "@Global/components/Orders/Modal-Details.vue";

// import SendEmailModal from "@Global/components/Contact/Modal-SendEmail.vue";
// import SendSMSModal from "@Global/components/Contact/Modal-SendSMS.vue";


export default {
    components: {
        TabItem,
        TabDropdownItem,
        DoughnutChart,
        LineChart,
        OrderItems,
        OrderDetailsModal,
        OrderFilters,
        // SendEmailModal,
        // SendSMSModal
    },
    data: function ()  {
        return {
            Tabs: {
                AllOrders: {
                    Type: 'TabItem',
                    NameFa: ' تمام سفارشات ',
                    NameEn: ' All Orders ',
                    Status: 'Active',
                    Quantity: 152
                },
                OngoingOrders: {
                    Type: 'TabItem',
                    NameFa: ' سفارشات در حال انجام ',
                    NameEn: ' Ongoing Orders ',
                    Quantity: 5
                },
                CompletedOrders: {
                    Type: 'TabItem',
                    NameFa: ' سفارشات انجام شده ',
                    NameEn: ' Completed Orders ',
                    Quantity: 42
                },
            },

        }
    },
};


</script>
