<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 v-for="item in swiperList">
                    <img :src="item.rotation_image" class="w-full" />
                </swiper-slide>
            </swiper>
            <div class="flex items-center justify-center gap-2 absolute w-full z-10 bottom-[30px]">
                <div v-for="(item, index) in swiperList" class="w-[20px] bg-white h-[3px] rounded-full"
                    :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 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"> 
                            <input type="text" class="text_61" v-model="searchContent" placeholder="请输入您要查询的内容">
                            <NuxtLink :to="'/phone_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>

                </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" @click="openUrl(0)">
                            <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" @click="openUrl(1)"
                            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" @click="openUrl(0)"
                            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" @click="openUrl(2)"
                            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" @click="openUrl(3)"
                            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" @click="openUrl(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="hospitalInfo.image" />
                <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">
                        {{ hospitalInfo.description }}
                    </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" @click="openUrl(5)">
                            <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 msgList" class="mb-4" @click="goDetail(item)">
                            <div v-if="index == 0" class="mb-2">
                                <img class="image_13 w-full" referrerpolicy="no-referrer" :src="item.news_image[0]" />
                            </div>
                            <div class="mb-2">
                                <span class="text_41 text-base font-medium">{{ item.news_title }}</span>
                            </div>
                            <div class="mb-2">
                                <span class="text_43 text-sm text-gray-600">
                                    {{ item.news_titleshort }}
                                </span>
                            </div>
                            <div class="mb-2">
                                <span class="text_45 text-xs text-gray-400">{{ formattedYearMonthDay(item.showtime) }}</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" @click="openUrl(6)">
                            <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 dtList" class="mb-4" @click="goDetail(item)">
                            <div v-if="index == 0" class="mb-2">
                                <img class="image_13 w-full" referrerpolicy="no-referrer"
                                :src="item.news_image[0]" />
                            </div>
                            <div class="mb-2">
                                <span class="text_41 text-base font-medium">{{ item.news_title }}</span>
                            </div>
                            <div class="mb-2">
                                <span class="text_43 text-sm text-gray-600">
                                    {{ item.news_titleshort }}
                                </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 ysList" @click="goYsDetail(item)">
                            <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">{{ item.news_title }}</span>
                                        <span class="text_15 text-xs text-gray-600">{{ item.news_key }}</span>
                                    </div>
                                </div>
                                <span class="text_16 text-sm mt-2">{{ item.news_auto }}</span>
                            </div>
                        </swiper-slide>
                    </swiper>
                </div>
                <div class="flex-row mt-4">
                    <div class="flex items-center justify-center gap-2 w-full">
                        <div v-for="(item, index) in ysTotal" class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
                            :class="activedIndex == index ? '' : '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 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 text-sm">{{ item.name }}</span>
                    <div v-if="card == item.id" 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 bottomInfoList" @click="goDetail(item)">
                        <div class="list-items_1 flex-col p-2">
                            <img :src="item.news_image[0]" class="w-full h-[150px]">
                            <div class="text-wrapper_13 flex-col mt-2">
                                <span class="text_33 text-center one-line" style="font-size: 13px;">{{ item.news_title }}</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 v-for="(item, index) in bottomInfoTotal" class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
                        :class="activedKKIndex == index ? '' : '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 searchContent = ref('');

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;
}
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 / 2);
        })
        .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 / 4);
        })
        .catch((err) => {
            console.dir(err)
        })
}
const cardOpen = (item) => {
    card.value = item.id;
    getBottomInfoList();
}
const openUrl = (index: number) => {
    if (index == 0) {
        window.location.href = `/phone_about`
    } else if (index == 1) {
        sessionStorage.setItem('group_id', '23')
        window.location.href = `/phone_list/23`
    } else if (index == 2) {
        sessionStorage.setItem('group_id', '87')
        window.location.href = `/phone_list/87`
    } else if (index == 3) {
        sessionStorage.setItem('group_id', '-3')
        window.location.href = `/phone_list/-3`
    } else if (index == 4) {
        sessionStorage.setItem('group_id', '34')
        window.location.href = `/phone_list/34`
    } else if (index == 5) {
        sessionStorage.setItem('group_id', '90')
        window.location.href = `/phone_list/90`
    } else if (index == 6) {
        sessionStorage.setItem('group_id', '91')
        window.location.href = `/phone_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(`/phone_info/${item.id}`)
}
const goYsDetail = (item) => {
    sessionStorage.setItem('group_id', '-3')
    window.open(`/phone_ys_info/${item.id}`)
}
</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;
        width: 100%;
    }

    .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>
