<template>
  <div class="IndexPage" @click.once="playMusic">
    <div class="index-title">
      <div class="title-flower"></div>
    </div>
    <div class="location">
      <div class="building index-location-bj" @click="playFn(1)"></div>
      <div class="building index-location-xa" @click="playFn(2)"></div>
      <div class="building index-location-sh" @click="playFn(3)"></div>
      <div class="building index-location-wh" @click="playFn(4)"></div>
      <div class="building index-location-gz" @click="playFn(5)"></div>
    </div>
    <div class="location-name">
      <div class="place-name bj" @click="playFn(1)"></div>
      <div class="place-name xa" @click="playFn(2)"></div>
      <div class="place-name sh" @click="playFn(3)"></div>
      <div class="place-name wh" @click="playFn(4)"></div>
      <div class="place-name gz" @click="playFn(5)"></div>
    </div>
    <div class="index-line"></div>
    <div class="location-mark">
      <div class="mark mark-bj" :class="isMarkList[0] ? 'is-mark' : ''"></div>
      <div class="mark mark-xa" :class="isMarkList[1] ? 'is-mark' : ''"></div>
      <div class="mark mark-sh" :class="isMarkList[2] ? 'is-mark' : ''"></div>
      <div class="mark mark-wh" :class="isMarkList[3] ? 'is-mark' : ''"></div>
      <div class="mark mark-gz" :class="isMarkList[4] ? 'is-mark' : ''"></div>
    </div>
    <div class="line-box">
      <svg class="path-svg" viewBox="0 0 348 1048">
        <path id="motionPath"
          d="M318.125,1.816 L318.125,112.223 L142.430,112.223 L142.430,297.624 L245.454,297.624 L245.454,804.524 L4.236,804.524 L4.236,1014.515"
          fill="none" stroke="rgb(230, 91, 36)" stroke-width="2" stroke-linecap="round" />
      </svg>
      <!-- <div class="box" ref="xflIconRef"></div> -->
      <div class="xfl-icon" ref="xflIconRef">
        <div id="frameBox"></div>
      </div>
    </div>
    <div class="top-bird-1"></div>
    <div class="top-bird-2"></div>
    <div class="wh-cloud"></div>
    <div class="crane-1"></div>
    <div class="crane-2"></div>
    <div class="boat-1"></div>
    <div class="boat-2"></div>
    <div class="boat-3"></div>
    <div class="bottom-bird-1"></div>
    <div class="bottom-cloud"></div>

    <!-- 指引提示 -->
    <div class="click-tips" v-if="locationId == 0"></div>
    <div class="tips-text" v-if="locationId == 0"></div>

    <!-- 背景音乐 -->
    <div class="music_icon" @click="musicIconPlay">
      <audio style="display: none; height: 0" id="bg-music" autoplay="autoplay" preload="auto" :src="bgm"
        loop="loop"></audio>
    </div>
  </div>
  <div class="video-popup" @touchmove.prevent>
    <div class="video-box">
      <video class="plyr" id="player" controls>
        <source src="https://cdn.plyr.io/static/our-video.mp4" type="video/mp4">
      </video>
    </div>
    <div class="cls-btn" @click="hideVideo"></div>
  </div>
</template>

<script setup>

import Plyr from 'plyr';
import 'plyr/dist/plyr.css'; // 导入 Plyr 样式
import ImageFramePlayer from 'image-frame-player';
import { showSuccessToast } from "vant";
import { gsap } from 'gsap'
import { MotionPathPlugin } from 'gsap/MotionPathPlugin'
import { isAndriod } from "@/plugins"
gsap.registerPlugin(MotionPathPlugin)



// 路线节点
const progressArr = [0, 25, 45, 86, 100,]

const playerRef = ref(null)
const imageFramePlayer = ref(null)
const locationId = ref(0)  //当前所在节点
const isMarkList = ref([false, false, false, false, false])
const isDone = ref(false)
const isShowDone = ref(false)
const xflIconRef = ref(null)
const currentProgress = ref(0)  // 当前进度百分比
const debounce = ref(true)
let animation = null
const firstClick = ref(true)
const isCloseMusic = ref(false)

const bgm = new URL(`../assets/media/bgm.mp3`, import.meta.url).href

// 视频库
const videoList = [
  'https://cdn.xglpa.com/xyyh-hhj-video/1.mp4',
  'https://cdn.xglpa.com/xyyh-hhj-video/2.mp4',
  'https://cdn.xglpa.com/xyyh-hhj-video/3.mp4',
  'https://cdn.xglpa.com/xyyh-hhj-video/4.mp4',
  'https://cdn.xglpa.com/xyyh-hhj-video/5.mp4',
]

// 帧图
const frameList = Array.from({ length: 35 }, (_, index) => {
  return new URL(`../assets/images/xlz/xfl_${index + 1}.png`, import.meta.url).href
});

onMounted(() => {
  iosMusic()
  initSvgAnimation()
  animationFn();
  // palyFrame()
  playerRef.value = new Plyr('#player', {
    controls: ['play', 'progress', 'current-time', 'fullscreen'],
    fullscreen: {
      enabled: true, // 启用全屏功能
      fallback: true, // 启用全屏回退
      iosNative: true, // 在 iOS 上启用原生全屏
    },
    autoplay: false, // 自动播放
    mute: false,    // 初始不静音
    loop: {        // 循环播放
      active: false
    },
  })

})


// 播放事件
const playFn = (index) => {
  if (firstClick.value) return
  if (debounce.value) return
  debounce.value = true
  if (locationId.value == 0) {

    if(!isCloseMusic.value) pauseMusic()
    gsap.set('.xfl-icon', { autoAlpha: 1 })
  }
  if (locationId.value !== index) {
    // 计算相差多少步
    const setpNum = Math.abs(index - locationId.value)
    const direction = index - locationId.value > 0 ? 1 : -1
    locationId.value = index;
    
    if(!isCloseMusic.value) pauseMusic()
    playerRef.value.source = {
      type: 'video',
      sources: [
        {
          src: videoList[locationId.value - 1],
          type: 'video/mp4'
        }
      ]
    };
    playerRef.value.pause();
    console.log('playerRef.value', playerRef.value);


    handleMove(progressArr[index - 1], setpNum, direction)
  } else {
    locationId.value = index

    gsap.to(".video-popup", {
      autoAlpha: 1,
      duration: 0.3,
      onComplete: () => {
        debounce.value = false
        playerRef.value.source = {
          type: 'video',
          sources: [
            {
              src: videoList[locationId.value - 1],
              type: 'video/mp4'
            }
          ]
        };

        playerRef.value.play()
      },
      onStart: () => {
        pauseMusic()


      }
    });

  }

}

// 关闭弹窗
const hideVideo = () => {
  // playerRef.value.fullscreen.enter();
  playerRef.value.stop();
  gsap.to(".video-popup", {
    autoAlpha: 0,
    duration: 0.5, onComplete: () => {
      
      if(!isCloseMusic.value) musicPlay()
    
    }
  });

  if (isDone.value && !isShowDone.value) {
    showSuccessToast('您已完成所有任务！')
    isShowDone.value = true
  }
}
// 新增：坐标转换方法
const convertCoordinates = (point) => {
  const svg = document.querySelector('.path-svg')
  const pt = svg.createSVGPoint()


  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent)

  // 添加1px偏移修复iOS精度问题
  pt.x = point.x + 1
  pt.y = point.y + 1

  // 考虑设备像素比
  const dpr = window.devicePixelRatio || 1
  const screenPoint = pt.matrixTransform(svg.getScreenCTM().inverse())

  return {
    x: Math.round(screenPoint.x * dpr),
    y: Math.round(screenPoint.y * dpr)
  }
}

const initSvgAnimation = async () => {
  // 获取SVG元素
  const svg = document.querySelector('.path-svg')
  const path = document.querySelector('#motionPath')

  // 关键：设置SVG的preserveAspectRatio
  svg.setAttribute('preserveAspectRatio', 'xMidYMid meet')

  animation = gsap.to(xflIconRef.value, {
    motionPath: {
      path: "#motionPath",
      align: "#motionPath",
      autoRotate: false,
      alignOrigin: [0.5, 0.5], // 中心点对齐
      type: "uniform", // 均匀分布路径点
      curviness: 0,
      // 新增坐标转换
      from: convertCoordinates({ x: 0, y: 0 }),
      to: convertCoordinates({ x: 1, y: 1 }),
      usePathData: true
    },
    snap: {
      x: 1,  // 强制对齐整像素
      y: 1
    },
    paused: true,
    duration: 1,
    ease: "none",
    force3D: true // 启用GPU加速
  })

  // 等待2帧确保渲染完成
  // await new Promise(resolve => requestAnimationFrame(resolve))
  // await new Promise(resolve => requestAnimationFrame(resolve))

  // 强制重排

  // void path.offsetHeight

  // 初始定位优化
  // gsap.set(xflIconRef.value, {
  //   x: convertCoordinates(path.getPointAtLength(0)).x,
  //   y: convertCoordinates(path.getPointAtLength(0)).y,
  //   scale: 1.5,
  //   force3D: true
  // })


}

// 统一运动控制方法
const handleMove = (percent, setpNum,) => {
  const target = percent

  // 边界限制
  const clampedTarget = Math.min(Math.max(target, 0), 100)
  console.log('clampedTarget', clampedTarget);

  // 创建补间动画
  gsap.to(currentProgress, {
    value: clampedTarget,
    duration: 1 * setpNum,
    ease: "power2.inOut", // 统一缓动
    onUpdate: () => {
      animation.progress(currentProgress.value / 100)
    },
    onComplete: () => {
      console.log(`当前进度: ${currentProgress.value}%`)
      // 标记已经去过的地点
      isMarkList.value[locationId.value - 1] = true


      gsap.to(".video-popup", {
        autoAlpha: 1,
        duration: 0.3,
        onStart: () => {

        },
        onComplete: () => {
          debounce.value = false
          setTimeout(() => {
            playerRef.value.play()
            console.log('ssddd');

          }, 500);

        }
      });
    }
  })
}

// 入场动画
const animationFn = () => {
  const tl = gsap.timeline({
    onComplete: () => {
      gsap.to(".title-flower", {
        rotation: 360,
        duration: 4,
        repeat: -1,
        ease: "linear",
      });
      gsap.to(".title-flower", {
        scale: 1.5,
        duration: 4,
        repeat: -1,
        ease: "linear",
        yoyo: true,
      });
      // gsap.to(".index-title", {
      //   y: "-=20",
      //   duration: 2,
      //   repeat: -1,
      //   ease: "linear",
      //   yoyo: true,
      // });

      gsap.to(".place-name", {
        scale: "1.05",
        y: "-=5",
        duration: 2,
        repeat: -1,
        yoyo: true,
        // ease: "back.inOut(1.7)",
      })

      gsap.to(".boat-1,.boat-2", {
        scale: "1.05",
        x: "-=30",
        duration: 4,
        repeat: -1,
        yoyo: true,
        ease: "back.inOut(1.1)",
      })
      gsap.to(".boat-3", {
        scale: "1.05",
        x: "+=30",
        duration: 3,
        repeat: -1,
        yoyo: true,
        ease: "back.inOut(2.9)",
      })
      gsap.to(".crane-1", {
        scale: "1.1",
        y: "-=10",
        duration: 3,
        repeat: -1,
        yoyo: true,
      })
      gsap.to(".crane-2", {
        scale: "1.1",
        y: "-=10",
        x: "-=20",
        duration: 3,
        repeat: -1,
        yoyo: true,
      })
      gsap.to(".click-tips", {
        scale: ".7",
        x: "-=10",
        duration: 2,
        repeat: -1,
        yoyo: true,
        ease: "bounce.out()",

      })
    }
  });
  tl.from(".IndexPage", {
    autoAlpha: 0,
    scale: 1.2,
    duration: 0.75,
    ease: "power2.out",
    onComplete: () => {

    }
  })
    .from(".index-title", {
      autoAlpha: 0,
      y: -5,
      duration: 1,
      ease: "power1.out",
    })
    .from(".bj,.index-location-bj", {
      autoAlpha: 0,
      y: -20,
      duration: 1,
      ease: "back.inOut(.3)",
    }, 0.3)
    .from(".xa,.index-location-xa", {
      autoAlpha: 0,
      y: -20,
      duration: 1,
      ease: "back.inOut(3)",
    }, 0.5)
    .from(".sh,.index-location-sh", {
      autoAlpha: 0,
      y: -20,
      duration: 1,
      ease: "back.inOut(3)",
    }, 0.7)
    .from(".wh,.index-location-wh", {
      autoAlpha: 0,
      y: -20,
      duration: 1,
      ease: "back.inOut(3)",
    }, 1)
    .from(".gz,.index-location-gz", {
      autoAlpha: 0,
      y: -20,
      duration: 1,
      ease: "back.inOut(3)",
    }, 1.2)
    .from(".index-line,.location-mark", {
      autoAlpha: 0,
      duration: 1,
      ease: "back.inOut(3)",
    }, 1.5)
    .from(".click-tips,.tips-text", {
      autoAlpha: 0,
      x: 20,
      duration: 1,
      ease: "back.inOut(3)",
      onComplete: () => {
        debounce.value = false

      }
    })



}



// ios端音乐自动播放
const musicBtnAni = gsap.timeline();
const playStatu = ref(true);
const musicPlay = () => {
  let audio = document.getElementById("bg-music");
  musicBtnAni.play();
  audio.play();  
};

const musicIconPlay = () => {
  let audio = document.getElementById("bg-music");
  musicBtnAni.play();
  audio.play();
  if (playStatu.value == true) {
    musicBtnAni.pause();
    audio.pause();
    playStatu.value = false;
    console.log("暂停");
    isCloseMusic.value = true
  } else {
    musicBtnAni.play();
    audio.play();
    playStatu.value = true;
    console.log("播放");
    isCloseMusic.value = false

  }
};

// 暂停
const pauseMusic = () => {

  let audio = document.getElementById("bg-music");
  audio.pause();
  musicBtnAni.pause();
}

const iosMusic = () => {
  // ios自动播放音乐
  var audio = document.getElementById("bg-music");
  audio.play();
  document.addEventListener(
    "WeixinJSBridgeReady",
    function () {

      WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
        audio.play();
      });
    },
    false
  );

  musicBtnAni.fromTo(
    ".music_icon",
    { rotation: "0" },
    { rotation: "+=360", repeat: -1, duration: 7, ease: "none" }
  );
  musicBtnAni.play();
};
const playMusic = () => {

  var audio = document.getElementById("bg-music");
  audio.play();
  firstClick.value = false
};

</script>


<style lang="scss" scoped>
.IndexPage {
  @include bgSrc("index/bg.jpg");
  @include box(750px, 1929px);
  overflow: hidden;
  position: relative;

  .music_icon {
    @include pos(50px, 50px, 73px, 100px);
    @include bgSrc("index/music.png");

  }

  .index-title {
    @include bgSrc("index/title.png");
    @include pos(602px, 372px, 74px, -10px);
    position: relative;
    pointer-events: none;
    overflow: hidden;
    transform: scale3d(0.9, 0.9, 0.9);

    .title-flower {
      @include bgSrc("index/title-flower.png");
      @include pos(58px, 56px, 159px, 279px);
    }
  }

  .index-line {
    @include bgSrc("index/line.png");
    @include pos(348px, 1048px, 170px, 568px);
    pointer-events: none;
  }

  .wh-cloud {
    @include bgSrc("index/wh-cloud.png");
    @include pos(324px, 298px, 9px, 1061px);
    pointer-events: none;
  }

  .location {
    .index-location-bj {
      @include bgSrc("index/location-bj.png");
      @include pos(507px, 233px, 142px, 341px);
    }

    .index-location-xa {
      @include bgSrc("index/location-xa.png");
      @include pos(303px, 319px, 36px, 647px);
    }

    .index-location-sh {
      @include bgSrc("index/location-sh.png");
      @include pos(378px, 413px, 372px, 760px);
    }

    .index-location-wh {
      @include bgSrc("index/location-wh.png");
      @include pos(192px, 229px, 94px, 1067px);
    }

    .index-location-gz {
      @include bgSrc("index/location-gz.png");
      @include pos(750px, 507px, 0px, 1402px);
    }
  }

  .location-name {
    .bj {
      @include bgSrc("index/name-bj.png");
      @include pos(98px, 65px, 161px, 404px);
    }

    .xa {
      @include bgSrc("index/name-xa.png");
      @include pos(98px, 65px, 190px, 658px);
    }

    .sh {
      @include bgSrc("index/name-sh.png");
      @include pos(98px, 65px, 610px, 797px);
    }

    .wh {
      @include bgSrc("index/name-wh.png");
      @include pos(98px, 66px, 266px, 1061px);
    }

    .gz {
      @include bgSrc("index/name-gz.png");
      @include pos(98px, 66px, 499px, 1389px);
    }
  }

  .location-mark {
    .mark {
      @include bgSrc("index/sign-icon.png");
      // 灰色滤镜
      filter: grayscale(100%);
    }

    .mark-bj {
      @include pos(73px, 75px, 466px, 540px);
    }

    .mark-xa {
      @include pos(73px, 75px, 291px, 731px);
    }

    .mark-sh {
      @include pos(73px, 75px, 393px, 976px);
    }

    .mark-wh {
      @include pos(73px, 75px, 152px, 1348px);
    }

    .mark-gz {
      @include pos(73px, 75px, 150px, 1558px);
    }

    .is-mark {
      filter: grayscale(0%);
    }
  }

  .top-bird-1 {
    @include bgSrc("index/top-bird-1.png");
    @include pos(112px, 46px, 559px, 117px);
    pointer-events: none;
  }

  .top-bird-2 {
    @include bgSrc("index/top-bird-2.png");
    @include pos(102px, 42px, 553px, 408px);
    pointer-events: none;
  }

  .crane-1 {
    @include bgSrc("index/crane-1.png");
    @include pos(80px, 116px, 44px, 1147px);
    pointer-events: none;
  }

  .crane-2 {
    @include bgSrc("index/crane-2.png");
    @include pos(117px, 112px, 197px, 1210px);
    pointer-events: none;
  }

  .boat-1 {
    @include bgSrc("index/boat.png");
    @include pos(181px, 57px, 567px, 1156px);
    pointer-events: none;
  }

  .boat-2 {
    @include bgSrc("index/boat-2.png");
    @include pos(186px, 62px, 125px, 1749px);
    pointer-events: none;
  }

  .boat-3 {
    @include bgSrc("index/boat.png");
    @include pos(197px, 49px, 438px, 1834px);
    pointer-events: none;
  }

  .bottom-bird-1 {
    @include bgSrc("index/bottom-bird-1.png");
    @include pos(89px, 42px, 324px, 1797px);
    pointer-events: none;
  }

  .bottom-cloud {
    @include bgSrc("index/cloud-bottom.png");
    @include pos(749px, 371px, 0px, 1558px);
    pointer-events: none;
  }


  .click-tips {
    @include pos(58px, 71px, 556px, 500px);
    @include bgSrc("index/arrow-icon.png");
    pointer-events: none;
  }

  .tips-text {
    @include pos(163px, 92px, 586px, 560px);
    @include bgSrc("index/tips.png");
    pointer-events: none;
  }
}

.video-popup {
  @include fixed();
  @include flexCen();
  background-color: rgba($color: #000000, $alpha: .6);
  visibility: hidden;

  .cls-btn {
    @include box(50px, 50px);
    @include bgSrc("index/cls-btn.png");
    margin-top: 40px;
  }

  .video-box {
    width: 700px;
    border-radius: 12px;
    border: 1px solid #fff;
    overflow: hidden;

    .plyr {
      @include box(100%, 100%);
    }
  }
}



.line-box {
  @include pos(348px, 1048px, 185px, 583px);
  // overflow: visible;
  pointer-events: none;
  /* 确保元素可超出容器 */

  .path-svg {
    width: 100%;
    height: 100%;
    // transform: translateZ(0);
    opacity: 0;
    /* 修复渲染层级 */
    backface-visibility: hidden;
    /* 修复iOS偏移 */
  }


  .xfl-icon {
    pointer-events: none;
    position: absolute;
    width: 163px;
    height: 133px;
    transform: scale(1.2);
    visibility: hidden;

    /* 旧iOS需要绝对像素值 */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
      transform: scale(1.2);
    }

    #frameBox {
      width: 100%;
      height: 100%;
      @include bgSrc("index/xfl-icon.png");


    }
  }

}
</style>
