<template>
	<div class="section_3 flex-col">
		<div class="group_6 flex-col relative">
			<swiper class="swiper-container w-full" :slides-per-view="1" @swiper="onSwiperNews"
				v-bind="swiperOptionsNews" @slideChange="onSlideChangeNews">
				<swiper-slide v-for="item in swiperList">
					<img :src="item.rotation_image" class="w-full max-h-[600px]" style="object-fit: cover;" />
				</swiper-slide>
			</swiper>
			<div class="flex items-center justify-center gap-5 absolute w-full z-10 bottom-[80px]">
				<div v-for="(item, index) in swiperList" class="w-[30px] bg-white h-[5px]"
					:class="activeIndex == index ? '' : 'opacity-50'"></div>
			</div>
		</div>
		<!--第二块-->
		<div class="flex-col er_back">
			<div class="group_17 flex-col z-10">
				<div class="box_35 flex-row justify-start" style="height: 167px;">
					<div class="box_22 flex-col">
						<span class="text_59">医院信息查询</span>
						<span class="text_60">Hospital&nbsp;information&nbsp;inquiry</span>
						<div class="group_26 flex-col">
							<input type="text" class="text_61" v-model="searchContent" placeholder="请输入您要查询的内容">
							<NuxtLink :to="'/search/' + searchContent">
								<div class="group_27 flex-col">
									<div class="group_28 flex-col">
										<img src="public/images/ser.png" />
									</div>
								</div>
							</NuxtLink>
						</div>
					</div>
					<NuxtLink to="/about">
						<div class="box_23 flex-col">
							<div class="image-wrapper_7 flex-col i2">
								<img class="image_16" referrerpolicy="no-referrer" src="public/images/k5.png" />
							</div>
							<span class="text_62">医院概况</span>
							<span class="text_63">Hospital&nbsp;Overview</span>
						</div>
					</NuxtLink>
					<NuxtLink to="/list/23">
						<div class="box_24 flex-col">
							<div class="image-wrapper_8 flex-col">
								<img class="image_16" referrerpolicy="no-referrer" src="public/images/k1.png" />
							</div>
							<span class="text_64">患者服务</span>
							<span class="paragraph_3">
								Patient&nbsp;Services
								<br />
							</span>
						</div>
					</NuxtLink>
					<NuxtLink to="/about">
						<div class="box_25 flex-col">
							<div class="image-wrapper_9 flex-col">
								<img class="label_5" referrerpolicy="no-referrer" src="public/images/k4.png" />
							</div>
							<span class="text_65">医院位置</span>
							<span class="text_66">Hospital&nbsp;location</span>
						</div>
					</NuxtLink>
				</div>
				<div class="box_35 flex-row justify-start">
					<div class="group_18 flex-col">
						<div class="group_19 flex-col"></div>
					</div>
					<div class="group_36 flex-col justify-between">
						<NuxtLink to="/list/87">
							<div class="box_14 flex-col">
								<div class="image-text_20 flex-col justify-between">
									<div class="image-wrapper_2 flex-col">
										<img class="label_1" referrerpolicy="no-referrer" src="public/images/k6.png" />
									</div>
									<span class="text-group_6">紧急服务</span>
								</div>
								<span class="text_34">Emergency&nbsp;services</span>
							</div>
						</NuxtLink>
						<NuxtLink to="/list/-3">
							<div class="box_15 flex-col">
								<div class="section_4 flex-col">
									<div class="block_2 flex-col align-center">
										<div class="image-wrapper_3 flex-col">
											<img class="label_2" referrerpolicy="no-referrer"
												src="public/images/k2.png" />
										</div>
									</div>
									<span class="text_35">医生团队</span>
									<span class="paragraph_2">
										Doctor&nbsp;team
										<br />
										<br />
									</span>
								</div>
							</div>
						</NuxtLink>
					</div>
					<div class="group_37 flex-col justify-between">
						<NuxtLink to="/list/34">
							<div class="box_16 flex-col">
								<div class="image-wrapper_4 flex-col">
									<img class="image_10" referrerpolicy="no-referrer" src="public/images/k3.png" />
								</div>
								<span class="text_36">科室介绍</span>
								<span class="text_37">Department&nbsp;Introduction</span>
							</div>
						</NuxtLink>
					</div>
				</div>
			</div>
			<div class="flex-col z-10" style="flex-direction: row; margin: 0 auto;margin-top: 30px;">
				<img class="image_12" referrerpolicy="no-referrer" :src="hospitalInfo.image" />
				<div class="box_26 flex-col">
					<div class="group_38 flex-row justify-between">
						<div class="image-wrapper_10 flex-col">
							<img class="label_6" referrerpolicy="no-referrer" src="public/images/k7.png" />
						</div>
						<span class="text_67">医院简介</span>
					</div>
					<span class="text_68">
						{{ hospitalInfo.description }}
					</span>
				</div>
			</div>

			<div class="z-10 justify-around align-center gap-10 san_count">
				<!--左侧-->
				<div class="left-my-news w-[50%]">
					<div class="align-center justify-between ">
						<div class="align-center">
							<img class="label_3" referrerpolicy="no-referrer" src="public/images/c2.png" />
							<span class="text_38">通知公告</span>
						</div>
						<NuxtLink to="/list/90">
							<div class="flex-row align-center"
								style="border:1px solid #000;padding: 10px 20px;border-radius: 50px;cursor: pointer;">
								<span class="text_39">查看更多</span>
								<div class="group_22 flex-col">
									<img src="public/images/right.png" />
								</div>
							</div>
						</NuxtLink>
					</div>
					<div class="mt-[20px]">
						<div v-for="(item, index) in msgList" class="cursor-pointer" @click="goDetail(item)">
							<div v-if="index == 0">
								<img class="image_13" referrerpolicy="no-referrer" :src="item.news_image[0]" />
							</div>
							<div class="mt-[20px]">
								<span class="text_41">{{ item.news_title }}</span>
							</div>
							<div class="mt-[10px]">
								<span class="text_43">
									{{ item.news_titleshort }}
								</span>
							</div>
							<div class="mt-[10px]">
								<span class="text_45">{{ formattedYearMonthDay(item.showtime) }}</span>
							</div>
							<div class="mt-[10px]" v-if="index < 2">
								<div class="box_19 flex-col"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="left-my-news w-[50%]">
					<div class="align-center justify-between ">
						<div class="align-center">
							<img class="label_3" referrerpolicy="no-referrer" src="public/images/c1.png" />
							<span class="text_38">医院动态</span>
						</div>
						<NuxtLink to="/list/91">
							<div class="flex-row align-center"
								style="cursor: pointer;border: 1px solid #000;padding: 10px 20px;border-radius: 50px;">
								<span class="text_39">查看更多</span>
								<div class="group_22 flex-col">
									<img src="public/images/right.png" />
								</div>
							</div>
						</NuxtLink>
					</div>
					<div class="mt-[20px]">
						<div v-for="(item, index) in dtList" class="cursor-pointer" @click="goDetail(item)">
							<div v-if="index == 0">
								<img class="image_13" referrerpolicy="no-referrer" :src="item.news_image[0]" />
							</div>
							<div class="mt-[20px]">
								<span class="text_41">{{ item.news_title }}</span>
							</div>
							<div class="mt-[10px]">
								<span class="text_43">
									{{ item.news_titleshort }}
								</span>
							</div>
							<div class="mt-[10px]">
								<span class="text_45">{{ formattedYearMonthDay(item.showtime) }}</span>
							</div>
							<div class="mt-[10px]" v-if="index < 2">
								<div class="box_19 flex-col"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="box_33 flex-col">
			<div class="box_2 flex-col">
				<div class="text-wrapper_47 flex-row"><span class="text_13">医生团队</span></div>
				<div class="box_34 flex-row">
					<div class="group_9 flex-col">
						<div id="swipen_next" style="cursor: pointer;">
							<img class="w-[50px]" src="public/images/left.png" />
						</div>
					</div>
					<swiper class="swiper-container h-full w-full" :slides-per-view="1" @swiper="onSwiperDoctor"
						v-bind="swiperOptionsDoctor" @slideChange="onSlideChangeDoctor">
						<swiper-slide v-for="item in ysList" @click="goYsDetail(item)">
							<div class="group_10 flex-col cursor-pointer">
								<div class="image-text_15 flex-col justify-between">
									<img class="image_3" referrerpolicy="no-referrer" :src="item.news_image[0]" />
									<div class="text-group_13 flex-row">
										<span class="text_14">{{ item.news_title }}</span>
										<span class="text_15">{{ item.news_key }}</span>
									</div>
								</div>
								<div class="text_16 my_text_2">{{ item.news_auto }}</div>
							</div>
						</swiper-slide>
					</swiper>

					<div class="group_15 flex-col">
						<div id="swipen_prev" style="cursor: pointer;">
							<img class="w-[50px]" src="public/images/right2.png" />
						</div>
					</div>
				</div>
				<div class="flex-row mt-[20px]">
					<div class="flex items-center justify-center gap-5 w-full z-10">
						<div v-for="(item, index) in ysTotal" class="w-[20px] bg-[#57D1C8] h-[5px]"
							:class="activedIndex == index ? '' : 'opacity-50'"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="bg-white pb-[50px]">
			<div class="block_6 flex-row justify-center">
				<div v-for="item in bottomList" @click="cardOpen(item)"
					:class="['text-wrapper_12', card == item.id ? 'text-wrapper_12-is' : '', 'flex-col']">
					<span class="text_29">{{ item.name }}</span>
					<div v-if="card == item.id" class="box_7 flex-col"></div>
				</div>
			</div>

			<div class="block_8 flex-row">
				<div class="box_10 flex-col">
					<div id="kkswipen_next" style="cursor: pointer;">
						<img class="w-[50px]" src="public/images/left.png" />
					</div>
				</div>
				<swiper class="swiper-container h-full w-full" :slides-per-view="4" @swiper="onSwiperKK"
					v-bind="swiperOptionsKK" @slideChange="onSlideChangeKK">
					<swiper-slide v-for="(item, index) in bottomInfoList" @click="goDetail(item)">
						<div class="list-items_1 flex-col cursor-pointer" :key="index">
							<img style="width: 100%;max-height: 220px;object-fit: cover;" :src="item.news_image[0]">
							<div class="text-wrapper_13 flex-col">
								<span class="text_33">{{ item.news_title }}</span>
							</div>
						</div>
					</swiper-slide>
				</swiper>
				<div class="box_11 flex-col">
					<div id="kkswipen_prev" style="cursor: pointer;">
						<img class="w-[50px]" src="public/images/right2.png" />
					</div>
				</div>
			</div>
			<div class="flex-row mt-[40px]">
				<div class="flex items-center justify-center gap-5 w-full z-10">
					<div v-for="(item, index) in bottomInfoTotal" class="w-[20px] bg-[#57D1C8] h-[5px]"
						:class="activedKKIndex == index ? '' : 'opacity-50'"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { nextTick, ref } from 'vue'
import 'swiper/css'
import { Mousewheel, Navigation, Grid, EffectFade, Autoplay } from 'swiper/modules'
import 'swiper/css/mousewheel'
import 'swiper/css/navigation'
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'
import { c } from 'naive-ui'
const { locale } = useI18n()

const searchContent = ref('');

const activeIndex = ref(0);


const onSlideChangeNews = (s) => {
	activeIndex.value = s.realIndex;
}

// Swiper配置
const swiperOptionsNews = {
	autoplay: {
		delay: 6000,
		disableOnInteraction: false,
	},
	direction: 'horizontal',
	slidesPerView: 1,
	speed: 500,
	effect: 'fade',
	loop: true,
	modules: [Navigation, EffectFade, Autoplay],
	navigation: {
		nextEl: '#swipen_prev',
		prevEl: '#swipen_next',
	},
}
// banner
let newsSwiper: any = null
const onSwiperNews = (swiper: any) => {
	newsSwiper = swiper
}
// Swiper配置
const swiperOptionsDoctor = {
	direction: 'horizontal',
	slidesPerView: 5,
	slidesPerGroup: 5,
	speed: 700,
	loop: false,
	modules: [Navigation],
	navigation: {
		nextEl: '#swipen_prev',
		prevEl: '#swipen_next',
	},
}
//医生团队
const activedIndex = ref(0);
let doctorSwiper: any = null
const onSwiperDoctor = (swiper: any) => {
	doctorSwiper = swiper
}
const onSlideChangeDoctor = (s) => {
	activedIndex.value = s.snapIndex;
}


const swiperOptionsKK = {
	direction: 'horizontal',
	slidesPerView: 4,
	slidesPerGroup: 4,
	speed: 700,
	loop: false,
	modules: [Navigation, Grid],
	grid: {
		fill: 'column',
		rows: 2,
	},
	navigation: {
		nextEl: '#kkswipen_prev',
		prevEl: '#kkswipen_next',
	},
}

let kkSwiper = null;
const activedKKIndex = ref(0);
const onSwiperKK = (swiper: any) => {
	kkSwiper = swiper
}
const onSlideChangeKK = (s) => {
	activedKKIndex.value = s.snapIndex;
}
const router = useRouter()
onMounted(() => {
	const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
	if (coMobile) {
		router.push('/phone_index')
	} else {
		router.push('/')
	}
	getSwiperList();
	getHospitalInfo();
	getMsgList();
	getDtList();
	getYsList();
	getBottomList();

})

//轮播图
const swiperList = ref([]);
const getSwiperList = () => {
	$api.post("/api/index/rotation")
		.then((res: any) => {
			console.log(res)
			swiperList.value = res.data.data;
		})
		.catch((err) => {
			console.dir(err)
		})
}
// 通知公告
const msgList = ref([]);
const getMsgList = () => {
	$api.post("/api/news/index", { gory_id: 90, page: 1, pageSize: 3 })
		.then((res: any) => {
			console.log(res)
			msgList.value = res.data.data.list;
		})
		.catch((err) => {
			console.dir(err)
		})
}
// 医院动态
const dtList = ref([]);
const getDtList = () => {
	$api.post("/api/news/index", { gory_id: 91, page: 1, pageSize: 3 })
		.then((res: any) => {
			console.log(res)
			dtList.value = res.data.data.list;
		})
		.catch((err) => {
			console.dir(err)
		})
}
// 医生团队
const ysList = ref([]);
const ysTotal = ref(0);
const getYsList = () => {
	$api.post("/api/Newsbx/index", { page: 1, pageSize: 9999 })
		.then((res: any) => {
			console.log(res)
			ysList.value = res.data.data.list;
			//计算页数
			ysTotal.value = Math.ceil(res.data.data.total_count / 5);
		})
		.catch((err) => {
			console.dir(err)
		})
}
//医院简介
const hospitalInfo = ref({});
const getHospitalInfo = () => {
	$api.post("/api/Broadcast/hospital_overview")
		.then((res: any) => {
			console.log(res)
			hospitalInfo.value = res.data.data;
		})
		.catch((err) => {
			console.dir(err)
		})
}
//先进设备等
const card = ref(1);
const bottomList = ref({});
const getBottomList = () => {
	$api.post("/api/news/group", { flag: 'index' })
		.then((res: any) => {
			console.log(res)
			bottomList.value = res.data.data;
			card.value = res.data.data[0].id;
			getBottomInfoList();
		})
		.catch((err) => {
			console.dir(err)
		})
}
//先进设备list
const bottomInfoList = ref({});
const bottomInfoTotal = ref(0);
const getBottomInfoList = () => {
	$api.post("/api/news/index", { gory_id: card.value, page: 1, pageSize: 999 })
		.then((res: any) => {
			console.log(res)
			bottomInfoList.value = res.data.data.list;
			bottomInfoTotal.value = Math.ceil(res.data.data.total_count / 8);
		})
		.catch((err) => {
			console.dir(err)
		})
}
const cardOpen = (item) => {
	card.value = item.id;
	getBottomInfoList();
}
const openUrl = (index: number) => {
	if (index == 0) {
		window.location.href = `/about`
	} else if (index == 1) {
		sessionStorage.setItem('group_id', '23')
		window.location.href = `/list/23`
	} else if (index == 2) {
		sessionStorage.setItem('group_id', '87')
		window.location.href = `/list/87`
	} else if (index == 3) {
		sessionStorage.setItem('group_id', '-3')
		window.location.href = `/list/-3`
	} else if (index == 4) {
		sessionStorage.setItem('group_id', '34')
		window.location.href = `/list/34`
	} else if (index == 5) {
		sessionStorage.setItem('group_id', '90')
		window.location.href = `/list/90`
	} else if (index == 6) {
		sessionStorage.setItem('group_id', '91')
		window.location.href = `/list/91`
	}
	else {
		sessionStorage.setItem('group_id', '0')
		window.location.href = `/`
	}
}
// 计算 "YYYY.MM.DD" 格式 
const formattedYearMonthDay = (showtime) => {
	const date = new Date(showtime);
	const year = date.getFullYear();
	const month = (date.getMonth() + 1).toString().padStart(2, "0");
	const day = date.getDate().toString().padStart(2, "0");
	return `${year}-${month}-${day}`;
};
const goDetail = (item) => {
	sessionStorage.setItem('group_id', '-2')
	window.open(`/info/${item.id}`)
}
const goYsDetail = (item) => {
	sessionStorage.setItem('group_id', '-3')
	window.open(`/ys_info/${item.id}`)
}
</script>

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

@keyframes stroke {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes hover-stroke {
	from {
		stroke-dashoffset: 320;
	}

	to {
		stroke-dashoffset: 0;
	}
}

.st0 {
	fill: none;
	stroke: #FFFFFF;
	stroke-width: 3;
	stroke-miterlimit: 3;
}

.st1 {
	fill: none;
	stroke: #FFFFFF;
	stroke-width: 3;
	stroke-miterlimit: 3;
}

.st2 {
	fill: none;
	stroke: #FFFFFF;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-miterlimit: 10;
}

/* 初始状态 - 全局设置 */
.st0,
.st1,
.st2 {
	stroke-dasharray: 320;
	stroke-dashoffset: 0;
}

/* 页面加载时的动画 */
.st0 {
	animation: stroke 1.5s ease-in-out 0.5s forwards;
}

.st1 {
	animation: stroke 1.5s ease-in-out 0.7s forwards;
}

.st2 {
	animation: stroke 1.5s ease-in-out 0.9s forwards;
}

/* 然后应用新的悬停动画 */
.box_23:hover .st0 {
	animation: hover-stroke 1.5s ease-in-out 0.9 forwards;
}

.box_23:hover .st1 {
	animation: hover-stroke 1.5s ease-in-out 0.1s forwards;
}

.box_23:hover .st2 {
	animation: hover-stroke 1.2s ease-in-out 0.8s forwards;
}
</style>
