<template>
	<div style="height: 100%;width: 100%;">
		<!-- Swiper 容器 -->
		<swiper class="swiper-container h-full" v-bind="swiperOptions" @swiper="onSwiper" @slideChange="onSlideChange">
			<!-- 第一个滑块 -->
			<swiper-slide class="swiper-slide-a flex flex-col items-center justify-center text-white" :style="{
				backgroundImage: `url(${bgImage})`,
				backgroundPosition: 'center center',
				backgroundRepeat: 'no-repeat',
				backgroundSize: '100% 100%',
			}">
				<div class="ani text-xl font-light tracking-[0.3em]" swiper-animate-effect="fadeInUp"
					swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
					{{ $t('index_name') }}
				</div>
				<div class="ani w-[45%] h-px bg-white my-5" swiper-animate-effect="fadeInUp"
					swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
				</div>
				<div class="text-3xl font-semibold ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s"
					swiper-animate-delay="0.4s">{{ $t('index_main') }}</div>
				<div class="w-[45%] h-px bg-white my-5 ani" swiper-animate-effect="fadeInUp"
					swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"></div>
				<div class="text-lg font-light ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s"
					swiper-animate-delay="0.3s">{{ $t('index_get_to') }}</div>
				<div class="array" style=" margin-top: 50px;">
					<img style="width: 50px;height: 50px;" src="/images/group9.png">
				</div>
				<!-- 社交图标 -->
				<div class="absolute bottom-[42px] w-full ani" swiper-animate-effect="fadeInUp"
					swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
					<div class="flex justify-center w-full">
						<img @click="shareToInstagram" src="/images/group11.png"
							class="w-[30px] h-[30px] cursor-pointer">
						<span class="mx-[17px] border-r-2 border-white h-[30px] mb-[-12px]"></span>
						<img @click="shareToYoutube" src="/images/group14.png" class="w-[30px] h-[30px] cursor-pointer">
						<span class="mx-[17px] border-r-2 border-white h-[30px] mb-[-12px]"></span>
						<img @click="shareToInstagram" src="/images/group13.png"
							class="w-[30px] h-[30px] cursor-pointer">
						<span class="mx-[17px] border-r-2 border-white h-[30px] mb-[-12px]"></span>
						<img @click="shareToYoutube" src="/images/group12.png" class="w-[30px] h-[30px] cursor-pointer">
					</div>

					<!-- 导航链接 -->
					<div class="w-[45%] h-[2px] bg-white mx-auto my-5"></div>
					<div class="flex w-1/2 justify-around mx-auto">
						<NuxtLink to="/about" class="text-white">{{ $t('index_about') }}</NuxtLink>
						<NuxtLink to="/services" class="text-white">{{ $t('index_services') }}</NuxtLink>
						<NuxtLink to="/clients" class="text-white">{{ $t('index_clients') }}</NuxtLink>
						<NuxtLink to="/news" class="text-white">{{ $t('index_news') }}</NuxtLink>
						<NuxtLink to="/contact" class="text-white">{{ $t('index_contact') }}</NuxtLink>
					</div>
				</div>
			</swiper-slide>

			<!-- 第二个滑块 -->
			<swiper-slide class="swiper-slide-a text-white" :style="{
				backgroundImage: `url(${bgImage2})`,
				backgroundPosition: 'center center',
				backgroundRepeat: 'no-repeat',
				backgroundSize: '100% 100%',
				height: '100%'
			}">
				<div class="px-[150px]">
					<div class="flex items-center text-left">
						<div class="w-1/2">
							<h2 class="text-3xl t1 inline-block ani" swiper-animate-effect="fadeInUp"
								swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">{{ $t('index_m1') }}</h2>
							<h4 class="text-lg mt-10 leading-[35px] ani" swiper-animate-effect="fadeInUp"
								swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">{{ $t('index_m2') }}</h4>
							<div class="w-[18%] h-[2px] bg-white my-5 ani" swiper-animate-effect="fadeInUp"
								swiper-animate-duration="0.5s" swiper-animate-delay="0.1s"></div>
							<div class="flex items-center ani" swiper-animate-effect="fadeInUp"
								swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
								<NuxtLink to="/content" class="text-white">{{ $t('index_m3') }}</NuxtLink>
								<img src="/images/group7.png" alt="">
							</div>
						</div>
						<div class="w-1/2 text-center ani" swiper-animate-effect="fadeInUp"
							swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
							<img src="/images/maskgroup.png" class="w-[400px] mx-auto">
						</div>
					</div>
					<div class="w-full h-px bg-white my-10"></div>
				</div>

				<div class="flex w-full justify-center">
					<div class="w-[205px] ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
						swiper-animate-delay="0.1s">
						<h4 class="t2 text-xl font-semibold">{{ $t('index_m4') }}</h4>
						<div class="mt-[15px] leading-[26px] tracking-[1px]">{{ $t('index_m4_1') }}</div>
					</div>
					<span class="mx-[60px] -mb-3 border-r-2 border-white h-[145px] inline-block ani"
						swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
						swiper-animate-delay="0.1s"></span>
					<div class="w-[205px] ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
						swiper-animate-delay="0.1s">
						<h4 class="t2 text-xl font-semibold">{{ $t('index_m5') }}</h4>
						<div class="mt-[15px] leading-[26px] tracking-[1px]">{{ $t('index_m5_1') }}</div>
					</div>
					<span class="mx-[60px] -mb-3 border-r-2 border-white h-[145px] inline-block ani"
						swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
						swiper-animate-delay="0.1s"></span>
					<div class="w-[205px] ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
						swiper-animate-delay="0.1s">
						<h4 class="t2 text-xl font-semibold">{{ $t('index_m6') }}</h4>
						<div class="mt-[15px] leading-[26px] tracking-[1px]">{{ $t('index_m6_1') }}</div>
					</div>
				</div>

				<div class="array absolute bottom-[50px]">
					<img class="w-[50px] h-[50px]" src="/images/group9.png" alt="">
				</div>

				<div class="absolute bottom-42 px-4 flex justify-between items-center right-2 ">
					<div class="float-left flex">
						<img src="/images/group191.png" class="h-full mt-[10px]">
						<span class="ml-2 box2ybs1">{{ $t('index_m7') }}</span>
						<span class="mx-4 box2ybs2"></span>
					</div>
					<div class="float-right text-center">
						<img @click="scrollToTop" src="/images/group97.png" class="w-[35px] h-[35px] cursor-pointer">
						<div class="w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
						<img @click="shareToInstagram" src="/images/group11.png"
							class="w-[35px] h-[35px] cursor-pointer">
						<div class="w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
						<img @click="shareToYoutube" src="/images/group14.png" class="w-[35px] h-[35px] cursor-pointer">
						<div class="w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
						<img @click="shareToFacebook" src="/images/group13.png"
							class="w-[35px] h-[35px] cursor-pointer">
						<div class="w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
						<img @click="shareToX" src="/images/group12.png" class="w-[35px] h-[35px] cursor-pointer">
					</div>
				</div>
			</swiper-slide>



			<!-- 第三个滑块 -->
			<swiper-slide class="swiper-slide-a" :style="{
				height: '100%'
			}">
				<h3 class="t3 text-2xl font-semibold ani" swiper-animate-effect="fadeInUp"
					swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">{{ $t('index_s1') }}</h3>
				<div class="w-1/2 mt-[30px] text-sm text-[#606060] text-center ani" swiper-animate-effect="fadeInUp"
					swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
					{{ $t('index_s2') }}
				</div>
				<div class="px-[150px] py-5">
					<div class="flex">
						<div class="relative ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
							swiper-animate-delay="0.1s">
							<img src="/images/group160.png" class="w-[80%] mx-auto">
							<div class="absolute left-[65px] bottom-[20px] text-xl text-white">
								{{ $t('index_s3') }}
							</div>
						</div>
						<div class="relative ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
							swiper-animate-delay="0.1s">
							<img src="/images/group161.png" class="w-[80%] mx-auto">
							<div class="absolute left-[65px] bottom-[20px] text-xl text-white">
								{{ $t('index_s4') }}
							</div>
						</div>
						<div class="relative ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
							swiper-animate-delay="0.1s">
							<img src="/images/group162.png" class="w-[80%] mx-auto">
							<div class="absolute left-[65px] bottom-[20px] text-xl text-white">
								{{ $t('index_s5') }}
							</div>
						</div>
					</div>
					<div class="w-full h-px bg-[#1C1C1C] my-5"></div>
				</div>

				<div class="flex items-center ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
					swiper-animate-delay="0.1s">
					<NuxtLink to="/content" class="text-[#0c1923]">{{ $t('index_m3') }}</NuxtLink>
					<img src="/images/group7-1.png" alt="">
				</div>

				<div class="array absolute bottom-[50px]">
					<img class="w-[50px] h-[50px]" src="/images/group40.png" alt="">
				</div>

				<div class="absolute bottom-42 px-4 flex justify-between items-center right-2">
					<div class="float-left flex">
						<img src="/images/group194.png" class="h-full mt-[10px]">
						<div style="width: 100px;">
							<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB]">{{ $t('index_contact') }}
							</div>
							<div class="box3zx1"></div>
							<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB]">{{ $t('index_news') }}</div>
							<div class="box3zx1"></div>
							<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB]">{{ $t('index_about') }}
							</div>
							<div class="box3zx1"></div>
							<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB]">{{ $t('index_services') }}
							</div>
							<div class="box3zx1"></div>
							<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB]">{{ $t('index_clients') }}
							</div>
						</div>
						<span class="mx-4 box2ybs3"></span>
					</div>
					<div class="float-right text-center">
						<img @click="scrollToTop" src="/images/group97-1.png" class="w-[35px] h-[35px] cursor-pointer">
						<div class="w-[33px] h-[2px] bg-[#A8CBFF] mx-auto my-2"></div>
						<img @click="shareToInstagram" src="/images/group11-1.png"
							class="w-[35px] h-[35px] cursor-pointer">
						<div class="w-[33px] h-[2px] bg-[#A8CBFF] mx-auto my-2"></div>
						<img @click="shareToYoutube" src="/images/group14-1.png"
							class="w-[35px] h-[35px] cursor-pointer">
						<div class="w-[33px] h-[2px] bg-[#A8CBFF] mx-auto my-2"></div>
						<img @click="shareToFacebook" src="/images/group13-1.png"
							class="w-[35px] h-[35px] cursor-pointer">
						<div class="w-[33px] h-[2px] bg-[#A8CBFF] mx-auto my-2"></div>
						<img @click="shareToX" src="/images/group12-1.png" class="w-[35px] h-[35px] cursor-pointer">
					</div>
				</div>
			</swiper-slide>
			<!-- 第四个滑块 -->
			<swiper-slide class="swiper-slide-a" :style="{
				backgroundImage: `url('/images/group159.png')`,
				backgroundPosition: 'center center',
				backgroundRepeat: 'no-repeat',
				backgroundSize: '100% 100%',
				height: '100%',
				color: '#000000',
				textAlign: 'left'
			}">
				<div class="flex justify-center">
					<div class="w-[30%]">
						<h2 class="ani t4 text-3xl" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"
							swiper-animate-delay="0.1s">{{ $t('index_a1') }}</h2>
						<div class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"
							swiper-animate-delay="0.1s"
							style="line-height: 25px;margin-top: 30px;color: #606060;font-size: 14px;">{{ $t('index_a2')
							}}
						</div>
						<div class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"
							swiper-animate-delay="0.1s"
							style="width: 100%; height: 1px; background-color: #F1F1F1; margin: 20px auto;"></div>
						<div class="ani flex items-center justify-end" swiper-animate-effect="fadeInLeft"
							swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
							<div>
								<NuxtLink to="/content" class="text-[#0c1923]">{{ $t('index_m3') }}</NuxtLink>
							</div>
							<div>
								<img src="/images/group6.png" class="w-5 ml-[5px]">
							</div>
						</div>
					</div>
					<div class="w-[45%]"></div>
				</div>
				<div class="box2yb absolute px-4 bottom-42 right-2">
					<div class="box2yb191 float-left pr-[14px] flex">
						<img src="/images/group191.png" class="h-full mt-[10px]">
						<span class="box2ybs1">{{ $t('index_m7') }}</span>
						<span class="box2ybs2 border-r-2 border-[#DEDEDE]"></span>
					</div>
					<div class="box1ybi float-right">
						<img class="back-to-top py-[6px] cursor-pointer" src="/images/group97.png" @click="scrollToTop">
						<div class="box1ybz"></div>
						<img @click="shareToInstagram" src="/images/group11.png" class="py-[6px] cursor-pointer">
						<div class="box1ybz"></div>
						<img @click="shareToYoutube" src="/images/group14.png" class="py-[6px] cursor-pointer">
						<div class="box1ybz"></div>
						<img @click="shareToFacebook" src="/images/group13.png" class="py-[6px] cursor-pointer">
						<div class="box1ybz"></div>
						<img @click="shareToX" src="/images/group12.png" class="py-[6px] cursor-pointer">
					</div>
				</div>
				<div class="array absolute bottom-[50px]">
					<img class="w-[50px] h-[50px]" src="/images/group40.png">
				</div>
			</swiper-slide>
			<!--第五个滑块-->
			<swiper-slide class="swiper-slide-a">
				<div class="flex justify-center items-center w-full">
					<div class="w-[40%] text-right">
						<img id="img1" :src="leftImg" class="w-[80%] border-r-[10px] border-[#214ADB] inline-block">
					</div>
					<div class="w-[44%] text-left pl-5">
						<h2 class="text-2xl font-bold">{{ $t('index_n1') }}</h2>
						<div class="my-[20px]">{{ $t('index_n2') }}</div>
						<div class="h-[1px] w-[150px] bg-[#0c1923]"></div>
						<div class="flex mt-[10px]">
							<div><NuxtLink to="/content" class="text-[#0c1923]">{{ $t('index_m3') }}</NuxtLink></div>
							<div>
								<img src="/images/group7-1.png" class="w-5 ml-[5px]">
							</div>
						</div>
						<div class="news_padd flex items-center">
							<img id="swipen_next" src="/images/group10.png" class="w-[30px] cursor-pointer" @click="nextNews">
							<swiper class="swiper-container h-full"  @swiper="onSwiperNews" v-bind="swiperOptionsNews" >
								<swiper-slide  v-for="(item, index) in newsList" :key="index"  :virtualIndex="index" class="swiper-wrapper w-full">
									<!-- 这里可以使用v-for循环渲染新闻列表 -->
									<div class="swiper-slide">
										<div class="text-center">
											<h3 class="font-semibold text-2xl line-clamp-1">
												<a :href="item.url" target="_blank" class="text-[#0c1923]">
													{{ item.title }}
												</a>
											</h3>
											<h5 class="text-[#606060] mt-[25px] leading-[25px] line-clamp-2">
												<a :href="item.url" target="_blank" class="text-[#0c1923]">
													{{ item.synopsis }}
												</a>
											</h5>
										</div>
									</div>
								</swiper-slide>
							</swiper>
							<img id="swipen_prev" src="/images/group9-1.png" class="w-[30px] cursor-pointer" @click="prevNews">
						</div>
						<div class="w-full h-[1px] bg-black mt-3"></div>
					</div>
				</div>
				<div class="absolute right-[10px]">
					<div class="box2yb191 float-left pr-[14px] flex">
						<img src="/images/group194.png" class="h-full mt-[10px]">
						<span class="box2ybs4 text-[#175FCB]">Navigation</span>
						<span class="box2ybs5 border-r-[2px] border-[#A8CBFF]"></span>
					</div>
					<div class="box1ybi float-right">
						<img class="back-to-top py-[6px] cursor-pointer" src="/images/group97-1.png" @click="scrollToTop">
						<div class="box1ybz"></div>
						<img @click="shareToInstagram" src="/images/group11-1.png" class="py-[6px] cursor-pointer">
						<div class="box1ybz"></div>
						<img @click="shareToYoutube" src="/images/group14-1.png" class="py-[6px] cursor-pointer">
						<div class="box1ybz"></div>
						<img @click="shareToFacebook" src="/images/group13-1.png" class="py-[6px] cursor-pointer">
						<div class="box1ybz"></div>
						<img @click="shareToX" src="/images/group12-1.png" class="py-[6px] cursor-pointer">
					</div>
				</div>
			</swiper-slide>
		</swiper>
	</div>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { nextTick, ref } from 'vue'
import 'swiper/css'
import { Mousewheel, Navigation } from 'swiper/modules'
import 'swiper/css/mousewheel'
import 'swiper/css/navigation'
import * as swiperAni from '@/assets/animate/animate.js'
import $api from '@/service/webRequest'

// 新闻数据
const leftImg = ref();
const newsList = ref([])
onMounted(() => {
	getNewsList();
})
const getNewsList = () => {
  $api.get("/api/article/new/list")
    .then((res: any) => {
		console.log(res)
      newsList.value = res.data.data
	  leftImg.value = res.data.data[0].image_input[0]
    })
    .catch((err) => {
      console.dir(err)
    })
}
// 导入背景图片
const bgImage = 'images/Group157.png'

// 添加第二个背景图片
const bgImage2 = '/images/Group157.png'

// Swiper实例
let swiperInstance: any = null

// 新闻轮播实例
let newsSwiper: any = null


// 新闻轮播控制
const nextNews = () => {
  if (newsSwiper) {
    newsSwiper.slideNext()
  }
}

const prevNews = () => {
  if (newsSwiper) {
    newsSwiper.slidePrev()
  }
}

// Swiper配置
const swiperOptions = {
	direction: 'vertical',
	slidesPerView: 1,
	speed: 700,
	mousewheel: true,
	loop: false,
	modules: [Mousewheel],
}
// Swiper配置
const swiperOptionsNews = {
	direction: 'horizontal',
	slidesPerView: 1,
	speed: 700,
	mousewheel: true,
	loop: false,
	modules: [Mousewheel, Navigation],
	navigation: {
		nextEl: '#swipen_next',
		prevEl: '#swipen_prev',
	},
}
const onSwiperNews = (swiper: any) => {
	newsSwiper = swiper
}
const onSwiper = (swiper: any) => {
	swiperInstance = swiper
	// 初始化完成开始动画
	nextTick(() => {
		swiperAni.swiperAnimateCache(swiper); // 隐藏动画元素
		swiperAni.swiperAnimate(swiper); // 初始化完成开始动画
	})
}

const onSlideChange = () => {
	// 处理滑块切换
	if (swiperInstance) {
		//console.log('slide change')
		setTimeout(() => {
			swiperAni.swiperAnimate(swiperInstance); // 每个slide开始切换时也运行当前slide动画
		}, 300)
	}
}

// 社交分享功能
const shareToInstagram = () => {
	// 实现Instagram分享
}

const shareToYoutube = () => {
	// 实现YouTube分享
}

const shareToFacebook = () => {
	// 实现Facebook分享
}

const shareToX = () => {
	// 实现X/Twitter分享
}

// 添加回到顶部功能
const scrollToTop = () => {
	if (swiperInstance) {
		swiperInstance.slideTo(0)
	}
}
</script>

<style lang="scss" scoped>
@import "@/assets/animate/animate.min.css";

.swiper-slide-a {
	text-align: center;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 20px, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.animate-fadeInUp {
	animation: fadeInUp 0.5s ease-out forwards;
}

.array {
	animation: start 1.5s infinite ease-in-out;
}

@keyframes start {

	0%,
	30% {
		opacity: 0;
		transform: translate(0, -8px);
	}

	60% {
		opacity: 1;
		transform: translate(0, 0);
	}

	100% {
		opacity: 0;
		transform: translate(0, 10px);
	}
}

@keyframes zoomIn {
	from {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}

	50% {
		opacity: 1;
	}
}

.animate-zoomIn {
	animation: zoomIn 0.5s ease-out forwards;
}

.t1::after {
	content: '';
	margin-top: -13px;
	width: 205px;
	height: 20px;
	background: #175FCB;
	display: block;
}

.t2::after {
	content: '';
	width: 100px;
	height: 20px;
	background: #175FCB;
	display: block;
	margin: 0 auto;
	margin-top: -13px;
}

.box2ybs1 {
	writing-mode: vertical-rl;
	transform: rotate(360deg);
	padding-right: 20px;
	color: #DEDEDE;
	letter-spacing: 5px;
	text-align: center;
}

.box2ybs2 {
	margin-left: -14px;
	display: inline-block;
	height: 224px;
	margin-top: 10px;
	border-right: 2px solid #DEDEDE;
}

.box2ybs3 {
	margin-left: -7px;
	border-right: 2px solid #A8CBFF;
	display: inline-block;
	height: 224px;
	margin-top: 10px;
}
.box2ybs4 {
	writing-mode: vertical-rl;
	transform: rotate(360deg);
	padding-right: 20px;
	letter-spacing: 5px;
	text-align: center;
}
.box2ybs5 {
	margin-left: -14px;
	display: inline-block;
	height: 224px;
	margin-top: 10px;
}
.box3zx1 {
	width: 33px;
	height: 2px;
	border-top: solid #A8CBFF;
	margin: 15px auto;
}

.t3::after {
	content: '';
	width: 350px;
	height: 20px;
	background: #A8CBFF;
	display: block;
	margin: 0 auto;
	margin-top: -13px;
}
.t4::after {
    content: '';
    width: 100px;
    height: 20px;
    background: #A3C8FF;
    display: block;
    margin-top: -13px;
}
// 如果你有其他需要不同延迟的元素，可以添加更多类
.delay-700 {
	animation-delay: 700ms;
}
.t5::after {
  content: '';
  width: 100px;
  height: 20px;
  background: #214ADB;
  display: block;
  margin-top: -13px;
}

.box1ybz {
  width: 33px;
  height: 2px;
  background-color: #A8CBFF;
  margin: 2px auto;
}

.news_padd {
  margin-top: 20px;
  height: 110px;
}
</style>
