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

// import PageBanner from "@/components/PageBanner.vue";
import testimonialImg from '@/assets/img/contact.jpg';

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

const { t } = useI18n();


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

  if( route.path.includes('/contact/form') ){
    title = t('Contact.form');
  }else{
    title = t('Contact.branch');
  }

  return {
    "bImg": testimonialImg,
    "pageName": t('contact'),
    "path": title,
    "title": title
  }
});

const menuList = [
  {
    "name": t('Contact.form'), 
    "path": "/contact/form"
  },
  {
    "name": t('Contact.branch'),
    "path":"/contact/company"
  },
]

const currentRoute = ref('');

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

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

</script>

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

      <section class="section leftMenu">
        <div class="container">
          <div class="row">
            <div class="col-12 col-lg-4 col-xl-3">			
              <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-8 col-xl-9">
                <router-view />                    
            </div>  
          </div>
        </div>
      </section>

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

<style lang="less">

</style>
