<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 = {
  "bImg":bannerImg,
  "pageName":t('aboutus'),
  "path": t('about.company'),
  "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>
