<template>
  <div class="page bg-111 px-20 color-fff flex-col">
    <!-- 顶部导航 -->
    <header class="h-56 flex-between">
      <span class="logo fs-22 font-bold">ZIdingyi</span>
      <div class="flex-items-center gap-16">
        <button class="train-btn px-14 py-6 round-16 fs-12 pointer">创作者训练营</button>
        <span class="icon-btn flex-center wh-32 round bg-222 color-ccc fs-14 pointer">?</span>
        <span class="icon-btn flex-center wh-32 round bg-222 color-ccc fs-14 pointer">🛒</span>
        <span class="promo flex-items-center gap-6 px-10 py-4 round-6 fs-12">
          <span>会员特惠</span>
          <span class="color-gold">{{ countdown }}</span>
        </span>
        <span class="avatar round wh-36" :style="{ background: 'linear-gradient(135deg,#409eff,#67c23a)' }"></span>
      </div>
    </header>
    <!-- transform:
                index === 1
                  ? 'none'
                  : index === 0
                    ? 'perspective(600px) translate3d(0px, 0px, 0px) rotateY(20deg) scaleY(0.88)'
                    : 'perspective(600px) translate3d(0px, 0px, 0px) rotateY(-20deg) scaleY(0.88)' -->

    <section ref="containerRef" class="banner-wrapper relative">
      <div ref="swiperCoverRef">
        <Swiper
          :modules="modules"
          :effect="'coverflow'"
          :grab-cursor="true"
          :centered-slides="true"
          :slides-per-view="3"
          :loop="true"
          :autoplay="{ delay: 400000, disableOnInteraction: false }"
          :coverflow-effect="{ rotate: 30, stretch: 23, depth: 150, modifier: 1, slideShadows: true }"
          :navigation="{ enabled: false }"
          class="w-full h-full px-10"
          @swiper="onSwiperInit"
        >
          <SwiperSlide v-for="(s, i) in slides" :key="i" class="cover-slide h-full w-400">
            <img src="../../static/image/meinv.png" class="w-full round-20" style="height: auto" alt="" />
          </SwiperSlide>
        </Swiper>
      </div>
      <div @click="goPrev" class="w-30 h-30 round-6 color-ccc fs-14 pointer absolute left-10 z-1 top50">左</div>
      <div @click="goNext" class="w-30 h-30 round-6 color-ccc fs-14 pointer absolute right-10 z-1 top50">右</div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { EffectCoverflow, Pagination, Navigation, Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/effect-coverflow';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

const modules = [EffectCoverflow, Pagination, Navigation, Autoplay];

// 顶部倒计时
const countdown = ref('12:34:56');
let timer: number | null = null;
onMounted(() => {
  timer = window.setInterval(() => {
    const [h, m, s] = countdown.value.split(':').map(Number);
    let total = h * 3600 + m * 60 + s - 1;
    if (total < 0) total = 12 * 3600 + 34 * 60 + 56;
    const nh = Math.floor(total / 3600);
    const nm = Math.floor((total % 3600) / 60);
    const ns = total % 60;
    countdown.value = [nh, nm, ns].map((n) => String(n).padStart(2, '0')).join(':');
  }, 1000);
});
onBeforeUnmount(() => {
  if (timer) clearInterval(timer);
});

// 轮播数据
const slides = [
  { sub: '新功能上线', title: '走！扫街去', bg: 'linear-gradient(135deg,#2980b9,#6dd5fa,#ffd86b)' },
  { sub: '全新发布', title: 'Seedream 5.0 Pro', bg: 'linear-gradient(135deg,#3a1c71,#d76d77,#ffaf7b)' },
  { sub: '热门玩法', title: '爆款短片复刻', bg: 'linear-gradient(135deg,#0f2027,#203a43,#2c5364)' },
  { sub: '电商专属', title: '皮克斯动画广告', bg: 'linear-gradient(135deg,#8e2de2,#4a00e0)' },
  { sub: '音乐创作', title: '一键生成 MV', bg: 'linear-gradient(135deg,#c31432,#240b36)' },
  { sub: '短剧专区', title: '一句话生成短剧', bg: 'linear-gradient(135deg,#159957,#155799)' },
  { sub: '产品展示', title: '商品展示片制作', bg: 'linear-gradient(135deg,#f7971e,#ffd200)' },
];

const containerRef = ref<any>(null);
const swiperCoverRef = ref<any>(null);
const updateScale = () => {
  if (!swiperCoverRef.value || !containerRef.value) return;
  const bw = containerRef.value.offsetWidth; // 获取元素宽度
  swiperCoverRef.value.style.width = `${bw + 138}px`; // 设置缩放比例
  swiperCoverRef.value.style.transform = `translateX(-69px)`; // 设置缩放比例
};

const onSwiperInit = (swiper: any) => {
  swiperInstance.value = swiper; // 保存原生 Swiper 实例
  console.log('Swiper 已初始化');
};

// 专门存放原生 Swiper 实例（与组件 ref 分开，避免被 Vue 组件代理覆盖）
const swiperInstance = ref<any>(null);

// 上一张
const goPrev = () => {
  swiperInstance.value?.slidePrev();
};

// 下一张
const goNext = () => {
  swiperInstance.value?.slideNext();
};

onMounted(() => {
  updateScale();
  window.addEventListener('resize', updateScale);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', updateScale);
});
</script>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  background: #141414;
  overflow-x: hidden;

  .logo {
    letter-spacing: 1px;
  }
  .train-btn {
    background: transparent;
    color: #daa520;
    border: 1px solid #daa520 !important;
  }
  .icon-btn {
    &:hover {
      background: #333;
      color: #fff;
    }
  }
  .promo {
    background: rgba(64, 158, 255, 0.12);
    color: #409eff;
    border: 1px solid rgba(64, 158, 255, 0.3) !important;
  }
  .color-gold {
    color: #daa520;
  }
  .avatar {
    border: 1px solid #444;
  }
}
.banner-wrapper {
  margin: 0 auto;
  overflow: hidden;
  .top50 {
    top: 50%;
    transform: translateY(-50%);
    background: #33333352;
    &:hover {
        background: #1111118f;
    }
  }
}

@media (max-width: 1440px) {
  .banner-wrapper {
    width: 100%;
  }
}
@media (min-width: 1441px) {
  .banner-wrapper {
    width: 1440px;
  }
}
</style>
