<script lang="ts" setup>
  import { isNumber } from 'lodash';
  import videoJs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
  import 'video.js/dist/video-js.css';
  import { computed, CSSProperties, onMounted, onUnmounted, ref, unref } from 'vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
  import { isShareMode } from '/@/views/sys/share/hook';
  import 'videojs-flvjs-es6';
  import {
    CaretUpOutlined,
    CaretRightOutlined,
    PauseOutlined,
    CaretDownOutlined,
    CaretLeftOutlined,
    ZoomInOutlined,
    ZoomOutOutlined,
  } from '@ant-design/icons-vue';
  import { Button } from 'ant-design-vue';
  import { nextTick } from 'vue';
  const { prefixCls } = useDesign('basic-video-play');

  const props = defineProps<{
    options?: VideoJsPlayerOptions;
    withToken?: boolean;
  }>();

  const emit = defineEmits<{
    (event: 'ready', instance?: Nullable<VideoJsPlayer>): void;
    (event: 'onUnmounted'): void;
  }>();

  const videoPlayEl = ref<HTMLVideoElement>();

  const videoPlayInstance = ref<Nullable<VideoJsPlayer>>();

  const getOptions = computed(() => {
    const { options, withToken } = props;

    const defaultOptions: VideoJsPlayerOptions & Recordable = {
      language: 'zh',
      muted: true,
      liveui: true,
      controls: true,
      techOrder: ['html5', 'flvjs'],
      flvjs: {
        mediaDataSource: {
          isLive: true,
          cors: true,
          hasAudio: false,
          withCredentials: false,
        },
        config: {
          headers: {
            ...(withToken
              ? {
                  'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
                }
              : {}),
          },
          autoCleanupSourceBuffer: true,
        },
      },
    };
    return videoJs.mergeOptions(defaultOptions, options);
  });

  const getWidthHeight = computed(() => {
    let { width = 300, height = 150 } = unref(getOptions);
    width = isNumber(width) ? (`${width}px` as unknown as number) : width;
    height = isNumber(height) ? (`${height}px` as unknown as number) : height;
    return { width, height } as CSSProperties;
  });

  const init = () => {
    if (unref(videoPlayInstance)) unref(videoPlayInstance)?.dispose();
    videoPlayInstance.value = videoJs(unref(videoPlayEl)!, unref(getOptions), () => {
      emit('ready', unref(videoPlayInstance));
    });
  };

  //type  1:上    2:右    3:下    4:左    5:播放/暂停
  const handleClick = (type: number) => {
    console.log(type, 'type');
    if (type == 5) {
      // if (unref(isPlay)) {
      //   unref(videoPlayInstance)?.play();
      // } else {
      //   unref(videoPlayInstance)?.pause();
      // }
      isPlay.value = !isPlay.value;
    }
  };

  // type 1:放大    2:缩小
  const handleScale = (type: number) => {
    if (type == 1) {
    } else {
    }
  };

  const isPlay = ref<Boolean | null | undefined>(true);

  onMounted(async () => {
    init();
    await nextTick();
    isPlay.value = unref(videoPlayInstance)?.paused();
  });

  onUnmounted(() => {
    unref(videoPlayInstance)?.dispose();
    videoPlayInstance.value = null;
    emit('onUnmounted');
  });

  defineExpose({
    reloadPlayer: init,
    getInstance: () => unref(videoPlayInstance),
  });
</script>

<template>
  <div :class="prefixCls" class="w-full h-full flex" :style="getWidthHeight">
    <video
      ref="videoPlayEl"
      class="video-js vjs-big-play-centered vjs-show-big-play-button-on-pause !w-8/10 !h-full"
      muted
    >
    </video>
    <div class="!w-2/10 bg-white flex items-center flex-col">
      <h1>云台控制</h1>

      <div class="home mt-5">
        <Button class="front-sty-center child center" shape="circle" @click="handleClick(5)">
          <!-- 暂停 -->
          <PauseOutlined v-if="!isPlay" class="child-icon" style="color: #fffbfb" />
          <!-- 播放 -->
          <CaretRightOutlined v-else class="child-icon" style="color: #fffbfb" />
        </Button>

        <div class="box">
          <div>
            <Button class="left-top in-block" @click="handleClick(1)">
              <CaretUpOutlined class="icon-rotate child-icon" @click="handleClick(1)" />
            </Button>
            <Button class="right-top in-block" @click="handleClick(2)">
              <CaretRightOutlined class="icon-rotate child-icon" @click="handleClick(2)" />
            </Button>
          </div>
          <div>
            <Button class="left-bottom in-block" @click="handleClick(3)">
              <CaretLeftOutlined class="icon-rotate child-icon" @click="handleClick(3)" />
            </Button>
            <Button class="right-bottom in-block" @click="handleClick(4)">
              <CaretDownOutlined class="icon-rotate child-icon" @click="handleClick(4)" />
            </Button>
          </div>

          <Button class="circle" @click="handleClick(5)" />
        </div>
      </div>
      <div class="flex justify-center mt-8">
        <Button shape="circle" class="button-icon" @click="handleScale(1)">
          <ZoomInOutlined style="color: #315a9c; font-size: 1.5rem" />
        </Button>
        <Button shape="circle" class="ml-10 button-icon" @click="handleScale(2)">
          <ZoomOutOutlined style="color: #315a9c; font-size: 1.5rem" />
        </Button>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-basic-video-play';

  .@{prefix-cls} {
    .vjs-error-display {
      .vjs-modal-dialog-content::after {
        content: '无法加载视频,原因可能是服务器或网络故障,也可能是格式不支持.';
      }
    }
  }

  .child {
    position: absolute;
    width: 3rem;
    height: 3rem;
    display: flex;
    justify-content: center;
    background: #e2dede;
    align-items: center;
    border: none;
  }

  .child-icon {
    font-size: 1.5rem;
    color: #fffbfb;
  }

  .button-icon {
    width: 3rem;
    height: 3rem;
    background: #f5f5f5;
    border: none;
  }

  .center {
    top: 50%;
    left: 50%;
    width: 4rem;
    height: 4rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #5586d4;
  }

  .home {
    position: relative;
    width: 10rem;
    height: 10rem;
  }

  .box {
    transform: rotateZ(45deg);
    width: 10rem;
    height: 10rem;
  }

  .icon-rotate {
    transform: rotate(315deg);
  }

  .front-sty-center {
    position: absolute;
    top: 50%;
    z-index: 9999;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .circle {
    display: inline-block;
    border-radius: 50%;
    background-color: #5586d4;
    width: 4rem;
    height: 4rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .in-block {
    display: inline-block;
    position: relative;
  }

  .left-top {
    width: 5rem;
    height: 5rem;
    border-radius: 5rem 0 0 0;
    background-color: #e2dede;
  }

  .right-top {
    width: 5rem;
    height: 5rem;
    border-radius: 0 5rem 0 0;
    background-color: #e2dede;
  }

  .left-bottom {
    width: 5rem;
    height: 5rem;
    border-radius: 0 0 0 5rem;
    background-color: #e2dede;
  }

  .right-bottom {
    width: 5rem;
    height: 5rem;
    border-radius: 0 0 5rem 0;
    background-color: #e2dede;
  }
</style>