<script setup lang="ts">
import { useRoute } from 'vue-router'
import RoundSplit from '../RoundSplit.vue'
// import { Events } from 'xgplayer';

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const props = defineProps<{
  activeChapter: string
  list: anyObj[]
  resource?: 0 | 1
}>()

const emit = defineEmits(['onPause'])

const OSS_URL = import.meta.env.VITE_OSS_URL

const route = useRoute()
let subjectId = route.params.subjectId as string

const playerRef = ref()
let player: any = null

onMounted(() => {
  player = playerRef.value?.player()
  player.on('ended', () => {
    activePlay.isPlay = false
    activePlay.isEnded = true
  })
  player.on('pause', (item: anyObj) => {
    activePlay.isPlay = false
    emit('onPause', activePlay.id, item.currentTime)
  })
  player.on('play', () => {
    activePlay.isPlay = true
    activePlay.isEnded = false
  })
})

const activePlay = reactive({
  id: '',
  // show: false,
  url: '',
  videoName: '',
  isPlay: false,
  isEnded: false,
})

function handlePlay(item: anyObj) {
  if (activePlay.id !== item.id) {
    if (activePlay.isPlay) {
      player.pause()
    }
    // 切换播放视频
    setTimeout(() => {
      activePlay.id = item.id
      activePlay.url = item.videoUrl
      activePlay.videoName = item.videoName
      // activePlay.show = true;
      nextTick(() => {
        player.play().then(() => {
          const { playDuration, videoDuration } = item
          if (Number(playDuration) + 10 < Number(videoDuration)) {
            player.seek(Number(playDuration))
          }
        })
      })
    }, 30)
  } else {
    // 暂停/继续播放视频
    if (activePlay.isPlay) {
      player.pause()
    } else {
      // activePlay.show = true;
      player.play()
    }
  }
}

async function closePlay() {
  activePlay.isPlay = false
  // activePlay.show = false;
  await player?.pause()
  // 若视频播放结束，关闭后列表上不显示遮罩层
  // if (activePlay.isEnded) {
  //     activePlay.id = '';
  //     activePlay.url = '';
  // }
}

watch(
  () => props.list,
  async () => {
    if (activePlay.isPlay) {
      await closePlay()
    }
    setTimeout(async () => {
      if (props.list[0]) {
        activePlay.id = props.list[0].id
        activePlay.url = props.list[0].videoUrl
        activePlay.videoName = props.list[0].videoName
        await nextTick()
        player.once('play', () => {
          if (activePlay.id !== props.list[0].id) return
          const { playDuration, videoDuration } = props.list[0]
          if (Number(playDuration) + 10 < Number(videoDuration)) {
            player.seek(Number(playDuration))
          }
        })
      }
    }, 30)
  },
  { immediate: true },
)

onUnmounted(() => {
  player.pause()
})
</script>
<template>
  <div class="video-list">
    <div class="box">
      <div class="video-list-box-main-list">
        <div class="hidden_scroll_x">
          <div v-for="i in list" :key="i.id" class="video-item pointer" @click="handlePlay(i)">
            <div class="video-item-cover">
              <img :src="i.thumbUrl || `${OSS_URL}/urm/video_cover.png`" />
              <div v-show="activePlay.id === i.id" class="video-item-mask">
                <div class="icon">
                  <Icon :name="activePlay.isPlay ? 'video_pause' : 'video_play'" width="48"></Icon>
                </div>
              </div>
            </div>
            <div class="video-item-title">
              {{ i.displayName || i.shortName || i.videoName }}
            </div>
          </div>
        </div>
      </div>
      <RoundSplit></RoundSplit>
      <div class="video-box">
        <VideoPlayer
          ref="playerRef"
          :video="activePlay"
          :data="{
            subjectId,
            resourceType: 0,
            origin: 1,
          }"
          :resource="resource"
        ></VideoPlayer>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.video-list {
  // margin-bottom: 40px;
  line-height: 1.5;
  position: relative;
  height: 100%;
  .title {
    color: $font-color;
    font-family: $font-special;
    font-size: 3vh;
    height: 8.5vh;
    padding: 0 32px;
    // overflow-x: auto;
    border-radius: 1.67vh;
    background: linear-gradient(269deg, #e3e3ff 2.25%, #ded3fb 51.93%, #c0c7f7 99.65%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    @include single_ellipsis;
  }
  .round-split {
    width: calc(100% - 5.5vh);
    z-index: 12;
    // opacity: 0.5;
    margin: 1.67vh auto;
  }
  &-main {
    height: 25.33vh;
  }
}
.box {
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(241, 234, 250, 0.35) 65.59%,
    rgba(241, 241, 250, 0.35) 100%
  );
  // filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  border-radius: 1.67vh;
  padding: 1.33vh 8px 1vh;
  position: relative;
  z-index: auto;
}
.video-box {
  // width: 1016px;
  height: 48vh;
  // margin: 42px 0 0;
  border-radius: 1.33vh;
  overflow: hidden;
}
.video-list-box-main-list {
  box-sizing: border-box;
  padding: 1.33vh;
  // background: #f9f5fe;
  border-radius: 1.33vh;
  background: linear-gradient(180deg, #fafafa 0%, #f9f5ff 100%);
  // border-radius: 1.67vh;
}
.hidden_scroll_x {
  height: 100%;

  display: flex;
  .video-item {
    width: 320px;
    flex-shrink: 0;
    margin-right: 24px;

    &:last-child {
      margin-right: 0;
    }
    &-cover {
      height: 16.67vh;
      border-radius: 1.33vh;
      overflow: hidden;
      margin-bottom: 0.67vh;
      position: relative;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    &-mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 1.33vh;
      background: rgba(0, 0, 0, 0.45);
      .icon {
        width: 56px;
        height: 4.67vh;
        border-radius: 50%;
        background: radial-gradient(
          50% 50% at 50% 50%,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.25) 100%
        );
        padding: 0.33vh;
      }
    }
    &-title {
      color: $font-color;
      font-family: OPPOSans;
      font-size: 2.33vh;
      @include single_ellipsis;
    }
  }
}
</style>
