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

import bannerImg from '@/assets/img/pageBanner/p3.jpg';

const { t } = useI18n();
const route = useRoute();
const router = useRouter();

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

  if( route.path.includes('/about/company') ){
    title = t('About.company');
  }else{
    title = t('About.concept');
  }

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

const menuList = [
  {
    "name": t('About.company'),
    "path": "/about/company"
  },
  {
    "name": t('About.concept'),
    "path": "/about/concept"
  },
]

const currentRoute = ref('');

onMounted(() => {
  currentRoute.value = route.path;
  console.log('route', route)
});

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

</script>

<template>
  <div>
    <div class="main about">
      <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">
              <router-view />
            </div>
          </div>
        </div>
      </section>

    </div>
  </div>
</template>

<style lang="less"></style>
