<template>
  <van-swipe ref="swiperRef" style="width: 100%;height: 100%; background-color: black;" :initial-swipe="0"
    @change="changeVideo" :loop="false" vertical :show-indicators="false" :lazy-render="false">
    <van-swipe-item v-for="(item, index) in videoList" :key="index">
      <img :src="item.cover" >
    </van-swipe-item>
  </van-swipe>
</template>

<template>
  <div style="width: 100vw;height: 100vh;">
    <video :class="`video-item video-js vjs-big-play-centered vjs-fluid`" style="width: 100%;height: 100vh;" ref="videRef" :poster="item.videoBaseInfo.cover">
      <p>Your browser does not support the video tag.</p>
    </video>
  </div>
</template>
<script setup lang="ts">
import { ref,  reactive, defineProps } from "vue";
import 'video.js/dist/video-js.css'
import videojs from 'video.js'

const props = defineProps<{
  index: number,
  cureentIndex: number,
  item: {
    "videoAuthorInfo": {
      "authorUid": 0,
      "avatar": "",
      followFlag: false
    },
    "videoBaseInfo": {
      "contentId": 0,
      "cover": "",
      "description": "",
      "title": "",
      "videoUrl": ""
    },
    "videoStatisticsInfo": {
      "comments": 0,
      "likes": 0
    }
  },
  isMuted: Boolean
}>()

const player: any = reactive({
  instance: null,
  status: 'pause',
  totalTime: 0,
  cureentTime: 0,
})
const videRef = ref(null)

const videoOptions = {
    controls: false, // 是否显示控制条
    autoplay: false,
    // preload: 'auto',
    // muted: props.isMuted,
    muted: false,
    loop: true,
    fluid: true,
    controlBar: { 
      children: [
      ],
    },
    sources: [{
      // src: 'http://recordcdn.quklive.com/upload/vod/user1462960877450854/1550739580345725/1/video.m3u8',
      src: props.item.videoBaseInfo.videoUrl,
      // type: 'application/x-mpegURL'
    }],
    bigPlayButton: false, // 播放按钮
    userActions: {
      click: false, // 禁止点击
      // download: false, // 禁止下载
      // hotkeys: false, // 禁止热键
      doubleClick: true // 禁止双击
    }
}

// videojs创建播放器会返回实例，用变量保存起来，然后在需要的地方调用。
player.instance = videojs(videRef.value, videoOptions,function(){
  // 对视频播放、暂停、异常等事件进行监听 处理
})
</script>

<template>
  <div class="video-box" @click="changePlay" @dblclick="changeCollect"></div>
  <video ref="videRef" ></video>
</template>

<script setup lang="ts">
let timer: number = 0;
const changePlay = (type: number) => {
  clearTimeout(timer)
  timer = setTimeout(() => {
    if (player?.instance?.paused()) {
      player.instance?.play()
    } else {
      player.instance?.pause()
    }
  }, 100)
}
</script>
<style>
  .video-box {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 3;
  }
</style>

<!-- 子组件 -->
<script setup lang="ts">
import videojs from 'video.js'

const player = reactive({
  instance: null
})

player.instance = videojs(document.getElementById(id), {})
defineExpose({
  player, // 播放器实例
})
</script>

<!-- 父组件 -->
<template>
  <div class="videos">
    <van-swipe ref="swiperRef" @change="changeVideo" >
      <van-swipe-item v-for="(item, index) in videoList" :key="index">
        <VideoItem ref="videoItemRef" :index="index + 1" :item="list[index]" :isMuted="isMuted" :cureentIndex="cureentIndex" @handleNext="handleNext" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script setup lang="ts">
import VideoItem from './components/videoItem.vue';
import { ref，getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance()

let cureentIndex = ref(0)

const changeVideo = (index: number) => {
  cureentIndex.value = index;
  const player = proxy.$refs.videoItemRef[cureentIndex.value]?.player?.instance
  const player1 = proxy.$refs.videoItemRef[cureentIndex.value - 1]?.player?.instance
  const player2 = proxy.$refs.videoItemRef[cureentIndex.value + 1]?.player?.instance
  player1?.pause() // 暂停上一个
  player2?.pause() // 暂停下一个
  player?.play() // 播放当前
}
</script>

<template>
<div :style="videoStyle[1]">
  <video :style="videoStyle[0]":poster="item.videoBaseInfo.cover">
    <p>Your browser does not support the video tag.</p>
  </video>
</div>
</template>
<script setup lang="ts">
import { ref,  reactive, computed } from "vue";

const videoStyle = computed(() => {
  const { videoWidth, videoHeight } = props.item.videoBaseInfo;
  const deviceHeight = window.innerHeight;

  const videoAspectRatio = videoWidth / videoHeight;
  // 获取设备屏幕高度，用于计算视频的最终宽度
  
  // 宽视频不处理
  if(videoAspectRatio > 1){
    return [{},{height: '100vh', width: '100vw'}];
  }

  const finalWidth = deviceHeight * videoAspectRatio;
  // 获取设备屏幕宽度，用于后续判断是否需要进行水平平移
  const deviceWidth = window.innerWidth;
  // 计算视频元素的左边距，以实现居中
  const left = finalWidth > deviceWidth ? -(finalWidth - deviceWidth) / 2 : 0;

  // 返回应用于视频的样式对象
  return [
    {
      // 
      width: `${finalWidth}px`,
      height: '100vh',
    },
    {
      position: 'absolute',
      width: `${finalWidth}px`,
      height: '100vh',
      left: `${left}px`,
    }
  ];
});
</script>