<script setup lang="ts">
import { computed, ref } from '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 { useRoute } from 'vue-router'
import MyEvent from '@/tools/myEvents.js'

const route = useRoute()
const { locale } = useI18n()
const allList = computed(() => {
	if (locale.value === LangType.zhCn) {
		return listZhCn
	}
	if (locale.value === LangType.zhTw) {
		return listZhTw
	}
	return listEn
})
const data = computed(() => {
	return allList.value.find(item => item.id === Number(route.params.id))
})

const playVideo = (params)=>{
	MyEvent.emit("playVideo",{
		url: params.video,
		poster: params.poster,
	});
}
defineExpose({})
</script>
<template>
	<div class="events">
		<div class="placeholder"></div>
		<section class="detail">
			<div class="content">
				<div class="video" v-if="data?.coverVideo">
					<img :src="data?.posterUrl || data?.coverUrl" alt="">
					<span class="iconfont icon-bofang" @click="playVideo({video: data.coverVideo, poster: data.posterUrl || data.coverUrl})"></span>
				</div>
				<div class="img">
					<img :src="data?.coverUrl" alt="">
				</div>
				<div class="title">
					<h2>{{ data?.title }}</h2>
				</div>
				<div class="info">
					<p v-for="item in data?.infoList">
						{{ item }}
					</p>
				</div>
				<div class="video" v-if="data?.videoUrl">
					<img :src="data?.posterUrl || data?.coverUrl" alt="">
					<span class="iconfont icon-bofang" @click="playVideo({video: data.videoUrl, poster: data.posterUrl || data.coverUrl})"></span>
				</div>
			</div>
		</section>
		<section class="img-group" v-if="data?.urlGroup?.length > 0">
			<div class="content">
				<div v-for="item in data?.urlGroup" :key="item" class="img-item">
					<img v-tween="{ scale: .7, duration: .5 }" :src="item" alt="">
				</div>
			</div>
		</section>
	</div>
</template>
<style lang="less" scoped>
	.events{
		.placeholder{
			height: var(--main-header-height, 100px);
			width: 100%;
			position: sticky;
			top: 0;
			background-color: #000;
		}
		> .detail{
			margin-bottom: 40px;
			> .content{
				margin: 0 auto;
				margin-top: 100px;
				padding: 10px;
				max-width: 740px;
				@media (max-width: 1000px) {
					margin-top: 0px;
				}
				> .img{
					margin-bottom: 20px;
					img{
						width: 100%;
					}
				}
				> .title {
					margin-bottom: 20px;
					> h2{
						font-family: "Poppins", Sans-serif;
						font-weight: 600;
						color: #000000;
						line-height: 1;
						font-size: 24px;
					}
				}
				> .info {
					> p{
						font-family: "Poppins", Sans-serif;
						color: #333333;
						line-height: 1.5;
						font-size: 14px;
						margin: 10px 0;
					}
				}
				> .video{
					position: relative;
					width: 100%;
					> img{
						width: 100%;
						height: 405px;
						object-fit: cover;
					}
					> .icon-bofang{
						font-size: 100px;
						color: #fff;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						animation: identifier 2s ease-in-out infinite;
						// box-shadow: 0 0 10px #fff;
						transition: .3s all;
						cursor: pointer;
						@keyframes identifier {
							0% {
								transform: translate(-50%,-50%) scale(1);
								filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 1));
							}
							50% {
								transform: translate(-50%,-50%) scale(.95);
								filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 1));
							}
							100% {
								transform: translate(-50%,-50%) scale(1);
								filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 1));
							}
						}
					}
				}
			}
		}
		> .img-group{
			> .content{
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				> .img-item{
					aspect-ratio: 3 / 2;
					img{
						width: 100%;
						height: 100%;
						object-fit: cover;
						display: flex;
					}
				}
			}
		}
	}
</style>
