<template>
  <div class="w-full h-full bg-#000 z-50 top-0 left-0" :class="noPage ? 'absolute' : 'fixed '">
    <!-- <PressDrag @click="toBreak"
      class="pos-absolute bg-#00000033 cursor-pointer w-30px h-30px flex-center z-99999 p-10px top-20px right-20px rounded-50%">
      <CloseCircleOutlined class="text-30px color-#ffffff" />
    </PressDrag> -->
    <div class="w-full h-full z-1" id="playerView"></div>
  </div>
</template>

<script lang="ts" setup>
import { CloseCircleOutlined } from '@ant-design/icons-vue';
import PressDrag from '@/components/PressDrag.vue';
import { useRoute, useRouter } from 'vue-router';
import { getTemItem, TemObj } from './temObjs';
// @ts-ignore
const player = ref<typeof Aliplayer>(null); //播放器
const route = useRoute();
const props = defineProps<{
  url: string;
  cover?: string;
  noPage?: boolean;
}>();
const _temObj = ref<TemObj>({
  id: '',
  name: '',
  isEdit: false,
  url: '',
});
onMounted(() => {
  nextTick(() => {
    if (!props.noPage) {

      const temObj = getTemItem(route.query._t as string);
      if (!temObj) {
        return;
      }
      _temObj.value = temObj;
      createPlayer(_temObj.value.url, '/long/long.svg');
    } else if (!!props.url) {
      createPlayer(props.url, props.cover || '/long/long.svg');
    }
  })

});
watch(() => props.url, (newVal) => {
  if (!!newVal) {
    createPlayer(newVal, props.cover || '/long/long.svg');
  }
});
const createPlayer = (source?: string, cover?: string) => {
  // 更多使用方法请参考接入文档：https://help.aliyun.com/zh/vod/developer-reference/integration

  // @ts-ignore
  player.value = new Aliplayer(
    {
      id: 'playerView',
      width: '100%',
      height: '100%',
      source: source, // 如果是私有加密播放请传入 vid/playauth/encryptType
      cover: cover,
      skinLayout: [
        { name: 'bigPlayButton', align: 'blabs', x: 30, y: 80 },
        {
          name: 'H5Loading',
          align: 'cc',
        },
        {
          name: 'controlBar',
          align: 'blabs',
          x: 0,
          y: 0,
          children: [
            { name: 'progress', align: 'tlabs', x: 0, y: 0 },
            { name: 'playButton', align: 'tl', x: 15, y: 10 },
            { name: 'timeDisplay', align: 'tl', x: 10, y: 2 },
            { name: 'fullScreenButton', align: 'tr', x: 20, y: 12 },
            { name: 'setting', align: 'tr', x: 20, y: 11 },
            { name: 'volume', align: 'tr', x: 20, y: 10 },
          ],
        },
      ],
    },
    // @ts-ignore
    (player: typeof Aliplayer) => {
      //播放下一个视频
      player.on('ended', () => {
        // update(videoList[index + 1]);
      });
    },
  );
  console.log('player', player.value);
};

function toBreak() {

}
//点击右侧列表视频切换
// const update = (video: PlayInfo) => {
//   // playObj.value = video;
//   player.value.dispose(); //销毁
//   createPlayer(video.Source, video.CoverURL); //创建
// };
function dispose() {
  if (player.value) {
    player.value.dispose(); //销毁
  }
}
onBeforeUnmount(() => {
  try {
    dispose();
  } catch (error) { }
});
// // 存储当前播放时间
// const saveTime = function (memoryVideo: string, currentTime: string) {
//   localStorage.setItem(memoryVideo, currentTime);
// };
// // 获取此视频上次播放时间
// const getTime = function (memoryVideo: string): string | null {
//   return localStorage.getItem(memoryVideo);
// };
</script>
<style scoped></style>
