<script setup>
import { ref, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";

import PageBanner from "@/components/PageBanner.vue";

import featureImg from '@/assets/img/feature.jpg';
import bannerImg from '@/assets/img/pageBanner/p1.jpg';

const { t } = useI18n();

const route = useRoute();
const router = useRouter();

const bannerObj = computed(() => {
  let title, path;

  if( route.path.includes('/social/news') ){
    title = t('Social.news');
    path = t('Social.news');
  }else{
    title = t('Social.activity');
    path = t('Social.activity');
  }

  return {
    "bImg": bannerImg,
    "pageName": t('news'),
    "path": path,
    "title": title
  }
});

const menuList = [
  {
    "name":t('Social.news'), 
    "path":"/social/news"
  },
  {
    "name":t('Social.activity'),
    "path":"/social/activity"
  },
]

const currentRoute = ref('');

onMounted(() => {
  currentRoute.value = route.path;
});

watch(() => route.params,
  (n,o) => {
    currentRoute.value = route.path;
  }
)
</script>

<template>
  <div>
    <div class="main social">
      <PageBanner :item="bannerObj"/>

      <section class="section leftMenu">
        <div class="container">
          <div class="row">
            <div class="col-12 col-lg-auto">			
              <div class="list-group">
                <a class="list-group-item"
                  :class="{ 'active': currentRoute.includes(item.path) }"
                  href="javascript:;" 
                  v-for="(item,index) in menuList" :key="index"
                  @click="router.push(localeLocation(item.path));"
                >
                  {{ item.name }}
                </a>
              </div>
            </div>
            <div class="col-12 col-lg">
              <NuxtPage/>
            </div>
          </div>
        </div>
      </section>
      
      
      <!-- <router-view v-slot="{ Component }">
        <template v-if="$route.meta.keepAlive">
            <KeepAlive>
                <component :is="Component" />
            </KeepAlive>
        </template>
        <template v-else>
            <component :is="Component" />
        </template>
      </router-view> -->
    </div>
  </div>
  
</template>

<style lang="less">

</style>
