<script setup>
import { onMounted } from 'vue';
import useStore from '@/store';
import prodImg from '@/assets/img/noImage.jpg';
import featureImg from '@/assets/img/iStock.jpg';

const { locale } = useI18n()
const localePath = useLocalePath()


const store = useStore();
const router = useRouter();

const { config } = storeToRefs(store);

const bannerData = computed(() => bannerRes.value.data);
const cateData = computed(() => cateRes.value.data);
// const supplierData = computed(() => supplierRes.value.data);

const { data: bannerRes } = await useMyFetch('/index/getBannerList', "GET")
const { data: cateRes } = await useMyFetch('/index/getParentCateList', "GET")
// const { data: supplierRes } = await useMyFetch('/index/getSupplierList', "GET")


onMounted(async () => {
  let swiper1 = new Swiper(".banner .swiper", {
    slidesPerView: 1,
    // effect : 'fade',
    loop: true,
    speed: 2500,
    parallax: true,
    autoplay: {
      delay: 5500,
      disableOnInteraction: false,
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
  });

  let swiper2 = new Swiper(".supplier .swiper", {
    slidesPerView: 1.8,
    // effect : 'fade',
    spaceBetween: 50,
    speed: 2500,
    autoplay: {
      delay: 5500,
      disableOnInteraction: false,
    },
    breakpoints: {
      480: {
        slidesPerView: 2.4,
      },
      768: {
        slidesPerView: 3.6,
      },
      1024: {
        slidesPerView: 4.8,
      },
    },
  });

})

// 至產品頁
const goProd = (cid) => {
  if(cid && cid !== null){
    router.push(localePath('/products/list/' + cid));
  }
}
</script>

<template>
  <div>
    <div class="main index">
      <section class="section banner">
        <div class="swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(banner, index) in bannerData" :key="index">
              <div class="imgCnt d-none d-lg-block"><img :src="banner.imageurl1" alt=""></div>
              <div class="imgCnt d-block d-lg-none"><img :src="banner.imageurl2" alt=""></div>
              <div class="article right">
                <h2 class="title text-white" data-swiper-parallax="-300">
                  {{ banner.slogon }}
                </h2>
                <h5 class="subtitle text-white" data-swiper-parallax="-200">
                  {{ banner.describe }}
                </h5>
                <!-- <h6 class="text text-white" data-swiper-parallax="-100">Activate your life,<br>is our mission statement.</h6> -->
              </div>
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </section>

      <section class="section products">
        <div class="container">
          <div class="content mb-4">
            <div class="secTitle mb-4">{{ $t('productandservice') }} </div>
            <div class="secDesc">
              {{ config[locale].products }}
            </div>
          </div>
          <div class="content shadow p-4">
            <div class="row">
              <div class="col-6 col-lg-3" v-for="(cate,index) in cateData" :key="index" 
              @click="goProd(cate.cid)"
              style="cursor: pointer;"
              >
                  <div class="imgCnt sm shadow">
                    <img :src="cate.imageurl || prodImg" alt="">
                  </div>
                  <div class="title">{{ cate.name }}</div>
              </div>
            </div>
          </div>
          <!-- <div class="moreBtn">MORE</div> -->
        </div>
      </section>

      <section class="section concept">
        <div class="bg"><img :src="featureImg" alt=""></div>
        <div class="container">
          <div class="content" >
            <div class="ck-content" v-html="config[locale].development">
            </div>
          </div>
        </div>
      </section>

      <!-- <section class="section supplier">
        <div class="container-fluid">
          <div class="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(supplier, index) in supplierData" :key="index">
                <div class="imgCnt"><img :src="supplier.imageurl" :alt="supplier.name"></div>
              </div>
            </div>
          </div>
        </div>
      </section> -->
    </div>
  </div>
</template>

