<template>
    <div class="section_3 flex-col">
        <div class="group_6 flex-col relative">
            <swiper class="swiper-container w-full" v-bind="swiperOptionsNews" @swiper="onSwiperNews"
                @slideChange="onSlideChangeNews">
                <swiper-slide>
                    <img src="public/images/sw1.png" class="w-full" />
                </swiper-slide>
                <swiper-slide>
                    <img src="public/images/sw1.png" class="w-full" />
                </swiper-slide>
                <swiper-slide>
                    <img src="public/images/sw1.png" class="w-full" />
                </swiper-slide>
                <swiper-slide>
                    <img src="public/images/sw1.png" class="w-full" />
                </swiper-slide>
            </swiper>
            <div class="flex items-center justify-center gap-2 absolute w-full z-10 bottom-[30px]">
                <div class="w-[20px] bg-white h-[3px] rounded-full" :class="activeIndex == 0 ? '' : 'opacity-50'"></div>
                <div class="w-[20px] bg-white h-[3px] rounded-full" :class="activeIndex == 1 ? '' : 'opacity-50'"></div>
                <div class="w-[20px] bg-white h-[3px] rounded-full" :class="activeIndex == 2 ? '' : 'opacity-50'"></div>
                <div class="w-[20px] bg-white h-[3px] rounded-full" :class="activeIndex == 3 ? '' : '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 flex-wrap justify-center gap-4 px-4" style="height: auto; padding: 20px 0;">
                    <div class="box_22 flex-col w-full mb-6">
                        <span class="text_59 text-xl">医院信息查询</span>
                        <span class="text_60 text-sm">Hospital&nbsp;information&nbsp;inquiry</span>
                        <div class="group_26 flex-col mt-2">
                            <span class="text_61 text-sm">请输入您要查询的内容</span>
                            <div class="group_27 flex-col">
                                <div class="group_28 flex-col">
                                    <img src="public/images/ser.png" />
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="box_35 flex-row flex-wrap justify-center px-4 gap-4">
                    <div class="group_36 flex-row flex-wrap justify-between">
                        <div class="box_23 flex-col w-[48%] mb-4">
                            <div class="image-wrapper_7 flex-col i2">
                                <img class="image_16 w-12 h-12" referrerpolicy="no-referrer"
                                    src="public/images/k5.png" />
                            </div>
                            <span class="text-sm">医院概况</span>
                            <span class="text-xs">Hospital&nbsp;Overview</span>
                        </div>
                        <div class="box_24 flex-col w-[48%] mb-4" style="background-color: #BDAA82;">
                            <div class="image-wrapper_7 flex-col i2">
                                <img class="image_16 w-12 h-12" referrerpolicy="no-referrer"
                                    src="public/images/k1.png" />
                            </div>
                            <span class="text-sm">患者服务</span>
                            <span class="text-xs">Patient Services</span>
                        </div>
                        <div class="box_24 flex-col w-[48%] mb-4" style="background-color: #1F96AE;">
                            <div class="image-wrapper_7 flex-col i2">
                                <img class="label_5 w-12 h-12" referrerpolicy="no-referrer"
                                    src="public/images/k4.png" />
                            </div>
                            <span class="text-sm">医院位置</span>
                            <span class="text-xs">Hospital location</span>
                        </div>
                        <div class="box_24 flex-col w-[48%] mb-4" style="background-color: #ffffff;color: #000;">
                            <div class="image-wrapper_7 flex-col i2">
                                <img class="label_5 w-12 h-12" referrerpolicy="no-referrer"
                                    src="public/images/k6.png" />
                            </div>
                            <span class="text-sm">紧急服务</span>
                            <span class="text-xs">Emergency services</span>
                        </div>
                        <div class="box_24 flex-col w-[48%] mb-4" style="background-color: #466C9A;;">
                            <div class="image-wrapper_7 flex-col i2">
                                <img class="label_5 w-12 h-12" referrerpolicy="no-referrer"
                                    src="public/images/k2.png" />
                            </div>
                            <span class="text-sm">医生团队</span>
                            <span class="text-xs">Doctor team</span>
                        </div>
                        <div class="box_24 flex-col w-[48%] mb-4" style="background-color: #B8C489;">
                            <div class="image-wrapper_7 flex-col i2">
                                <img class="label_5 w-12 h-12" referrerpolicy="no-referrer"
                                    src="public/images/k3.png" />
                            </div>
                            <span class="text-sm">科室介绍</span>
                            <span class="text-xs">Department Introduction</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex-col z-10 px-4">
                <img class="w-full mb-4" referrerpolicy="no-referrer" src="public/images/ks4.png" />
                <div class="box_26 flex-col">
                    <div class="group_38 flex-row justify-between items-center mb-2">
                        <div class="image-wrapper_10 flex-col">
                            <img class="label_6 w-8 h-8" referrerpolicy="no-referrer" src="public/images/k7.png" />
                        </div>
                        <span class="text_67 text-lg font-medium">医院简介</span>
                    </div>
                    <span class="text_68 text-sm leading-relaxed">
                        医院内设科室15个，现有专业技术人员109人，其中高级职称7人，中级职称25人，医院设有120张床位，拥有先进的医疗设备，如飞利浦螺旋CT、德国CE公司800mAX线机、意大利移动式床边X光机、日本心电监护仪、日本肺功能测量系统、人工肝、全自动肝病治疗仪、中心监护系统、纤维内窥镜系统、有创和无创呼吸系统、重症监护系统、心脏除颤系统、中心负压和供氧系统、自动心电分析系统、全自动生化分析系统、全自动血液和尿检测系统、全自动酶标仪、荷兰彩色B超等先进医疗设备。信阳市第五人民医院奉行救死扶伤，全心全意为人民服务的宗旨，全体医务人员将以优质的服务质量、精湛的医疗技术，为广大患者提供满意周到的服务。
                    </span>
                </div>
            </div>

            <div class="z-10 flex-col gap-8 px-4 py-6">
                <!--通知公告-->
                <div class="w-full">
                    <div class="flex justify-between items-center mb-4">
                        <div class="flex items-center">
                            <img class="label_3 w-6 h-6 mr-2" referrerpolicy="no-referrer" src="public/images/c2.png" />
                            <span class="text_38 text-lg">通知公告</span>
                        </div>
                        <div class="flex items-center border border-black px-3 py-1 rounded-full">
                            <span class="text_39 text-xs">查看更多</span>
                            <div class="group_22 flex-col ml-1">
                                <img src="public/images/right.png" class="w-4 h-4" />
                            </div>
                        </div>
                    </div>
                    <div>
                        <div v-for="(item, index) in 3" class="mb-4">
                            <div v-if="index == 0" class="mb-2">
                                <img class="image_13 w-full" referrerpolicy="no-referrer" src="public/images/new.png" />
                            </div>
                            <div class="mb-2">
                                <span class="text_41 text-base font-medium">国际交流添新篇发，合作共筑医疗梦&nbsp;意大利锡耶纳大学教</span>
                            </div>
                            <div class="mb-2">
                                <span class="text_43 text-sm text-gray-600">
                                    与北京华通国康公益基金会理事长陈冉率11人专家代表团，到我院进行深度参观交流。我院院长高社干、党委副书记牛牧青、副院长富奇志及相关职能科室负责人参加了会议。
                                </span>
                            </div>
                            <div class="mb-2">
                                <span class="text_45 text-xs text-gray-400">2025-04-15</span>
                            </div>
                            <div v-if="index < 2" class="mb-2">
                                <div class="box_19 w-full h-px bg-gray-200"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--医院动态-->
                <div class="w-full">
                    <div class="flex justify-between items-center mb-4">
                        <div class="flex items-center">
                            <img class="label_3 w-6 h-6 mr-2" referrerpolicy="no-referrer" src="public/images/c1.png" />
                            <span class="text_38 text-lg">医院动态</span>
                        </div>
                        <div class="flex items-center border border-black px-3 py-1 rounded-full">
                            <span class="text_39 text-xs">查看更多</span>
                            <div class="group_22 flex-col ml-1">
                                <img src="public/images/right.png" class="w-4 h-4" />
                            </div>
                        </div>
                    </div>
                    <div>
                        <div v-for="(item, index) in 3" class="mb-4">
                            <div v-if="index == 0" class="mb-2">
                                <img class="image_13 w-full" referrerpolicy="no-referrer"
                                    src="public/images/new1.png" />
                            </div>
                            <div class="mb-2">
                                <span class="text_41 text-base font-medium">国际交流添新篇发，合作共筑医疗梦&nbsp;意大利锡耶纳大学教</span>
                            </div>
                            <div class="mb-2">
                                <span class="text_43 text-sm text-gray-600">
                                    与北京华通国康公益基金会理事长陈冉率11人专家代表团，到我院进行深度参观交流。我院院长高社干、党委副书记牛牧青、副院长富奇志及相关职能科室负责人参加了会议。
                                </span>
                            </div>
                            <div class="mb-2">
                                <span class="text_45 text-xs text-gray-400">2025-04-15</span>
                            </div>
                            <div v-if="index < 2" class="mb-2">
                                <div class="box_19 w-full h-px bg-gray-200"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="box_33 flex-col px-4 py-6">
            <div class="box_2 flex-col">
                <div class="text-wrapper_47 flex-row mb-4"><span class="text_13 text-lg font-medium">医生团队</span></div>
                <div class="box_34 flex-row relative">
                    <swiper class="swiper-container h-full w-full" v-bind="swiperOptionsDoctor" @swiper="onSwiperDoctor"
                        @slideChange="onSlideChangeDoctor">
                        <swiper-slide v-for="item in 8">
                            <div class="group_10 flex-col p-2">
                                <div class="image-text_15 flex-col justify-between">
                                    <img class="image_3 w-full" referrerpolicy="no-referrer"
                                        src="public/images/y1.png" />
                                    <div class="text-group_13 flex-row justify-between mt-2">
                                        <span class="text_14 text-base font-medium">李商隐</span>
                                        <span class="text_15 text-xs text-gray-600">副主任医师</span>
                                    </div>
                                </div>
                                <span class="text_16 text-sm mt-2">擅长:从事眼科临床工作20年，对眼科临床疾病的诊断和治疗累积了丰富的经验</span>
                            </div>
                        </swiper-slide>
                    </swiper>
                </div>
                <div class="flex-row mt-4">
                    <div class="flex items-center justify-center gap-2 w-full">
                        <div class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
                            :class="activedIndex == 0 ? '' : 'opacity-50'"></div>
                        <div class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
                            :class="activedIndex == 1 ? '' : 'opacity-50'"></div>
                        <div class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
                            :class="activedIndex == 2 ? '' : 'opacity-50'"></div>
                        <div class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
                            :class="activedIndex == 3 ? '' : 'opacity-50'"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white pb-[30px] px-4">
            <div class="block_6 flex-row justify-around mb-4">
                <div @click="card = 1" :class="['text-wrapper_12', card == 1 ? 'text-wrapper_12-is' : '', 'flex-col']">
                    <span class="text_29 text-sm">先进设备</span>
                    <div v-if="card == 1" class="box_7 flex-col"></div>
                </div>
                <div @click="card = 2" :class="['text-wrapper_12', card == 2 ? 'text-wrapper_12-is' : '', 'flex-col']">
                    <span class="text_29 text-sm">医院环境</span>
                    <div v-if="card == 2" class="box_7 flex-col"></div>
                </div>
                <div @click="card = 3" :class="['text-wrapper_12', card == 3 ? 'text-wrapper_12-is' : '', 'flex-col']">
                    <span class="text_29 text-sm">荣誉资质</span>
                    <div v-if="card == 3" class="box_7 flex-col"></div>
                </div>
                <div @click="card = 4" :class="['text-wrapper_12', card == 4 ? 'text-wrapper_12-is' : '', 'flex-col']">
                    <span class="text_29 text-sm">公益行动</span>
                    <div v-if="card == 4" class="box_7 flex-col"></div>
                </div>
            </div>

            <div class="block_8 flex-row relative">
                <swiper class="swiper-container h-full w-full" v-bind="swiperOptionsKK" @swiper="onSwiperKK"
                    @slideChange="onSlideChangeKK">
                    <swiper-slide v-for="(item, index) in 16" :key="index">
                        <div class="list-items_1 flex-col p-2">
                            <img src="public/images/t1.png" class="w-full">
                            <div class="text-wrapper_13 flex-col mt-2">
                                <span class="text_33 text-xs text-center">26人高压氧舱</span>
                            </div>
                        </div>
                    </swiper-slide>
                </swiper>
            </div>
            <div class="flex-row mt-4">
                <div class="flex items-center justify-center gap-2 w-full">
                    <div class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
                        :class="activedKKIndex == 0 ? '' : 'opacity-50'"></div>
                    <div class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
                        :class="activedKKIndex == 1 ? '' : 'opacity-50'"></div>
                    <div class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
                        :class="activedKKIndex == 2 ? '' : 'opacity-50'"></div>
                    <div class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
                        :class="activedKKIndex == 3 ? '' : 'opacity-50'"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { nextTick, ref, onMounted } 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 type { Swiper as SwiperType } from 'swiper'
const { locale } = useI18n()

const card = ref(1);

const activeIndex = ref(0);


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

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


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

let kkSwiper: SwiperType | null = null;
const activedKKIndex = ref(0);
const onSwiperKK = (swiper: SwiperType) => {
    kkSwiper = swiper
}
const onSlideChangeKK = (s: any) => {
    activedKKIndex.value = s.snapIndex;
}
onMounted(() => {
    // 在移动端视图下初始化
    document.documentElement.style.fontSize = '16px';
})

</script>

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

/* 添加更多响应式样式 */
.section_3 {
    width: 100%;
    overflow-x: hidden;
}

.er_back {
    padding: 10px;
}

.san_count {
    display: flex;
    flex-direction: column;
    padding: 0 15px;
}


/* 调整标题间距 */
.text_59,
.text_67,
.text_38,
.text_13 {
    margin-bottom: 5px;
}

/* 优化按钮样式 */
.text-wrapper_12 {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text-wrapper_12-is {
    color: #57D1C8;
}

.box_7 {
    height: 2px;
    background-color: #57D1C8;
    width: 100%;
    margin-top: 5px;
}

/* 手机端专用样式 */
@media (max-width: 768px) {

    //   .flex-col {
    //     width: 100%;
    //   }
    .group_17 {
        width: 100% !important;
    }

    .box_22 {
        width: 100% !important;
        margin-bottom: 0px;
    }

    .group_26 {
        width: 66% !important;
    }

    .group_27 {
        left: 245px !important;
        height: 39px !important;
    }

    .group_28 {
        margin: 8px 0 0 22px;
    }
    .group_36{
        height: auto!important;
        margin-top: 0px!important;
    }
    .text_68 {
        font-size: 14px;
        line-height: 1.6;
    }
    .box_23{
        width: 48%;
        text-align: center;
        color: #fff;
        height: 145px;
        padding-top: 20px;
    }
    .box_24{
        width: 48%;
        text-align: center;
        color: #fff;
        height: 145px;
        padding-top: 20px;
        margin-top: 0px;
    }
    .image_16,
    .label_5,
    .label_1,
    .label_2,
    .image_10 {
        width: 40px;
        height: 40px;
        margin: 0 auto;
    }

    .text_62,
    .text_64,
    .text_65,
    .text-group_6,
    .text_35,
    .text_36 {
        font-size: 14px;
        margin-top: 5px;
        text-align: center;
    }

    .text_63,
    .paragraph_3,
    .text_66,
    .text_34,
    .paragraph_2,
    .text_37 {
        font-size: 10px;
        text-align: center;
    }
    .image-wrapper_7{
        margin: 0;
        text-align: center;
        width: 100%;
    }
    .box_26{
        margin-left: 0px;;
        height: auto;
        padding:20px 10px;
        margin-top: 0px;
    }
    .text_68{
        margin: 0px;
        height: auto;
        width: 100%;
    }
    .group_38{
        margin: 0 auto;
        padding-bottom: 20px;
    }
    .image_13{
        height: 100%;
    }
    .group_10{
        height: 100%;
        width: 100%;
    }
    .image_3 {
        width:100%;
        height: 100%;
        object-fit: cover;
    }
    .image-text_15{
        width: 100%;
        height: 100%;
    }
    .box_33 {
        padding-top: 20px;
    }
    .box_34 {
        margin-top: 20px;
    }
    .box_2{
        height: 100%;
    }
    .text-wrapper_12{
        height:38px
    }
    .block_6{
        height: 100%;
    }
    .block_8{
        height: 100%;
        margin-top: 0px;
    }
    .list-items_1{
        height: 100%;
        width: 100%;
    }
    .text-wrapper_13{
        width: 100%;
    }
    
}
</style>
