<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      width="55rem"
      :height="heightNum"
      @register="register"
      title="视频预览"
      @cancel="handleCancel"
      :showOkBtn="false"
    >
      <div class="video-sty">
        <div>
          <vue3VideoPlay v-bind="options" :poster="videoPoster" />
        </div>
      </div>
    </BasicModal>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';

  export default defineComponent({
    name: 'DialogPreviewVideo',
    components: {
      BasicModal,
    },
    emits: ['success', 'register'],
    setup() {
      let options: any = reactive({});
      const videoPoster = ref('');
      const heightNum = ref(800);
      const [register] = useModalInner(async (data) => {
        if (data) {
          const fileText = data.record?.videoUrl.split('.').pop();
          videoPoster.value = data.record?.avatar;
          options.width = '800px'; //播放器高度
          options.height = '500px'; //播放器高度
          options.color = ''; //主题色
          options.type =
            fileText === 'm3u8' ? 'm3u8' : fileText === 'mp4' ? 'video/mp4' : 'video/x-flv';
          options.title = data.record?.name; //视频名称
          options.src = data.record?.videoUrl; //视频源
          options.muted = false; //静音
          options.webFullScreen = false;
          options.speedRate = ['0.75', '1.0', '1.25', '1.5', '2.0']; //播放倍速
          options.autoPlay = false; //自动播放
          options.loop = false; //循环播放
          options.mirror = false; //镜像画面
          options.ligthOff = false; //关灯模式
          options.volume = 0.3; //默认音量大小
          options.control = true; //是否显示控制
          options.controlBtns = [
            'audioTrack',
            'quality',
            'speedRate',
            'volume',
            'setting',
            'pip',
            'pageFullScreen',
            'fullScreen',
          ]; //显示所有按钮,
        }
      });
      const handleCancel = () => {};
      return {
        register,
        handleCancel,
        options,
        heightNum,
        videoPoster,
      };
    },
  });
</script>
<style>
  .video-sty {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>