<script setup>
import { getCateList } from '@/api/index.js';

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

import bannerImg from '@/assets/img/product_bg.jpg';

const { t } = useI18n();

const route = useRoute();

const bannerObj = {
  "bImg":bannerImg,
  "pageName":t('products'),
  "path":"",
  "title":t('products')
}

const activeParams = ref({
  "l1":0,
  "l2":0,
  "l3":0,
});

const prodTree = ref([])

onMounted(async () => {
  activeParams.value.l1 = route.params.l1;
  activeParams.value.l2 = route.params.l2;
  activeParams.value.l3 = route.params.l3;

  let res = await useRequest('/index/getCateList');
  if(res.code === 200){
    prodTree.value = res.data;
  } 
});

</script>

<template>
  <div>
    <div class="main products">
      <PageBanner :item="bannerObj"/>
      <section class="section leftMenu">
        <div class="container">
          <div class="row">
            <div class="col-12 col-lg-4 col-xl-3">	
              <client-only>
              <ul class="list-group" v-for="(item,index) in prodTree" :key="index">
                <li class="list-group-item" :class="{ active: index == activeParams.l1 }" v-if="item.children.length>0">
                  <div class="dropdown" :class="{ collapsed: index != activeParams.l1 }" data-bs-toggle="collapse" :data-bs-target="'#me'+index" aria-expanded="false" :aria-controls="'me'+index">{{item.name}}<i class="fa-solid fa-angle-down"></i></div>
                  <div class="dropdown-meun collapse multi-collapse" :class="{ show: index == activeParams.l1 }" :id="'me'+index">
                    <NuxtLinkLocale class="dropdown-item" 
                    :class="{ active: index == activeParams.l1 && i == activeParams.l2 }" 
                    v-for="(clip,i) in item.children" :key="i" 
                    :to="'/products/list/' + clip.id">
                      {{clip.name}}
                    </NuxtLinkLocale>
                  </div>
                </li>
                <li class="list-group-item" :class="{ active: index == activeParams.l1 }"  v-else>{{item.name}}</li>
              </ul>
              </client-only>
            </div>

            <div class="col-12 col-lg-8 col-xl-9">		
              <NuxtPage/>
            </div>
          </div>
        </div>

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

<style lang="less">

</style>
