<script setup lang="ts">
import { getVideoDetails } from '../api'
import AppVideoPlayer from '@/components/base/AppVideoPlayer.vue'
import ViewCourseChapter from './ViewCourseChapter.vue'
import { getVideoPlayUrl } from '@/utils/video'

const route = useRoute()

const props: any = defineProps({
  data: {
    type: Array
  },
  chapterTree: {
    type: Array
  }
})

console.log(props.data, 'data')

// 资源详情
const resourceData: any = reactive({})
// 获取当前资源
const getResourceData = (id: string) => {
  getVideoDetails({ id }).then((res: any) => {
    Object.assign(resourceData, res.data)
  })
}

// 切换视频
const videoIndex = ref(0)

const videoOptions = computed(() => {
  return {
    sources: [
      {
        src: getVideoPlayUrl(resourceData.play_auth),
      },
    ],
  }
})
const video = computed<{ id: string }>(() => {
  return props.data[videoIndex.value]
})
watch(
  videoIndex,
  () => {
    if (video.value?.id) {
      getResourceData(video.value.id)
    }
  },
  { immediate: true }
)

watch(
  () => route.query.resid,
  () => {
    if (route.query.type === '2') {
      const index = props.data.findIndex((item: any) => item.id === route.query.resid)
      videoIndex.value = index !== -1 ? index : 0
    }
    if (video.value?.id) {
      getResourceData(video.value.id)
    }
  },
  { immediate: true }
)

const changeVideo = (index: number) => {
  videoIndex.value = index
}
const chapterHeight: any = ref(0)
const chapterWidth: any = ref(0)

const videoHeight = (h: number) => {
  chapterHeight.value = h
}
const videoWidth = (h: number) => {
  chapterWidth.value = h
}
</script>
<template>
  <div class="main_content">
    <div class="content_top">
      <AppVideoPlayer
        @videoHeight="videoHeight"
        @videoWidth="videoWidth"
        :options="videoOptions"
        id="video_con"
        class="video_con"
      ></AppVideoPlayer>

      <div class="chapter_con">
        <ViewCourseChapter
          :style="{ height: chapterHeight + 'px' }"
          :isBlack="true"
          :data="props.chapterTree"
        ></ViewCourseChapter>
      </div>
    </div>
    <div class="content_bottom" :style="{ width: chapterWidth + 300 + 'px' }">
      <div style="margin: 30px 0 0 10px">本小节视频资源：</div>
      <div class="cover-list">
        <div class="cover-box">
          <div
            class="cover-img"
            :style="`background-image: url(${item.cover})`"
            v-for="(item, index) in props.data"
            :key="item.id"
            @click="changeVideo(index)"
          >
            <div :class="index === videoIndex ? 'border active' : 'border'"></div>
            <div class="cover-name">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.main_content {
  display: flex;
  flex-direction: column;
  .content_top {
    display: flex;
    .video_con {
      width: 85%;
    }
  }
}
.content_bottom {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-sizing: border-box;
  border-left: 1px solid #e6e8eb;
  border-right: 1px solid #e6e8eb;
  border-bottom: 1px solid #e6e8eb;
  padding: 10px 0 20px 20px;
  .cover-list {
    overflow-x: auto;
    .cover-box {
      display: flex;
      justify-content: flex-start;
      margin-bottom: 30px;
    }
    .cover-img {
      min-width: 200px;
      min-height: 100px;
      background-size: cover;
      margin: 20px 10px 0;
      cursor: pointer;
      box-sizing: border-box;
      .border {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        &.active {
          border-top: 5px solid #aa1941;
          border-left: 5px solid #aa1941;
          border-right: 5px solid #aa1941;
        }
      }
    }
    .cover-name {
      width: 100%;
      background: #aa1941;
      text-align: center;
      line-height: 30px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #fff;
    }
  }
}
</style>
