<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, nextTick } 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) {
          if (data.record.videoUrl) {
            nextTick(() => {
              /**
               * options配置项(使用vue3-video-play插件)
               * 新增支持m3u8流视频
               */
              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' : '';
              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>