<template>
    <!-- Task -->
    <div class="mx-4">
        <div class="relative flex w-14">
            <span class="font-bold text-black text-sm">{{ t('home.taskCarouse.title') }}</span>
            <img src="@/assets/imgs/sub-title-bg.png" alt="" class="absolute w-[90%] h-full">
        </div>
    </div>
    <!-- Task carouse -->
    <div class="flex flex-row h-56 bg-[#f7f8fa]">
        <swiper :autoplay="autoplayOptions" :allowTouchMove="false" :modules="modules" :loop="true" 
            :breakpoints="breakpoints" :freeMode="true" direction="horizontal" :speed="3000" :observer="true" :observeParents="true">
            <swiper-slide v-for="item in list">
                <div class="" >
                    <div class="w-[150px] h-[150px] rounded-md flex items-center justify-center  flex-col task-item-bg mr-3">
                        <div class="flex items-center justify-center w-full">
                            <img :src="item.picUrl" alt="" class="w-36 h-36">
                        </div>
                    </div>
                    <div class="w-[150px] h-20 flex flex-col items-center justify-center ">
                        <span class="text-sm  text-[#1E1E1E] h-12 w-36 line-clamp-2" v-if="lang==='en-us'">   {{ item.name}}   </span>
                        <span class="text-sm  text-[#1E1E1E] h-12 w-36 line-clamp-2" v-if="lang==='dn-de'">   {{ item.dnDe}}   </span>
                        <span class="text-sm  text-[#1E1E1E] h-12 w-36 line-clamp-2" v-if="lang==='da-dk'">   {{ item.daDk}}   </span>
                        <span class="text-sm  text-[#1E1E1E] h-12 w-36 line-clamp-2" v-if="lang==='pt-pt'">   {{ item.ptPt}}   </span>
                        <span class="text-sm  text-[#1E1E1E] h-12 w-36 line-clamp-2" v-if="lang==='st-st'">   {{ item.stSt}}   </span>
                        <div class="text-[#FF3B30] font-semibold text-sm">${{ item.price }}</div>
                    </div>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/autoplay';
import {listProduct} from '@/api/home'
import { onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const list = ref([])

let lang =  localStorage.getItem("lang")


// 初始化列表
const initList = async () => {
    const res = await listProduct()
    let lang = localStorage.getItem("lang")
    list.value = res
}

onMounted( async () => {
    await initList()
})

const breakpoints = {
    320: {
        slidesPerView: 2,
        spaceBetween: 10,
      },
      375: {
        slidesPerView: 2.5,
        spaceBetween: 10,
      },
      480: {
        slidesPerView: 2.8,
        spaceBetween: 10,
      },
      640: {
        slidesPerView: 3.2,
        spaceBetween: 10,
      },
      768: {
        slidesPerView: 4,
        spaceBetween: 10,
      }
}
const autoplayOptions = {delay: 0, disableOnInteraction: false,}
const modules = [Autoplay]
</script>

<style>
:root {  --swiper-wrapper-transition-timing-function: linear;}
</style>