<script setup lang="ts">
import { computed, ref } from 'vue'
import Swiper from './swiper.vue'
import AllEvents from './all-events.vue'
import listEn from './list-en.js'
import listZhCn from './list-zh-cn.js'
import listZhTw from './list-zh-tw.js'
import { LangType } from '../../lang'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
const { locale } = useI18n()
const router = useRouter()
const allList = computed(() => {
	if (locale.value === LangType.zhCn) {
		return listZhCn
	}
	if (locale.value === LangType.zhTw) {
		return listZhTw
	}
	return listEn
})
const swiperList = computed(() => {
	return allList.value.slice(0, 5)
})
const goDetail = (item) => {
	router.push({
		path: `/events/${item.id}`,
	})
}
defineExpose({})
</script>
<template>
	<div class="events">
		<div class="placeholder"></div>
		<Swiper :list="swiperList" @clickItem="goDetail" />
		<AllEvents :list="allList" @clickItem="goDetail" />
	</div>
</template>
<style lang="less" scoped>
	.events{
		.placeholder{
			height: var(--main-header-height, 100px);
			width: 100%;
			position: sticky;
			top: 0;
			background-color: #000;
		}
	}
</style>
