<template>
  <section class="flex flex-col h-b100 flex-1 px-20 pt-20">
    <div class="flex-1 flex flex-col h-b100 overflow-hidden">
      <div class="bg-000 rounded-16 flex-center flex-1 h-b100 overflow-hidden">
        <div class="h-b100 w-b100 flex-center">
          <div class="h-b100 w-b100 flex-between-center bg-000 rounded-16 relative">
            <div class="h-b100 w-b100 flex-center relative">
              <div class="h-b100 w-b100 flex-center" style="aspect-ratio: 16 / 9;">
                <video ref="videoRef" class="h-b100 bg-000" autoplay :playsinline="true" :x5-playsinline="true"
                  :webkit-playsinline="true" mediatype="video" :data-index="-1"
                  data-xgplayerid="652d97a3-98b8-485d-8e83-5768aafe0f07" src="@/static/imgs/mp4.mp4"
                  @timeupdate="onTimeUpdate" @loadedmetadata="onLoadedMetadata" @ended="handleEnded"></video>
              </div>
            </div>
            <el-button class="absolute right-20 top-20" @click="$emit('next', 2)">编辑</el-button>
          </div>
        </div>
      </div>
      <div class="bg-f5 h-64 flex-center pr-100 py-12">
        <div>
          <span class="current-time">{{ formatTime(currentTime) }}</span> /
          <span class="duration-time" style="color: #3f3f51;">{{ formatTime(duration) }}</span>
        </div>
        <div class="flex-center ml-20 gap-10">
          <svg t="1779505622021" class="icon cursor-pointer" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="16499" width="20" height="20">
            <path
              d="M356.77 605.22L701.8 849.53c69.8 49.42 166.29-0.49 166.29-86.01V261.25c0-85.52-96.49-135.43-166.29-86.01L356.77 419.55c-64.02 45.34-64.02 140.34 0 185.67zM210.42 154.36c30.38 0 55 24.62 55 55v606.07c0 30.38-24.62 55-55 55s-55-24.62-55-55V209.36c0-30.38 24.62-55 55-55z"
              p-id="16500" fill="#3f3f51"></path>
          </svg>
          <button class="ctrl-btn w-40 h-40 flex-center rounded-100 cursor-pointer" @click="togglePlay"
            :title="isPlaying ? '暂停' : '播放'">
            <svg v-if="isPlaying" t="1779505259978" class="icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="4322" width="20" height="20">
              <path
                d="M288 768V213.333333a53.333333 53.333333 0 0 1 106.666667 0v554.666667a53.333333 53.333333 0 1 1-106.666667 0zM629.333333 768V213.333333a53.333333 53.333333 0 1 1 106.666667 0v554.666667a53.333333 53.333333 0 1 1-106.666667 0z"
                fill="#ffffff" p-id="4323"></path>
            </svg>
            <svg v-else t="1779505357927" class="icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="14047" width="20" height="20">
              <path
                d="M512-292.39808158C69.5810551-292.39808158-292.39808158 69.5810551-292.39808158 512s361.97913673 804.39808158 804.39808158 804.39808158 804.39808158-361.97913673 804.39808158-804.39808158S954.4189449-292.39808158 512-292.39808158z m0 1541.76298917C106.44930106 1249.36490759-225.36490759 917.55069894-225.36490759 512S106.44930106-225.36490759 512-225.36490759s737.36490759 331.81420868 737.36490759 737.36490759-331.81420868 737.36490759-737.36490759 737.36490759z"
                p-id="14048" fill="#ffffff"></path>
              <path
                d="M763.37440051 401.39526378l-268.13269438-177.63791024c-90.49478419-60.32985613-167.58293419-20.10995202-167.58293265 90.49478423v402.19904074c0 110.60473622 73.73649031 150.82464031 167.58293265 90.49478421l268.13269438-177.63790864c90.49478419-67.03317396 90.49478419-167.58293419 0-227.9127903z"
                p-id="14049" fill="#ffffff"></path>
            </svg>
          </button>
          <svg t="1779505654665" class="icon cursor-pointer" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="17600" width="20" height="20">
            <path
              d="M665.47 417.65l-345.03-244.3c-69.8-49.42-166.29 0.49-166.29 86.01v502.27c0 85.52 96.49 135.43 166.29 86.01l345.03-244.31c64.02-45.34 64.02-140.34 0-185.68zM811.82 868.52c-30.38 0-55-24.62-55-55V207.46c0-30.38 24.62-55 55-55s55 24.62 55 55v606.07c0 30.37-24.62 54.99-55 54.99z"
              p-id="17601" fill="#3f3f51"></path>
          </svg>
        </div>
      </div>
    </div>
    <div class="min-h-170 mt-20 flex rounded-16 bg-fff progress p-10">
      <div class="w-30 mr-10"></div>
      <div class="progress-track" ref="progressTrack" @click="seekVideo" @mousemove="handleHoverMove"
        @mouseleave="hoverTime = null">
        <!-- 时间刻度 -->
        <div class="flex">
          <div class="mr-10">00:00</div>
          <div class="flex-1 flex-between-center" v-for="n in 6" :key="n">
            <div class="w-2 h-6 bg-888 rounded-4" v-for="k in 8" :key="k"></div>
            <span class="pr-10">00:00</span>
          </div>
        </div>
        <!-- 拖动滑块 (圆点) -->
        <!-- 拖动滑块 (圆点) -->
        <div class="progress-thumb" :style="{ left: progressPercentage + '%' }"></div>
        <div class="flex mt-20 gap-4 pr-20">
          <div v-for="n in 6" class="fjvideo rounded-8 p-10" :style="{ width: 100 / 6 + '%' }">
            <div class="fs-12" style="color: #6e718c;">分镜 {{ n }} · 00:10 <span
                class="tag fs-10 py-4 px-4 ml-10 rounded-4">视频</span></div>
            <div class="bg-img w-b100 h-60 mt-10 rounded-8"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="py-10 text-888 text-center">平台内容均由人工智能模型生成，不代表平台立场</div>
  </section>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
const indexVal = ref(0)
const isPlaying = ref(false)
const videoRef: any = ref(null);
const currentTime = ref(0);
const duration = ref(0);
const progressPercent = ref(0);

const hoverPercent = ref(0)  // 悬停时的百分比
const hoverTime: any = ref(null)  // 悬停时的时间

// 切换集数
const changeJi = (item: any, index: number) => {
  indexVal.value = index
}


// ----- 计算属性 -----
const progressPercentage = computed(() => {
  if (duration.value === 0) return 0
  return (currentTime.value / duration.value) * 100
})

// 视频播放
const togglePlay = () => {
  if (!videoRef.value) return;
  if (videoRef.value.paused) {
    videoRef.value.play();
    isPlaying.value = true;
  } else {
    videoRef.value.pause();
    isPlaying.value = false;
  }
};

const formatTime = (seconds: number) => {
  if (isNaN(seconds)) return '00:00';
  const hrs = Math.floor(seconds / 3600);
  const mins = Math.floor((seconds % 3600) / 60);
  const secs = Math.floor(seconds % 60);
  if (hrs > 0) {
    return `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  }
  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};

// 更新进度百分比
const updateProgress = () => {
  if (duration.value > 0) {
    const percent = (currentTime.value / duration.value) * 100;
    progressPercent.value = percent;
  } else {
    progressPercent.value = 0;
  }
};
// 总时间
const onLoadedMetadata = () => {
  if (videoRef.value) {
    duration.value = videoRef.value.duration;
    updateProgress();
  }
};
// 当前时间
const onTimeUpdate = () => {
  if (videoRef.value) {
    currentTime.value = videoRef.value.currentTime;
    updateProgress();
  }
};

// 4. 播放结束重置
const handleEnded = () => {
  isPlaying.value = false
  currentTime.value = 0 // 或者保持结束位置
}

// 6. 点击进度条跳转
const seekVideo = (event: any) => {
  const track = event.currentTarget
  const rect = track.getBoundingClientRect()
  const x = event.clientX - rect.left
  const percent = Math.min(100, Math.max(0, (x / rect.width) * 100))

  if (duration.value > 0) {
    const newTime = (percent / 100) * duration.value
    videoRef.value.currentTime = newTime
    currentTime.value = newTime
  }
}

// 7. 鼠标悬停计算位置和时间
const handleHoverMove = (event: any) => {
  const track = event.currentTarget
  const rect = track.getBoundingClientRect()
  const x = event.clientX - rect.left
  const percent = Math.min(100, Math.max(0, (x / rect.width) * 100))

  hoverPercent.value = percent
  if (duration.value > 0) {
    hoverTime.value = (percent / 100) * duration.value
  }
}

</script>
<style lang="scss" scoped>
.aside {
  min-width: 60px;
  border-right: 1px solid #eee;

  .jj {
    border: 1px solid #ddd;

    &.active {
      border: 1px solid #5252ff;
      background: #5252ff;
      color: #fff;
    }
  }
}

.ctrl-btn {
  background: #3f3f51;
  border: none;
}


/* 进度条轨道 */
.progress-track {
  flex-grow: 1;
  height: 6px;
  /* 更细的轨道 */
  // background: rgba(1, 255, 56, 0.3);
  /* 半透明灰 */
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  height: 100px;
}

/* 滑块 (圆点) - 核心视觉 */
.progress-thumb {
  position: absolute;
  top: 4px;
  width: 7px;
  height: 140px;
  background: #ff0000;
  background: url('@/static/imgs/zhen.png') no-repeat center;
  background-size: 100% 100%;
  transition: opacity 0.2s;
}

.progress {
  border: 1px solid #eee;
}

.fjvideo {
  border: 1px solid #f0f2fa;
  height: 106px;
  background-color: #fafbfd;

  .bg-img {
    background: url('@/static/imgs/bg1.png');
    background-size: auto;
  }

  .tag {
    background-color: #ebedff;
    color: #5252ff;
  }
}
</style>