<template>
    <div class="div">
        <div class="flexcontainer">
            <div class="banner-box" v-loading="loading" style="min-height: 450px;">
                <!-- 数据加载完毕，且只有一张图时直接显示 -->
                <template v-if="!loading && bannerList.length === 1">
                    <img class="banner" :src="bannerList[0].image_url" alt=""
                        @click="handleBannerClick(bannerList[0].link_url)"
                        style="cursor: pointer; width: 100%; height: auto; display: block;">
                </template>
                <!-- 数据加载完毕，且大于一张图时使用轮播 -->
                <template v-else-if="!loading && bannerList.length > 1">
                    <el-carousel :interval="5000" arrow="hover" class="banner-carousel" :height="carouselHeight">
                        <el-carousel-item v-for="item in bannerList" :key="item.id">
                            <img class="banner" :src="item.image_url" alt="" @click="handleBannerClick(item.link_url)"
                                @load="handleImageLoad"
                                style="cursor: pointer; width: 100%; height: auto; display: block;">
                        </el-carousel-item>
                    </el-carousel>
                </template>
            </div>
            <div class="rectangle_33_1">
                <span class="div_3">
                    <span class="text_13"> 微信自定义编辑 </span>
                    <span class="text_14"> 多场景适用 </span>
                </span>
                <span class="text_15"> 红包、转账、对话记录全模拟，用于微商、朋友整蛊、视频段子，效果炸裂各种场景真实不穿帮 </span>
                <div class="wx-simulator flex justify-center">
                    <ToolCard type="large" icon="/src/public/index/liaotianmoni.png" title="聊天模拟" desc="单聊群里自由模拟"
                        @click="handleToolCardClick('/chat')" />
                    <ToolCard type="large" icon="/src/public/index/yuemoni.png" title="零钱模拟" desc="零钱余额限额支付"
                        @click="handleToolCardClick('/balance')" />
                </div>
            </div>
        </div>
        <div class="group_13642">
            <div class="rectangle_33_2">
                <div class="flexcontainer_10">
                    <span class="div_6">
                        <span class="text_23"> 选择你的
                        </span><span class="text_24"> 恶搞模拟 </span><span class="text_25"> 神器 </span>
                    </span>
                </div>
                <span class="text_26"> 万物皆可模拟 ， 认真你就输了，毕业证、机票、工资单，想要啥有啥，恶搞到底，而且像到亲妈都信 </span>
                <div class="tools-grid">
                    <ToolCard v-for="(item, index) in toolList" :key="index" :icon="item.icon" :title="item.title"
                        :desc="item.desc" @itemClick="handleToolCardClick(item.path)" />
                </div>
            </div>
        </div>
        <div class="group_47085">
            <div class="rectangle_21514">
                <span class="text_39"> 服务保障 </span>
            </div>
            <div class="service-box">
                <div class="service-item" v-for="(item, index) in serviceList" :key="index">
                    <div class="service-icon">
                        <div class="img-box">
                            <img class="img" :src="item.img" />
                        </div>
                    </div>
                    <span class="service-text"> {{ item.name }} </span>
                </div>
            </div>
        </div>
        <AppFooter />
    </div>

</template>
<script setup>
import { ref, onMounted, onUnmounted, resolveDirective } from 'vue'
import AppFooter from '@/components/common/AppFooter.vue'
import ToolCard from '@/components/ToolCard.vue'
import { ElMessage } from "element-plus";
import { useRouter, useRoute } from 'vue-router'
import { wechatApi } from '@/api/wechat'

const router = useRouter()
const route = useRoute()

const bannerList = ref([])
const carouselHeight = ref('450px')
const loading = ref(true)

// 动态更新轮播图高度
const updateCarouselHeight = () => {
    const banners = document.querySelectorAll('.banner-carousel .banner')
    if (banners.length > 0 && banners[0].offsetHeight) {
        carouselHeight.value = banners[0].offsetHeight + 'px'
    }
}

// 图片加载完成后初始化高度
const handleImageLoad = (e) => {
    if (e.target && e.target.offsetHeight) {
        carouselHeight.value = e.target.offsetHeight + 'px'
    }
}

// 获取 Banner 列表
const fetchBanners = async () => {
    loading.value = true
    try {
        const res = await wechatApi.getBanners()
        const data = res ? JSON.parse(res) : []
        if (Array.isArray(data)) {
            console.log("banner-data", data)
            // 根据返回数据的 sort_order 进行排序
            bannerList.value = data.sort((a, b) => a.sort_order - b.sort_order)
            console.log("banner列表", bannerList.value)
        }
        console.log("bannerList.value", bannerList.value)
    } catch (error) {
        console.error('获取Banner失败:', error)
    } finally {
        loading.value = false
    }
}

// 点击 Banner 跳转
const handleBannerClick = (link) => {
    if (!link) return
    if (link.startsWith('http')) {
        window.open(link, '_blank')
    } else {
        router.push(link)
    }
}

onMounted(() => {
    fetchBanners()
    window.addEventListener('resize', updateCarouselHeight)
})

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

const toolList = [
    { icon: "/src/public/index/gongzidan.png", title: "工资单", desc: "月入五万截图保真", path: "/gongzidan" },
    { icon: "/src/public/index/huochepiao.png", title: "火车票", desc: "说走就走的「假旅行」", path: "" },
    { icon: "/src/public/index/feijipiao.png", title: "飞机票", desc: "票比真的还像", path: "" },
    { icon: "/src/public/index/gouwumoni.png", title: "购物模拟", desc: "假装清空购物车", path: "" },
    { icon: "/src/public/index/zhengjian.png", title: "证件", desc: "防伪底纹都还原", path: "" },
    { icon: "/src/public/index/liaotianmoni.png", title: "视频群聊", desc: "视频通话中…", path: "" }
]

const serviceList = [
    {
        img: "/src/public/index/service1.png",
        name: "真实还原",
    },
    {
        img: "/src/public/index/service2.png",
        name: "官方授权",
    },
    {
        img: "/src/public/index/service3.png",
        name: "超高性价比",
    },
    {
        img: "/src/public/index/service4.png",
        name: "专属客服",
    }
]

const handleToolCardClick = (path) => {
    if (!path) {
        ElMessage.warning("该功能暂未上线")
        return
    }
    router.push(path)
}
</script>

<style>
* {
    box-sizing: border-box;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.justify-start {
    display: flex;
    justify-content: flex-start;
}

.justify-center {
    display: flex;
    justify-content: center;
}

.justify-end {
    display: flex;
    justify-content: flex-end;
}

.justify-between {
    display: flex;
    justify-content: space-between;
}

.items-start {
    display: flex;
    align-items: flex-start;
}

.items-end {
    display: flex;
    align-items: flex-end;
}

.items-center {
    display: flex;
    align-items: center;
}

.no-shrink {
    flex-shrink: 0;
}
</style>
<style lang="scss" scoped>
/* 首页 */
.div {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    isolation: isolate;
    min-height: 100%;
}

/* flexContainer */
.flexcontainer {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    isolation: isolate;
    z-index: 0;
    margin-top: 0;
    margin-left: 0;

    .banner-box {
        width: 100%;
        min-width: 1200px;
        position: relative;

        .icon {
            width: 40px;
            height: 40px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        .left-icon {
            left: 120px;
        }

        .right-icon {
            right: 120px;
        }

        .banner {
            width: 100%;
            min-width: 1200px;
        }
    }
}

/* 矩形 33 */
.rectangle_33_1 {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 1200px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    isolation: isolate;
    margin-top: 0;
    -webkit-mask-image: linear-gradient(0, #ffffff, #ffffff);
}

/* 微信自定义编辑 多场景适用 */
.div_3 {
    width: 594px;
    height: 68px;
    position: relative;
    line-height: 68px;
    white-space: pre;
    margin-top: 120px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;

    &::after {
        content: '';
        display: inline-block;
        width: 120px;
        height: 33px;
        background-image: url('@/public/index/decoration1.png');
        background-size: 100%;
        background-repeat: no-repeat;
        position: absolute;
        left: 0;
        bottom: -14px;
    }
}

/* 微信自定义编辑    */
.text_13 {
    font-size: 46px;
    font-family: 'Source Han Sans';
    line-height: 46px;
    font-weight: 700;
    color: #1a1a1a;
}

/* 多场景适用 */
.text_14 {
    font-size: 46px;
    font-family: 'Source Han Sans';
    line-height: 46px;
    font-weight: 700;
    background-image: linear-gradient(269.06deg, #c05bff -17.74%, #2e95ff 56.19%, #55d5fc 89.31%, #6cffea 120.01%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

/* 红包、转账、对话记录全模拟，用于微商、朋友整蛊、视频段子，效果炸裂各种场景真实不穿帮 */
.text_15 {
    width: 796px;
    height: 57px;
    position: relative;
    text-align: center;
    font-size: 24px;
    font-family: 'Source Han Sans';
    font-weight: 400;
    line-height: 30px;
    color: var(--, #767676);
    margin-left: auto;
    margin-right: auto;
    z-index: 3;
    margin-top: 5px;
}

.wx-simulator {
    margin: 0 auto;
    margin-top: 78px;
    width: 1200px;
    height: 500px;
    background: linear-gradient(334deg, #ECF2FF 0%, #FFF3FA 100%);
    border-radius: 26px;
    gap: 30px;
    align-items: center;
}



/* 蒙版组 13642 */
.group_13642 {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 1;
    margin-top: 179px;
    margin-left: 0;
}

/* 矩形 33 */
.rectangle_33_2 {
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    isolation: isolate;
    margin-top: 0;
    padding-bottom: 10px;
}

/* flexContainer */
.flexcontainer_10 {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    z-index: 0;
    margin-left: 0;
}

/* 选择你的恶搞模拟神器 */
.div_6 {
    width: 470px;
    height: 68px;
    position: relative;
    line-height: 68px;
    white-space: pre;
    margin-top: -10px;
    margin-bottom: -11px;
    margin-left: auto;
    margin-right: auto;

    &::after {
        content: "";
        display: block;
        width: 65px;
        height: 39px;
        background-image: url('@/public/index/decoration2.png');
        background-size: 100%;
        background-repeat: no-repeat;
        position: absolute;
        left: -40px;
        top: -31px;
        z-index: 99;
    }
}

/* 选择你的 */
.text_23 {
    font-size: 46px;
    font-family: 'Source Han Sans';
    font-weight: 700;
    color: #1a1a1a;
}

/* 恶搞模拟 */
.text_24 {
    font-size: 46px;
    font-family: 'Source Han Sans';
    line-height: 46px;
    font-weight: 700;
    background-image: linear-gradient(268.81deg, #c05bff -17.65%, #2e95ff 56.24%, #55d5fc 89.33%, #6cffea 120.01%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

/* 神器 */
.text_25 {
    font-size: 46px;
    font-family: 'Source Han Sans';
    line-height: 46px;
    font-weight: 700;
    color: #1a1a1a;
}

/* 万物皆可模拟 ， 认真你就输了，毕业证、机票、工资单，想要啥有啥，恶搞到底，而且像到亲妈都信 */
.text_26 {
    width: 763px;
    height: 57px;
    position: relative;
    text-align: center;
    font-size: 24px;
    font-family: 'Source Han Sans';
    font-weight: 400;
    line-height: 30px;
    color: var(--, #767676);
    margin-left: calc(50% - 398px);
    margin-right: auto;
    z-index: 3;
    margin-top: 42px;
}

/* flexContainer */
.tools-grid {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    z-index: 2;
    margin: 0 auto;
    margin-top: 78px;
    gap: 42px 45px;
    width: 100%;
    max-width: 1200px;
}



/* 组 47085 */
.group_47085 {
    width: 100%;
    height: 400px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 3;
    margin-top: 80px;
    margin-left: 0;
}

/* 矩形 21514 */
.rectangle_21514 {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0;
    margin-left: 0;
    -webkit-mask-image: linear-gradient(0, #d8d8d8, #d8d8d8);
}

/* 服务保障 */
.text_39 {
    height: 68px;
    position: relative;
    font-size: 46px;
    font-family: 'Source Han Sans';
    font-weight: 700;
    line-height: 68px;
    color: var(--, #1a1a1a);
    white-space: pre;
    margin-top: 47px;
    margin-bottom: -11px;
    margin-left: auto;
    margin-right: auto;
}

/* 组 47081 */
.service-box {
    position: relative;
    width: 871px;
    height: 151px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: -221px;
    margin-left: auto;
    margin-right: auto;
    gap: 150px;

    .service-item {
        position: relative;
        height: 151px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 0;

        .service-icon {
            position: relative;
            width: 74px;
            height: 74px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-top: 0;
            margin-left: auto;
            margin-right: auto;

            .img-box {
                position: relative;
                width: 100%;
                height: 74px;
                margin-left: auto;
                margin-right: auto;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                margin-top: 0;
                -webkit-mask-image: linear-gradient(0, #d8d8d8, #d8d8d8);

                .img {
                    width: 64px;
                    height: 64px;
                    position: relative;
                    margin-top: 5px;
                    margin-left: auto;
                    margin-right: auto;
                }
            }
        }

    }

    .service-text {
        position: relative;
        font-size: 24px;
        font-family: 'Source Han Sans';
        font-weight: 500;
        line-height: 32px;
        color: #3d3d3d;
        white-space: pre;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 45px;
    }
}

.banner-carousel {
    :deep(.el-carousel__arrow--left) {
        left: 120px !important;
    }

    :deep(.el-carousel__arrow--right) {
        right: 120px !important;
    }

    :deep(.el-carousel__arrow) {
        width: 40px;
        height: 40px;
        // display: block !important;

        .el-icon {
            font-size: 24px !important;
        }
    }
}
</style>
