103 lines
3.3 KiB
Vue
103 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { SplideSlide } from '@splidejs/vue-splide'
|
|
import {
|
|
getComponentContainer,
|
|
getComponentGroupAry,
|
|
getComponentGroup,
|
|
hasComponentGroup,
|
|
} from '#layers/utils/dataUtil'
|
|
import type {
|
|
PageDataTemplateComponents,
|
|
PageDataTemplateComponent,
|
|
} from '#layers/types/api/pageData'
|
|
|
|
interface Props {
|
|
components: PageDataTemplateComponents
|
|
pageVerTmplSeq: number
|
|
pageVerTmplNameEn: string
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const { getCurrentSrc } = useResponsiveSrc()
|
|
|
|
const currentSlideIndex = ref<number | null>(null)
|
|
|
|
const slideData = computed(() => {
|
|
return getComponentContainer(props.components, 'group_sets', {
|
|
maxLength: 10,
|
|
})
|
|
})
|
|
const thumbnailData = computed(() => {
|
|
return slideData.value
|
|
.map(item => item?.pagenaviThumbnail?.groups?.[0])
|
|
.filter((group): group is NonNullable<typeof group> => group != null)
|
|
})
|
|
const arrowsData = computed(() => {
|
|
return getComponentGroupAry(props.components, 'arrow')
|
|
})
|
|
const paginationData = computed(() => {
|
|
return getComponentGroupAry(props.components, 'pagination')
|
|
})
|
|
|
|
const getVideoSrc = (item: PageDataTemplateComponent) => {
|
|
const videoData = getComponentGroup(item, 'video')
|
|
return getCurrentSrc(videoData)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="section-standard">
|
|
<WidgetsSlideThumbnail
|
|
v-model:index="currentSlideIndex"
|
|
:thumbnail-data="thumbnailData"
|
|
:pagination-data="paginationData"
|
|
:arrows-data="arrowsData"
|
|
:analytics-sarea="props.pageVerTmplNameEn"
|
|
>
|
|
<SplideSlide v-for="(item, index) in slideData" :key="index">
|
|
<WidgetsBackground
|
|
v-if="hasComponentGroup(item, 'background')"
|
|
:resources-data="getComponentGroup(item, 'background')"
|
|
:video-play="currentSlideIndex === index"
|
|
/>
|
|
<WidgetsBackground
|
|
v-if="hasComponentGroup(item, 'foreground')"
|
|
:resources-data="getComponentGroup(item, 'foreground')"
|
|
/>
|
|
<div
|
|
class="content-standard mx-auto items-start pt-[48px] max-w-[375px] sm:max-w-[415px] md:max-w-[1024px] md:pt-0"
|
|
>
|
|
<WidgetsSubTitle
|
|
v-if="hasComponentGroup(item, 'category')"
|
|
:resources-data="getComponentGroup(item, 'category')"
|
|
class="title-xs max-w-[540px] mb-2 text-left md:mb-5"
|
|
/>
|
|
<WidgetsMainTitle
|
|
v-if="hasComponentGroup(item, 'mainTitle')"
|
|
:resources-data="getComponentGroup(item, 'mainTitle')"
|
|
class="title-lg max-w-[540px] text-left"
|
|
/>
|
|
<WidgetsSubTitle
|
|
v-if="hasComponentGroup(item, 'subTitle')"
|
|
:resources-data="getComponentGroup(item, 'subTitle')"
|
|
tag="p"
|
|
class="title-md max-w-[540px] mt-1 text-left"
|
|
/>
|
|
<WidgetsDescription
|
|
v-if="hasComponentGroup(item, 'description')"
|
|
:resources-data="getComponentGroup(item, 'description')"
|
|
class="max-w-[540px] mt-2 text-left md:mt-5"
|
|
/>
|
|
<AtomsVideo
|
|
v-if="hasComponentGroup(item, 'video')"
|
|
:src="getVideoSrc(item)"
|
|
:play="currentSlideIndex === index"
|
|
class="aspect-[16/10] w-[258px] mt-8 md:w-[496px] md:mt-10"
|
|
/>
|
|
</div>
|
|
</SplideSlide>
|
|
</WidgetsSlideThumbnail>
|
|
</section>
|
|
</template>
|