<script setup lang="ts">
import Loader from './views/Loader.vue';
import s1Icon from './assets/s1_icon.png';
import s2Icon from './assets/s2_icon.png';
import s3Icon from './assets/s3_icon.png';
import s4Icon from './assets/s4_icon.png';
import AniEle from './ani-comp/AniEle.vue';
import { computed, ref, useTemplateRef } from 'vue';
import eas from './assets/audio';

const currentStage = ref(-1)

const stages = [1, 2, 3, 4]

const stageIcons = [
  s1Icon,
  s2Icon,
  s3Icon,
  s4Icon,
]

const icon_grow = new URL('./assets/按钮高亮.zip', import.meta.url).href;
const icon_intro = new URL('./assets/按钮引导.zip', import.meta.url).href;

const home_intro = new URL('./assets/首页引导.zip', import.meta.url).href;
const egg_intro = new URL('./assets/晶圆引导.zip', import.meta.url).href;

const loading = ref(true);


const mainVideo = useTemplateRef('main-video');

function continueAnimation() {
  const cR = mainVideo.value?.getCurrentRule().name
  console.log('continueAnimation', cR);


  switch (cR) {
    case 'intro-enter':
      mainVideo.value?.jumpTo('intro-out');
      eas.play('water_interface')
      eas.play('shimmering_light')
      eas.play('whoosh')
      break;
    case 'egg-loop':
      mainVideo.value?.jumpToSoftly('egg-out');
      eas.play('water_interface')
      eas.play('whoosh')

      break;
  }
}

const currentFrame = ref(0);

const showHomeIntro = computed(() => {
  return currentFrame.value == 34;
});

const showEggIntro = computed(() => {
  return currentFrame.value >= 124 && currentFrame.value < 175;
});

function onFrameProgress(frame: number) {
  // console.log('onFrameProgress', frame);

  currentFrame.value = frame;
  if (frame === 240) {
    currentStage.value = 0;
  } else if (frame === 339) {
    currentStage.value = 1;
  } else if (frame === 498) {
    currentStage.value = 2;
  } else if (frame === 638) {
    currentStage.value = 3;
  } else if (frame === 1045) {
    currentStage.value = -1; // Reset current stage when reaching the end
    mainVideo.value?.jumpTo('intro-enter'); // Loop back to intro
  }

  if (frame == 868) {
    eas.play('whoosh');
  }

  if (frame == 243) {
    descStage.value = [0, 0];
  } else if (frame == 303) {
    descStage.value = [0, 1];
  } else if (frame == 347) {
    descStage.value = [1, 0];
  } else if (frame == 506) {
    descStage.value = [2, 0];
  } else if (frame == 647) {
    descStage.value = [3, 0];
  } else if (frame == 803) {
    descStage.value = [-1, 0]; // Reset description stage when reaching the end
  }
}

function clickBtn(index: number) {
  if (currentStage.value === index) {
    mainVideo.value?.jumpTo(`stage-${index + 1}`);
    eas.play('water_interface')
    currentStage.value = -1; // Reset current stage after clicking
  }
}


const bgm = useTemplateRef('bgm-ele');
const bgmURL = new URL('./assets/audio/The AI Technology.mp3', import.meta.url).href;

window.addEventListener('pointerdown', () => {
  if (bgm.value?.paused) {
    bgm.value.play().catch((error) => {
      console.error('Error playing background music:', error);
    });
  }
});


const isPortrait = ref(window.innerHeight > window.innerWidth);

window.addEventListener('resize', () => {
  isPortrait.value = window.innerHeight > window.innerWidth;
});

document.addEventListener('pointerdown', (e) => {
  //鼠标中键
  if (e.buttons == 4) {
    // 处理鼠标中键点击事件
    document.body.requestFullscreen().catch((error) => {
      console.error('Error entering fullscreen:', error);
    });
  }
});

const loadProgress = ref({ download: 0, decode: 0 });

const mainVideoURL = new URL('./assets/main.mp4', import.meta.url).href;
const mainZipURL = new URL('./assets/main.zip', import.meta.url).href;

const descStage = ref([-1, 0])

// 描述内容数据放在 setup 中
interface DescItem { title: string; contents: string[] }
const descData: DescItem[] = [
  { title: '第1步', contents: ['首先，引入一种化学物质', '在反应腔内与硅片表面发生反应形成一层薄膜'] },
  { title: '第2步', contents: ['然后，将所有残留的分子<br>通过惰性气体或化学惰性气体吹扫出去'] },
  { title: '第3步', contents: ['接下来，引入第二种元素的反应气体与薄膜发生反应'] },
  { title: '第4步', contents: ['随后反应腔内残留的原子和分子再次被吹扫清除'] },
];

const currentDesc = computed(() => {
  const [sIdx, subIdx] = descStage.value;
  if (sIdx < 0) return null;
  const item = descData[sIdx];
  return { title: item.title, content: item.contents[Math.min(subIdx, item.contents.length - 1)] };
});


</script>

<template>
  <div class="app" :class="{ rotate: isPortrait }">
    <audio :src="bgmURL" loop autoplay ref="bgm-ele"></audio>

    <Transition name="fade">
      <Loader v-if="loadProgress.decode < 1" :progress="loadProgress" />
    </Transition>

    <AniEle ref="main-video" class="main-video" :rules="[
      { name: 'intro-enter', duration: 33, frame: 35, loop: 1, pauseAfter: true },
      { name: 'intro-out', duration: 33, frame: 89, loop: 1 },
      { name: 'egg-loop', duration: 33, frame: 50, loop: 0 },
      { name: 'egg-out', duration: 33, frame: 67, loop: 1, pauseAfter: true },
      { name: 'stage-1', duration: 33, frame: 99, loop: 1, pauseAfter: true },
      { name: 'stage-2', duration: 33, frame: 159, loop: 1, pauseAfter: true },
      { name: 'stage-3', duration: 33, frame: 140, loop: 1, pauseAfter: true },
      { name: 'stage-4', duration: 33, frame: 407, loop: 1 },
    ]" :width="1920" :height="1080" stretch autoPlay log @click="continueAnimation"
      :url="{ video: mainVideoURL, zip: mainZipURL }" type="video" @loading="loadProgress = $event"
      @progress="onFrameProgress" />

    <Transition name="fade">
      <AniEle v-if="showHomeIntro" :url="home_intro" :width="444" :height="50" :rules="[
        { name: 'main', loop: 0, duration: 33, frame: 24 },
      ]" class="home-intro intro-text" />
    </Transition>
    <Transition name="fade">
      <AniEle v-if="showEggIntro" :url="egg_intro" :width="516" :height="54" :rules="[
        { name: 'main', loop: 0, duration: 33, frame: 25 },
      ]" class="egg-intro intro-text" />
    </Transition>

    <Transition name="slide-in">
      <div class="actions" v-if="currentStage >= 0">
        <div class="action" v-for="(s, index) in stages" :key="index"
          :style="{ cursor: currentStage == index ? 'pointer' : 'not-allowed' }" @click="clickBtn(index)">
          <img src="./assets/icon_bg.png" alt="" class="bg" />
          <img :src="stageIcons[index]" alt="" class="icon" />
          <AniEle :url="icon_grow" :width="210" :height="242" :rules="[{
            name: 'grow',
            duration: 33,
            frame: 24,
            loop: 0,
          }]" class="grow" v-if="index == currentStage" />
          <AniEle :url="icon_intro" :width="425" :height="54" :rules="[
            { name: 'enter', duration: 33, frame: 25, loop: 1, },
            { name: 'loop', duration: 33, frame: 23, loop: 0, }]" v-if="index == currentStage" class="intro" />
        </div>
      </div>
    </Transition>

    <Transition name="fade">
      <div class="desc" v-if="descStage[0] >= 0">
        <div class="desc-wrapper">
          <Transition name="fade" mode="out-in">
            <div class="desc-item" :key="descStage[0]">
              <div class="desc-title">{{ currentDesc?.title }}</div>
              <Transition name="fade" mode="out-in">
                <div class="desc-content" :key="descStage[0] + '-' + descStage[1]" v-html="currentDesc?.content"></div>
              </Transition>
            </div>
          </Transition>
        </div>
      </div>
    </Transition>
  </div>
</template>

<style scoped lang="scss">
@keyframes stretch {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}


.desc {
  color: white;

  .desc-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 16 / 9;
    height: 100vmin;
    max-width: 100vmax;
    max-height: calc(100vmax * 9 / 16);
  }

  .desc-item {
    position: relative;
    left: 9vmin;
    top: 6vmin;
    display: flex;
    /* 横向排列 */
    flex-direction: row;
    align-items: flex-end;
    /* 底部对齐 */
    gap: 4vmin;
    /* 标题与内容间距 */
    padding: 1vmin .5vmin;
    /* 给下划线留空间 */
    width: 70vmin;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: .3vmin;
      /* 更细的下划线 */
      background-color: white;
      animation: stretch 1s ease forwards;
    }
  }

  .desc-title {
    font-size: 5.5vmin;
    letter-spacing: .2em;
    line-height: 1;
    /* 避免额外高度 */
    white-space: nowrap;
    /* 保持一行 */
  }

  .desc-content {
    font-size: 2vmin;
    line-height: 1.2;
    font-weight: light;
  }


}


.intro-text {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 1000;
  height: 4.4vmin;
  pointer-events: none;

  &.home-intro {
    left: 50%;
    top: 63%;
  }

  &.egg-intro {
    left: 70%;
    top: 50%;
  }
}

.app {
  position: relative;
  height: 100vh;
  width: 100vw;

  &.rotate {
    height: 100vw;
    width: 100vh;
    transform: rotate(90deg) translateY(-100%);
    transform-origin: 0% 0%;
  }
}

img {
  display: block;
}

.actions {
  height: 100%;
  background-color: #411341;
  position: fixed;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 7vmin 7vmin 7vmin 8vmin;
  z-index: 1000;
}

.action {
  position: relative;

  .bg {
    height: 18vmin;
  }

  .grow {
    position: absolute;
    z-index: 1;
    height: 22vmin;
    width: fit-content;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8vmin;
  }

  .intro {
    position: absolute;
    left: -4vmin;
    top: 50%;
    transform: translate(-100%, -100%);
    height: 5vmin;
  }
}

.main-video {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity .4s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
