<template>
  <el-alert title="注：如需批量下载，则多选目标集数，点击下载按钮即可" type="warning" show-icon :closable="false" />
  <div class="wrapper">
    <!-- :poster="videoImg"视频封面 -->
    <video id="my-player" style="width:500px;" :key="current.public_video_url" class="video-js" controls autoplay
      ref="myVideo">
      <source :src="current.public_video_url" type="video/mp4">
    </video>
    <!-- 视频名称列表布局 -->
    <div class="video-wrapper">
      <div class="flex items-center justify-between h-10">
        <div class="w-full text-base font-medium">剧名: <span class="ml-2 text-lg font-bold text-dark-600">{{
          props.primary.name }}</span> <span v-if="current.series_name">(当前播放{{ current.series_name }})</span></div>
        <download v-if="videoChoose.length > 0" :urls="videoChooseUrls" :fileName="props.primary.name"></download>
      </div>
      <mytabs :meta="meta" v-if="meta.total" @change="handChange">
        <template v-slot:content>
          <el-checkbox-group v-model="videoChoose" size="large" class="flex items-center">
            <el-checkbox border class="video-item" @change="videoShow(source)" v-for="(source, index) in videoUrlList"
              :key="index" :label="source">
              {{ source.series_sequence }}
            </el-checkbox>
          </el-checkbox-group>
        </template>
      </mytabs>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { videoStockEpisodeList } from '@/api/video/index'
const myVideo = ref()
const videoChoose = ref([])
const changeForm = ref({ page: 1, limit: 100 })
const props = defineProps({
  primary: String | Number,
});
const videoUrlList = ref([])
if (props.primary) {

}
const meta = ref({})

const current = ref({})
const videoChooseUrls = ref([])
const initVideoList = (params: object) => {
  videoStockEpisodeList({ video_id: props.primary.id, ...params }).then(res => {
    videoUrlList.value = res.data;
    meta.value = { limit: res.limit, total: res.total }
  })
}


const handChange = (e) => {
  console.log(e, 'handChange');
  changeForm.value.page = Number(e.page);
  initVideoList(changeForm.value);
}
const videoShow = (source: object) => {
  console.log(source);
  current.value = videoChoose.value.find(el => el.public_video_url == source.public_video_url) ?? {}
  videoChooseUrls.value = videoChoose.value
  console.log(videoChooseUrls.value, 'videoChooseUrls.value');
}

onMounted(() => {
  initVideoList(changeForm.value)
})
</script>


<style lang="scss" scoped>
.wrapper {
  padding-left: 40px;
  margin-top: 30px;
  display: flex;
  width: 100%;
}

//播放器样式
video#my-player.video-js {
  flex: 1;
  min-width: 300px;
  height: 580px;
  background-color: #000;
}

.video-wrapper {
  flex: 2;
  min-width: 600px;
  margin-left: 40px;

  .video-item {
    margin: 6px;
  }

  :deep(.el-checkbox-group .el-checkbox.is-checked) {
    background-color: #2566ff;
  }

  :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
    color: #fff
  }
}
</style>
