<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>
        <el-button type="primary" size="default" @click="syncVideoChange">同步视频</el-button>
        <el-popover placement="top" :width="400" trigger="click">
          <template #reference>
            <el-button style="margin-right: 16px" @click="viewStatusChange">查看状态</el-button>
          </template>
          <div class="flex items-center">
            <div class="dot-success"></div>
            <span>同步成功</span>
          </div>
          <div class="flex items-center">
            <div class="dot-lose"></div>
            <span>同步失败</span>
          </div>
          <div class="flex items-center">
            <div class="dot-ing"></div>
            <span>同步中</span>
          </div>
        </el-popover>
      </div>
      <div>
        <el-checkbox v-model="checkAll" border :indeterminate="isIndeterminate" @change="handleCheckAllChange">
          全选
        </el-checkbox>
      </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" v-if="viewStatus">
            <el-checkbox border class="video-item" @change="videoShow(source)" v-for="(source, index) in videoUrlList"
              :key="index" :label="source" :style="{ backgroundColor: colorType(source) }">
              {{ source.series_sequence }}
            </el-checkbox>
          </el-checkbox-group>
          <el-checkbox-group v-model="videoChoose" size="large" class="flex items-center" v-else>
            <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 checkAll = ref(false)
const videoUrlList = ref([])
const viewStatus = ref(false)
if (props.primary) {

}
const meta = ref({})
const colorType = (data: object) => {
  console.log(data, 'datacolorTypecolorType');
  const type = data.series_sequence
  switch (type) {
    case 1:
      return '#f18e00'
    case 2:
      return '#28c445'
    case 3:
      return '#ed0b0b'
  }
}
const current = ref({})
const videoChooseUrls = ref([])
// 查看状态
const viewStatusChange = () => {
  viewStatus.value = true
}
// 同步视频
const syncVideoChange = () => {
  viewStatus.value = false
}
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 handleCheckAllChange = (val: boolean) => {
  videoChoose.value = val ? videoUrlList.value : []
  // isIndeterminate.value = false
}

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>
.dot-success,
.dot-lose,
.dot-ing {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 6px;
}

.dot-success {
  background-color: #28c445;
}

.dot-lose {
  background-color: #ed0b0b;
}

.dot-ing {
  background-color: #f18e00;
}

.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.is-bordered.is-checked) {
    background-color: #2566ff;
  }

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