<template>
  <client-only>
    <div class="c-app">
      <TheSidebar />
      <CWrapper>
        <TheHeader />
        <div class="c-body">
          <main class="c-main">
            <CContainer fluid class="pt-5">
              <transition name="fade" mode="out-in">
                <nuxt :key="$route.path" />
              </transition>
            </CContainer>
          </main>
        </div>
        <TheFooter />
      </CWrapper>
    </div>
  </client-only>
</template>

<script>

import WS_Admin from '@/mixins/WS_Admin'
export default {
  name: 'AdminLayout',
  
  mixins: [WS_Admin],
  middleware: ['auth-admin', 'permissions'],
  data() {
    return {
      subHeaderContent: null
    }
  },
  
  head() {
    return {
      htmlAttrs: {
        lang: 'fa',
        dir: 'rtl'
      },
      title: 'آسان سرویس | مدیریت سایت'
    }
  },
  async mounted() {
    /// /////////////////////////////////////////////////// get products list | provinces | cities
    try {
      // verity request info
      const verityData = {
        url: `/api/GetItem?UserGroupID=${this.$config.VerityUserGroupId}`,
        db: 'verity'
      }
      // panatech request info
      const panatechData = {
        url: `/api/GetItem?UserGroupID=${this.$config.PanatechUserGroupId}`,
        db: 'panatech'
      }

      const allData = await Promise.all([
        // fetch verity products
        this.$axios.post('/api/cross/getRouteManager', verityData),
        // fetch panatech products
        this.$axios.post('/api/cross/getRouteManager', panatechData),
        // fetch iranProvinces
        this.$axios.post('/api/cross/getRouteManager', { url: '/api/GetProvince', db: 'verity' }),
        // fetch iranCities
        this.$axios.post('/api/cross/getRouteManager', { url: '/api/GetCity', db: 'verity' })
      ])

      const verityProducts = allData[0]
      const panatechProducts = allData[1]
      const iranProvinces = allData[2]
      const iranCities = allData[3]

      this.$store.commit('admin/set', ['verityProducts', verityProducts.data.data])
      this.$store.commit('admin/set', ['panatechProducts', panatechProducts.data.data])
      this.$store.commit('admin/set', ['iranProvinces', iranProvinces.data.data])
      this.$store.commit('admin/set', ['iranCities', iranCities.data.data])
    } catch (e) {
      this.$arpaError()
    }
  }
}
</script>

<style lang="scss">
@import '~/sass/admin/style.scss';
</style>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
