<template>
  <view class="container">
    <!-- 背景音乐 -->
    <audio id="bgmAudio" :src="audioUrl" loop controls style="display:none;"></audio>
    
    <!-- 音乐按钮 -->
    <view class="bgm-btn" :class="{ muted: !isPlaying }" @click="toggleBgm">
      <text class="icon-play">🎵</text>
    </view>

    <!-- 轮播图 -->
    <swiper class="swiper" :current="currentSlide" @change="onSwiperChange" :vertical="true" :circular="false" :duration="500">
      <!-- 第1页：欢迎页 -->
      <swiper-item>
        <view class="slide page-welcome">
          <canvas type="2d" id="fireworks-canvas" class="fireworks-canvas"></canvas>
          <image class="caihua caihua-1" src="/static/elements/caihua1.webp" mode="aspectFit"></image>
          <image class="caihua caihua-2" src="/static/elements/caihua1.webp" mode="aspectFit"></image>
          
          <view class="page-content">
            <view class="main-title">【我们结婚啦】</view>
            <image class="ref-image" src="/static/Images/image1-1.webp" mode="aspectFill"></image>
            
            <view class="couple-row">
              <view class="person-block">
                <view class="brush-bg">
                  <text class="person-label">新郎</text>
                </view>
                <text class="person-name">王超凡</text>
              </view>
              <text class="and-amp">&</text>
              <view class="person-block">
                <view class="brush-bg">
                  <text class="person-label">新娘</text>
                </view>
                <text class="person-name">祖苏雅</text>
              </view>
            </view>
            
            <view class="invite-wrap">
              <text class="invite-line">诚邀您及家人光临</text>
            </view>
            
            <view class="msg-lines">
              <text class="msg-line">见证我们生命中最重要的时刻</text>
              <text class="msg-line">分享这份爱的喜悦</text>
              <text class="msg-line">共启幸福新征程</text>
            </view>
            
            <view class="info-lines">
              <text class="info-line">2026年5月16日 午宴</text>
              <text class="info-line">泗洪县滋禧酒店</text>
            </view>
          </view>
        </view>
      </swiper-item>

      <!-- 第2页：照片1 -->
      <swiper-item>
        <view class="slide photo-page">
          <view class="page-content">
            <text class="section-label">壹 · PHOTO</text>
            <text class="blessing-title">执子之手，与子偕老</text>
            <view class="photo-frame-wrap">
              <image class="frame-deco" src="/static/elements/frame2.webp" mode="widthFix"></image>
              <view class="photo-inside">
                <image src="/static/photo/photo1.jpg" mode="aspectFill"></image>
              </view>
            </view>
            <text class="blessing-text">
从相遇到相守，从相知到相爱
感谢命运让我们相遇
愿你我往后余生
冷暖相知，喜乐同享
同量天地宽，共度日月长
            </text>
          </view>
        </view>
      </swiper-item>

      <!-- 第3页：照片2 -->
      <swiper-item>
        <view class="slide photo-page">
          <view class="page-content">
            <text class="section-label">贰 · PHOTO</text>
            <text class="blessing-title">死生契阔，与子成说</text>
            <view class="photo-frame-wrap">
              <image class="frame-deco" src="/static/elements/frame2.webp" mode="widthFix"></image>
              <view class="photo-inside">
                <image src="/static/photo/photo2.jpg" mode="aspectFill"></image>
              </view>
            </view>
            <text class="blessing-text">
每一次心跳都是因为你
每一个明天都想要你参与
愿得一人心，白首不相离
从此以后
你是我的唯一
            </text>
          </view>
        </view>
      </swiper-item>

      <!-- 第4页：照片3 -->
      <swiper-item>
        <view class="slide photo-page">
          <view class="page-content">
            <text class="section-label">叁 · PHOTO</text>
            <text class="blessing-title">琴瑟在御，莫不静好</text>
            <view class="photo-frame-wrap">
              <image class="frame-deco" src="/static/elements/frame2.webp" mode="widthFix"></image>
              <view class="photo-inside">
                <image src="/static/photo/photo3.jpg" mode="aspectFill"></image>
              </view>
            </view>
            <text class="blessing-text">
感谢生命中每一次相遇
让平凡的日子有了意义
愿与你一起
看遍世间所有风景
走过岁月年年岁岁
            </text>
          </view>
        </view>
      </swiper-item>

      <!-- 第5页：酬谢 -->
      <swiper-item>
        <view class="slide page-thanks">
          <view class="page-content">
            <text class="thanks-title">酬谢词</text>
            <text class="thanks-sub">THANKS & GRATITUDE</text>
            <text class="thanks-text">
感谢您百忙之中
拨冗出席我们的婚礼
见证我们人生中最重要的时刻

您的祝福与到来
是我们最珍贵的礼物
愿您一切顺遂，幸福安康
            </text>
            <text class="names-sign">王超凡 & 祖苏雅</text>
          </view>
        </view>
      </swiper-item>

      <!-- 第6页：婚礼信息 -->
      <swiper-item>
        <view class="slide page-info">
          <view class="page-content">
            <text class="info-title">婚礼信息</text>
            <view class="info-divider"></view>
            <text class="info-date">2026.05.16</text>
            <text class="info-lunar">农历三月三十 · 星期六</text>
            <text class="info-time">中午 12:00</text>
            
            <view class="info-detail">
              <view class="highlight" style="font-size:32rpx;">滋禧酒店</view>
              <text>江苏省泗洪县洪泽湖东大街16号</text>
              <text style="font-size:24rpx;color:#c9a86c;">滋禧酒店（宿迁泗洪香港花园店）</text>
            </view>
            
            <view class="map-wrap" @click="openMap">
              <map id="qqmap" style="width:100%;height:400rpx;" 
                :latitude="latitude" :longitude="longitude" 
                :markers="markers" :scale="15">
              </map>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>

    <!-- 页码指示器 -->
    <view class="page-indicator">
      <view v-for="i in 6" :key="i" class="dot" :class="{ active: currentSlide === i - 1 }" @click="goTo(i - 1)"></view>
    </view>

    <!-- 滑动提示 -->
    <view class="swipe-hint" v-if="currentSlide < 5">
      <text>上滑</text>
      <view class="swipe-hint-arrow"></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentSlide: 0,
      isPlaying: false,
      audioUrl: '/static/Audio/bgm.mp3',
      latitude: 33.470412,
      longitude: 118.22323,
      markers: [{
        latitude: 33.470412,
        longitude: 118.22323,
        title: '滋禧酒店',
        callout: { content: '滋禧酒店', color: '#8B6914', fontSize: 14, borderRadius: 10, padding: 10 }
      }]
    }
  },
  methods: {
    toggleBgm() {
      const audio = uni.createInnerAudioContext();
      audio.src = this.audioUrl;
      if (this.isPlaying) {
        audio.pause();
      } else {
        audio.play();
      }
      this.isPlaying = !this.isPlaying;
    },
    onSwiperChange(e) {
      this.currentSlide = e.detail.current;
    },
    goTo(index) {
      this.currentSlide = index;
    },
    openMap() {
      uni.openLocation({
        latitude: this.latitude,
        longitude: this.longitude,
        name: '滋禧酒店',
        address: '江苏省泗洪县洪泽湖东大街16号'
      });
    }
  },
  onLoad() {
    // 首次点击自动播放
    uni.showToast({ title: '点击任意位置开始', icon: 'none' });
  }
}
</script>

<style>
page {
  background-color: #faf6f0;
  height: 100%;
}
.container {
  height: 100vh;
  position: relative;
}

/* 音乐按钮 */
.bgm-btn {
  position: fixed;
  top: 20rpx;
  right: 20rpx;
  width: 80rpx;
  height: 80rpx;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}
.bgm-btn.muted {
  opacity: 0.6;
}

/* 轮播 */
.swiper {
  height: 100vh;
  width: 100%;
}

/* 页面通用 */
.slide {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #faf6f0 0%, #f5efe6 100%);
}
.page-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40rpx;
}

/* 欢迎页 */
.page-welcome {
  position: relative;
  overflow: hidden;
}
.fireworks-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.caihua {
  position: absolute;
  pointer-events: none;
  opacity: 0.7;
}
.caihua-1 {
  width: 320rpx;
  top: -20rpx;
  right: -40rpx;
  transform: rotate(15deg);
}
.caihua-2 {
  width: 280rpx;
  bottom: 160rpx;
  left: -60rpx;
  transform: rotate(-20deg);
}
.main-title {
  font-size: 72rpx;
  color: #8B6914;
  letter-spacing: 8rpx;
  margin-bottom: 20rpx;
}
.ref-image {
  width: 520rpx;
  height: 360rpx;
  border-radius: 24rpx;
  margin: 12rpx 0;
}
.couple-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32rpx;
  margin: 20rpx 0;
}
.person-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.brush-bg {
  background: linear-gradient(135deg, #fece6c 0%, #f5d78e 100%);
  padding: 8rpx 24rpx;
  border-radius: 8rpx;
}
.person-label {
  font-size: 36rpx;
  color: #8B4513;
  letter-spacing: 4rpx;
}
.person-name {
  font-size: 36rpx;
  color: #8B4513;
  letter-spacing: 6rpx;
  margin-top: 8rpx;
}
.and-amp {
  font-size: 52rpx;
  color: #c9a86c;
}
.invite-wrap {
  margin: 16rpx 0;
}
.invite-line {
  font-size: 40rpx;
  color: #8B4513;
  letter-spacing: 6rpx;
}
.msg-lines {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  margin: 8rpx 0;
}
.msg-line {
  font-size: 28rpx;
  color: #8B4513;
  letter-spacing: 4rpx;
  line-height: 1.6;
}
.info-lines {
  margin-top: 12rpx;
}
.info-line {
  font-size: 32rpx;
  color: #8B4513;
  letter-spacing: 4rpx;
  line-height: 1.8;
}

/* 照片页 */
.photo-page {
  background: #faf6f0;
}
.section-label {
  font-size: 24rpx;
  color: #c9a86c;
  letter-spacing: 12rpx;
  margin-bottom: 8rpx;
}
.blessing-title {
  font-size: 52rpx;
  color: #8B6914;
  letter-spacing: 6rpx;
  line-height: 1.4;
  margin-bottom: 20rpx;
}
.photo-frame-wrap {
  position: relative;
  width: 560rpx;
}
.frame-deco {
  width: 100%;
  position: relative;
  z-index: 2;
}
.photo-inside {
  position: absolute;
  top: 8%;
  left: 8%;
  right: 8%;
  bottom: 8%;
  z-index: 1;
  border-radius: 8rpx;
  overflow: hidden;
}
.photo-inside image {
  width: 100%;
  height: 100%;
}
.blessing-text {
  font-size: 27rpx;
  color: #7a5a42;
  line-height: 2.0;
  letter-spacing: 1px;
  max-width: 640rpx;
  margin-top: 16rpx;
}

/* 酬谢页 */
.page-thanks {
  background: #faf6f0;
}
.thanks-title {
  font-size: 84rpx;
  color: #8B6914;
  letter-spacing: 8rpx;
}
.thanks-sub {
  font-size: 26rpx;
  color: #c9a86c;
  letter-spacing: 8rpx;
  margin-top: 16rpx;
}
.thanks-text {
  font-size: 28rpx;
  color: #7a5a42;
  line-height: 2.4;
  letter-spacing: 2rpx;
  max-width: 640rpx;
  margin-top: 40rpx;
}
.names-sign {
  font-size: 56rpx;
  color: #8B6914;
  letter-spacing: 8rpx;
  margin-top: 32rpx;
}

/* 信息页 */
.page-info {
  background: #faf6f0;
}
.info-title {
  font-size: 76rpx;
  color: #8B6914;
  letter-spacing: 8rpx;
}
.info-divider {
  width: 120rpx;
  height: 4rpx;
  background: #c9a86c;
  margin: 16rpx 0;
}
.info-date {
  font-size: 88rpx;
  color: #8B6914;
  letter-spacing: 8rpx;
  line-height: 1.3;
}
.info-lunar {
  font-size: 26rpx;
  color: #c9a86c;
  letter-spacing: 6rpx;
  margin-top: 8rpx;
}
.info-time {
  font-size: 40rpx;
  color: #8B6914;
  letter-spacing: 4rpx;
  margin-top: 12rpx;
}
.info-detail {
  display: flex;
  flex-direction: column;
  font-size: 30rpx;
  color: #7a5a42;
  line-height: 2.0;
  letter-spacing: 2rpx;
  margin-top: 24rpx;
}
.info-detail .highlight {
  color: #8B6914;
  font-weight: 500;
}
.map-wrap {
  width: 100%;
  max-width: 680rpx;
  border-radius: 32rpx;
  overflow: hidden;
  border: 4rpx solid #e8d4a8;
  box-shadow: 0 12rpx 48rpx rgba(139,105,20,0.12);
  margin-top: 12rpx;
}

/* 页码指示器 */
.page-indicator {
  position: fixed;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  z-index: 100;
}
.dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: rgba(139,105,20,0.3);
}
.dot.active {
  background: #8B6914;
  width: 24rpx;
  height: 24rpx;
}

/* 滑动提示 */
.swipe-hint {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #c9a86c;
  font-size: 24rpx;
  letter-spacing: 4rpx;
  z-index: 100;
}
.swipe-hint-arrow {
  width: 40rpx;
  height: 40rpx;
  border-left: 4rpx solid #c9a86c;
  border-bottom: 4rpx solid #c9a86c;
  transform: rotate(-45deg);
  margin-top: 8rpx;
}
</style>