<script lang="ts" setup>
  import { isNumber } from 'lodash';
  import videoJs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
  import 'video.js/dist/video-js.css';
  import { Tooltip } from 'ant-design-vue';
  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 { QuestionCircleOutlined } from '@ant-design/icons-vue';
  import {
    CaretUpOutlined,
    CaretRightOutlined,
    PauseOutlined,
    CaretDownOutlined,
    CaretLeftOutlined,
    ZoomInOutlined,
    ZoomOutOutlined,
  } from '@ant-design/icons-vue';
  import { Button } from 'ant-design-vue';
  import { nextTick } from 'vue';
  import { controlling } from '/@/api/camera/cameraManager';

  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));
    });
  };

  //播放/暂停
  const handleClick = () => {
    unref(isPlay) && unref(videoPlayInstance)?.pause();
    !unref(isPlay) && unref(videoPlayInstance)?.play();
  };

  const getId = () => {
    const { options } = props || {};
    const { sources }: any = options || {};
    return sources?.[0]?.id;
  };

  const handleControl = (action: number, direction: string) => {
    const organizationId = getId();
    controlling({ cameralndexCode: organizationId, action, command: direction });
  };

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

  onMounted(async () => {
    init();
    await nextTick();
    // isPlay.value = unref(videoPlayInstance)?.paused();
    videoPlayInstance.value?.on('loadedmetadata', () => {});
    videoPlayInstance.value?.on('waiting', () => {
      isPlay.value = false;
    });
    videoPlayInstance.value?.on('play', () => {
      isPlay.value = true;
    });
    videoPlayInstance.value?.on('playing', () => {
      isPlay.value = true;
    });
    videoPlayInstance.value?.on('pause', () => {
      isPlay.value = false;
    });
    videoPlayInstance.value?.on('ended', () => {
      isPlay.value = false;
    });
  });

  //长按开始
  const moveStart = (action) => {
    handleControl(0, action);
  };
  // 长按结束
  const moveStop = (action) => {
    handleControl(1, action);
  };

  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">
      <Tooltip>
        <template #title
          >长按按钮调用API，由于视频流媒体提供的流，有一定时延，请耐心等待。</template
        >
        <label class="validate-dot">云台控制</label>
        <QuestionCircleOutlined :style="{ fontSize: '14px', marginLeft: '5px' }" />
      </Tooltip>

      <div class="home mt-5">
        <Button class="front-sty-center child center" shape="circle" @click="handleClick()">
          <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"
              @mousedown="moveStart('up')"
              @mouseup="moveStop('up')"
            >
              <CaretUpOutlined class="icon-rotate child-icon" />
            </Button>
            <Button
              class="right-top in-block"
              @mousedown="moveStart('RIGHT')"
              @mouseup="moveStop('RIGHT')"
            >
              <CaretRightOutlined class="icon-rotate child-icon" />
            </Button>
          </div>
          <div>
            <Button
              class="left-bottom in-block"
              @mousedown="moveStart('LEFT')"
              @mouseup="moveStop('LEFT')"
            >
              <CaretLeftOutlined class="icon-rotate child-icon" />
            </Button>
            <Button
              class="right-bottom in-block"
              @mousedown="moveStart('DOWN')"
              @mouseup="moveStop('DOWN')"
            >
              <CaretDownOutlined class="icon-rotate child-icon" />
            </Button>
          </div>

          <Button class="circle" @click="handleClick" />
        </div>
      </div>
      <div class="flex justify-center mt-8">
        <Button
          class="button-icon"
          @mousedown="moveStart('ZOOM_IN')"
          @mouseup="moveStop('ZOOM_IN')"
          style="border-radius: :50%;"
        >
          <ZoomInOutlined style="color: #315a9c; font-size: 1.5rem" />
        </Button>
        <Button
          class="ml-10 button-icon"
          @mousedown="moveStart('ZOOM_OUT')"
          @mouseup="moveStop('ZOOM_OUT')"
          style="border-radius: :50%;"
        >
          <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;
    border-radius: 50% !important;
  }

  .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>