<template>
	<div style="width: 100%;">
		<!-- Swiper 容器 -->
		<div class="group_666" style="position: relative;height: 219px;">
			<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
				<swiper-slide>
					<img :src="`/img/index/homebg.png`" style="width: 100%;height: 100%;object-fit: cover;">
					<!-- <div style="position: absolute;bottom: 30px;right:30px;">
						<img :src="`/img/index/hmouse.png`" alt="">
					</div> -->
				</swiper-slide>
			</swiper>
		</div>
		<div class="group_2 flex-col">
			<div class="box_2 flex-col">
				<div class="group_3" >
					<div class="group_4 flex-col">
						<div class="fly" >
							<div class="re_box">
								<span class="w-[100%] text_14" style="margin-top: 0;">文章精选</span>
								<div class="swiper" style="border-radius: 12px 12px 0 0;">
									<swiper class="w-[100%] h-[228px]" @swiper="onSwiperImgs" v-bind="swiperOptionsimgs">
										<swiper-slide v-for="(item,index) in xsImg" :key="index">
											<div class="img_tits">{{ item.title }}</div>
											<img :src="item.image" style="width: 100%;height: 100%;object-fit: cover;">
										</swiper-slide>
									</swiper>
									<div class="swiper-pagination"></div>
								</div>
								<div style="width: 100%;">
									<div class="re_box_item" v-for="(item,index) in xsList" :key="index" @click="gotoDetail(item.id)">
										<div class="re_title">
											<div class="dian"></div>
											<span class="one-line-ellipsis" style="width:100%;">{{ item.title }}</span>
										</div>
										<div class="slices_rol"></div>
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>

		<div style="background-color: #ffffff;">
			<div class="box_7 flex-col">
				<span class="text_24">国务院百事通</span>
				<div class="dswper">
					<swiper ref="swiper_exp" 
						:slidesPerView="isMobile ? 1 : 2" 
						loop 
						:autoplay="false" 
						:modules="modules"
						:watchSlidesProgress="true" 
						@swiper="onSwiperExp">
						<swiper-slide v-for="(item, index) in 14" :key="index">
							<div style="padding: 20px;">
								<img class="hy_my_home" :src="`${$cdnUrl}/img/home_al/op${item}.png`">
							</div>
						</swiper-slide>
					</swiper>
					<div class="flex-row justify-center align-center w-full" style="gap: 10px;height:40px;">
						<div v-for="(_, index) in 3" :key="index" style="width: 20px; height: 5px;"
							:style="{ backgroundColor: activeSlideIndex === index ? '#fc7428' : '#C1C1C1' }">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="box_11 flex-col">
			<div class="text-wrapper_10">
				<span class="text_41">新闻动态</span>
			</div>
			<div class="text-wrapper_11" style="margin-bottom: 20px;">
				<span class="text_42">news information</span>
			</div>
			<div v-for="item in newsList">
				<div class="box_12 flex-row justify-center">
				<!-- <img @click="openUrl(item.id)" class="image_7 leftBoxTop" referrerpolicy="no-referrer"
					:src="item.image" style="cursor: pointer;;object-fit: cover;" /> -->
				<div class="box_13 flex-col" @click="openUrl(item.id)">
					<div class="text-group_6">
						<div class="one-line-ellipsis news_title_home">
							{{ item.title }}
						</div>
						<div class="two-line-ellipsis"
							style="color: #768597;font-size: 14px;font-weight: 400;margin-top: 20px;">
							{{ item.subtitle }}
						</div>
					</div>
					<div class="group_22 flex-row">
						<div class="section_6 flex-col"></div>
						<span class="text_44">{{ item.cate.name }}</span>
						<span class="text_45">{{ retTime(item.release_time_text) }}</span>
					</div>
				</div>
			</div>
			</div>
			<!-- <div class="box_16 flex-row">
				<div class="text-wrapper_12 flex-col">
					<nuxt-link to="/phone_societyDutyNew/" class="text_52">
						<span>查看更多</span>
					</nuxt-link>
				</div>
			</div> -->
		</div>
		<div class="box_18 flex-col" style="overflow: hidden;">
			<span class="text_53" style="color: #fff;">留言版</span>

			<div class="numberTopBox" style="margin:0 auto;padding-bottom: 30px;">
				<form class="contactForm mt-6 w-full" @submit.prevent="submitForm">
					<div class="inputform">
						<input v-model="formData.name" class="contactInput  mt-[15px] md:mt-[30px] w-full md:w-[700px]"
							type="text" placeholder="输入您的姓名" />
						<input v-model="formData.mobile"
							class="contactInput mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[700px]" type="text"
							placeholder="请输入您的联系电话" />
						<input v-model="formData.emil"
							class="contactInput mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[700px]" type="text"
							placeholder="请输入您的邮箱" />
					</div>
					<div class="relative w-full" style="padding:0px 20px;">
						<textarea v-model="formData.message" id="myTextarea" placeholder="为了更好地帮助您，请尽量提供详细的信息" rows="5"
							maxlength="100" class="w-full"></textarea>
						<button type="submit" class="contactBut">
							{{ '提交' }}
						</button>
					</div>
				</form>
			</div>
		</div>
		
	</div>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { nextTick, ref, onMounted, onUnmounted } from 'vue'
import 'swiper/css'
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade } from "swiper/modules";
import ScrollReveal from 'scrollreveal';
import { NNumberAnimation } from 'naive-ui'
let modules = [Autoplay, A11y, EffectCoverflow, EffectFade];

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import 'swiper/css/effect-coverflow';
import 'swiper/css/mousewheel'
import 'swiper/css/grid'
import 'swiper/css/effect-fade'
import 'swiper/css/autoplay'
import * as swiperAni from '@/assets/animate/animate.js'
import $api from '@/service/webRequest'
import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
const cdnUrl = useCdn()

const { locale } = useI18n()

const typeId = ref(1);

interface NewsItem {
	id: number;
	title: string;
	subtitle: string;
	image: string;
	cate: {
		name: string;
	};
	release_time_text: string;
}

const newsList = ref<NewsItem[]>([])

const openType = (type: number) => {
	console.log(type);
	typeId.value = type;
}

const videoShow = ref(false)

let newsSwiper: any = null
const onSwiperNews = (swiper: any) => {
	newsSwiper = swiper
}
const swiperOptionsNews = {
	autoplay: {
		delay: 5000,
		disableOnInteraction: false,
	},
	direction: 'horizontal' as const,
	slidesPerView: 1,
	speed: 500,
	effect: 'fade',
	loop: true,
	modules: [EffectFade, Autoplay],
}

let vesSwiper: any = null
const onSwiperExp = (swiper: any) => {
	vesSwiper = swiper
	// 监听幻灯片变化事件
	swiper.on('slideChange', () => {
		// 更新当前活动幻灯片索引
		activeSlideIndex.value = swiper.realIndex % 3
	})
}
const swiper_exp = ref();
const activeSlideIndex = ref(0);
// 表单数据
const formData = reactive({
	name: '',
	mobile: '',
	emil: '',
	message: ''
})
const router = useRouter()
// 新闻数据
const isMobile = ref(false)

const checkMobile = () => {
	isMobile.value = window.innerWidth <= 768
}

onMounted(() => {
	checkMobile()
	window.addEventListener('resize', checkMobile)
	getIndexNews();
	nextTick(() => {
		// 初始化 ScrollReveal
		setTimeout(() => {
			animate()
		}, 500)
	})
	getxsImg();
})

onUnmounted(() => {
	window.removeEventListener('resize', checkMobile)
})

const animate = () => {

	const sr = ScrollReveal();
	sr.reveal('.leftBoxTop', {
		origin: "left",
		distance: "1000px",
		duration: 1300,
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: true,
		mobile: true,
	})
	sr.reveal('.leftBox', {
		origin: "left",
		distance: "1000px",
		duration: 1300,
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: true,
		mobile: true,
	})
	sr.reveal('.rightBox', {
		origin: "right",
		distance: "1000px",
		duration: 1300,
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: true,
		mobile: true,
	})
	sr.reveal('.topBox', {
		origin: "top",
		distance: "1000px",
		duration: 1300,
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: true,
		mobile: true,
	})
	sr.reveal('.bottomBox', {
		origin: "bottom",
		distance: "1000px",
		duration: 1300,
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: true,
		mobile: true,
	})
	sr.reveal('.numberTopBox', {
		origin: "top",
		distance: "1000px",
		duration: 1300,
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: false,
		mobile: true,
		beforeReveal: function (el: any) {
			// numberAnimationInstRef.value.play()
			// numberAnimationInstRefKH.value.play()
			// numberAnimationInstRefJS.value.play()
			// numberAnimationInstRefHY.value.play()
		},
	})
	sr.reveal('.group_29 ', {
		origin: "bottom",
		distance: "500px",
		opacity: 0,
		scale: 0.9,
		reset: false,
		mobile: true,
	})
}
// 表单提交方法
const submitForm = () => {
	console.log(formData);

	// 这里可以添加表单验证逻辑
	if (!formData.name) {
		alert('请输入您的姓名')
		return
	}

	if (!formData.mobile) {
		alert('请输入您的手机号码')
		return
	}

	if (!formData.message) {
		alert('请输入您的留言内容')
		return
	}
	$api.post("/api/home.leave_word/add", formData)
		.then((res: any) => {
			console.log(res)
			if (res.status == 200) {
				alert('留言成功')
			} else {
				alert('失败')
			}
			formData.name = '';
			formData.mobile = '';
			formData.emil = '';
			formData.message = '';
		})
		.catch((err) => {
			console.dir(err)
		})
	// 重置表单
	// formData.name = ''
	// formData.mobile = ''
	// formData.content = ''
}
const getIndexNews = () => {
	$api.get("/api/home.news/index?page=1&limit=3")
		.then((res: any) => {
			console.log(res)
			newsList.value = res.data.data.list
		})
		.catch((err) => {
			console.dir(err)
		})
}

const retTime = (dateTimeStr: string) => {
	return dateTimeStr.split(' ')[0]; // 分割后取日期部分 
}
const openUrl = (id: number) => {
	window.open(`/phone_info/${id}`)
}

const gotoDetail = (id: number) => {
	window.open(`/phone_info/${id}`)
}

const xsImg = ref([]);
const xsList = ref([]);
//逐梦新声轮播图
const getxsImg = async () => {
	const res = await $api.get('/api/index/images?page=1&limit=3')
	xsImg.value = res.data.data.list;
	const ress = await $api.get(`/api/home.news/index?cate_id=99&page=1&limit=4`)
	xsList.value = ress.data.data.list;
}
let ImgsSwiper: any = null
const onSwiperImgs = (swiper: any) => {
	ImgsSwiper = swiper
}
const swiperOptionsimgs = {
	autoplay: {
		delay: 5000,
		disableOnInteraction: false,
	},
	direction: 'horizontal',
	slidesPerView: 1,
	speed: 500,
	// effect: 'fade',
	loop: true,
	modules: [Autoplay,Pagination],
	pagination: {
		el:'.swiper-pagination'
	},
}
</script>

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

.text_7, .text_8 {
	text-align: center;
	width: 100%;
}

.text_9, .text_11 {
	font-size: 16px !important;
	text-align: center;
	padding-right:0px
}

.text_12 {
	font-size: 14px !important;
	line-height: 1.6;
	padding: 0 15px;
	width: 100%;
}
.text-wrapper_2{
	margin: 0 auto;
}
.leftBox, .rightBox {
	width: 100% !important;
	margin: 10px 0 !important;
}

.content_box {
	width: 100% !important;
	height: 300px !important;
	position: relative !important;
	right: 0 !important;
	bottom: 0 !important;
}

.hy_my_home {
	width: 100% !important;
	height: auto !important;
}
.section_1{
	height: 323px;
    width: 100%;
}
.image-wrapper_2{
	border-radius: 10px;
}
.contactForm {
	.inputform {
		flex-direction: column !important;
		width: 100% !important;
		padding:20px 20px 10px 20px;
	}

	.contactInput {
		width: 100% !important;
		margin: 10px 0 !important;
		height: 40px !important;
		font-size: 14px !important;
		border-radius: 6px!important;
		background: #FFFFFF;
		padding-left: 10px;
	}

	#myTextarea {
		width: 100% !important;
		height: 120px !important;
		font-size: 14px !important;
		border-radius: 6px!important;
		padding: 10px;
	}
}

.box_12, .box_14 {
	flex-direction: column !important;
}
.box_3{
	width: 100%;
}
.box_7,.box_13,.box_18{
	height: 100%;
}

.image_7, .image_8, .image_9 {
	width: 100% !important;
}
.text_24{
	margin-top: 30px;
}
.group_22{
	width: 100%;
	margin: 27px 0 23px 15px;
}
.news_my_home {
	width: 100% !important;
	margin: 10px 0 !important;
	padding: 15px !important;
}
.contactBut {
	width: 108px;
	border-radius: 4px 4px 4px 4px;
	position: absolute;
	bottom: 20px;
	right: 30px;
	height: 36px;
	background-color: #222222;
	border: none;
	font-weight: 400;
	font-size: 16px;
	line-height: 28px;
	color: #FFFFFF;
}
.group_29 {
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 10px !important;
	padding: 0 15px !important;
}

.bottom_imgs {
	width: 100% !important;
	height: auto !important;
}

.pop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .8);
	z-index: 200;
	display: none;
}

.popCont {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.pop_video_close {
	border-radius: 50%;
	position: absolute;
	top: -73px;
	right: 0px;
	width: 40px;
	height: 40px;
	background: var(--close) no-repeat 0 0;
	background-size: 100% auto;
	border: 6px solid #979797;
}

.pop_video_cont {
	width: 600px;
	border: 6px solid #979797;
	background: #000;
}

.pop_video_cont video {
	display: block;
	width: 100%;
	height: 100%;
}
.text_16 {
	font-size: 14px;
	line-height: 24px;
}
.group_10{
	width: 91%;
	margin-left:15px;
	margin-top: 0px;
}
.text_18 {
	font-size: 15px !important;
}

.text_19 {
	font-size: 13px !important;
}

.group_7 {
	padding: 10px !important;
	margin: 0px 0 !important;
	height: 100%!important;
}
.text-group_3{
	height: auto;
}
.section_2sa{
	height: 700px;
}
.image-wrapper_5 {
	width: 40px !important;
	height: 40px !important;
	margin-top: 0px;
	margin-right: 20px !important;
}
.text-group_3_3{
	height: auto;
}
.text-group_3, .text-group_3_3 {
	flex: 1 !important;
}

.contactBut {
	width: 100% !important;
	height: 40px !important;
	font-size: 16px !important;
	margin-top: 10px !important;
	position: relative !important;
	right: 0 !important;
	bottom: 0 !important;
}

// 移除所有hover效果
.hy_my_home:hover,
.news_my_home:hover .news_title_home {
	transform: none !important;
	color: inherit !important;
}
.text-group_1,.group_7,.group_6s{
	width: 100%;
}
.text_19{
	width: 100%;
	line-height: 25px;
	height: auto;
}
.box_12{
	height: 100%;
	margin-top: 0px;
}
.group_6 {
	width: 100%;
}
.box_13{
	width: 100%;
	margin:0px;
}
.section_2s{
	height: 710px;
}
.box_5{
	height: auto;
}
.text-group_2{
	width: 55%;
	height: auto;
}
.text_17,.text_16{
	width: auto;
}
.box_6{
	padding:0px 15px 15px 15px;
	height: 100%;
}
.image-wrapper_5{
	width: 30%;
}
.text-group_3{
	width: 70%;
}
.group_10s {
	width: 100%;
	margin: 0px;
}
.dswper{
	margin-top: 10px;
}
.text-wrapper_10{
	margin-top: 30px;
}
@media (max-width: 768px) {
	.group_3 {
		height: auto;
		padding: 20px;
		background-size:auto;
	}
	
}
.fly{
	.re_box{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-content: flex-start;
			// gap: 10px;
			background: #FFFFFF;
			position: relative;
			border-radius: 12px;
			.re_box_item{
			    width: 100%;
			    height: 40px;
				padding-bottom: 5px;
			    border-bottom: 1px dashed #dedede; 
			    box-sizing: border-box;
			    display: flex;
			    justify-content: space-between;
			    align-items: center;
			    .re_title{
			        width: 100%;
			        font-family: Microsoft YaHei;
			        font-weight: 400;
			        font-size: 16px;
			        color: #323232;
			        display: flex;
			        align-items: center;
			        .dian{
			            width: 5px;
			            height: 5px;
			            background: #3B90DF;
			            border-radius: 50%;
			            margin-right: 10px;
			        }
			    }
			    // &:hover{
			    //     background-image: url('/img/index/listhmbg.png');
			    //     background-size: 100% 100%;
			    //     cursor: pointer;
			    //     .slices_rol{
			    //         width: 10px;
			    //         height: 88px;
			    //         background: #FAA828;
			    //         position: absolute;
			    //         right: 0;
			    //     }
			    // }
			}
			.swiper{

				.swiper-pagination{
					text-align: right;
					padding-right: 10px;
					bottom: 0;
					height: 38px;
					line-height: 38px;
					--swiper-pagination-color: #bf1712;/* 两种都可以 */
				}
				.img_tits{
					font-family: Microsoft YaHei UI;
					font-weight: bold;
					font-size: 18px;
					color: #FFFEFE;
					position: absolute;
					bottom: 0;
					left: 0;
					background: rgba(0, 0, 0, .2);
					width: 100%;
					height: 38px;
					line-height: 38px;
					padding-left: 10px;
				}
			}
		} 
}
</style>
