<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      width="55rem"
      :height="heightNum"
      @register="register"
      title="视频预览"
      @cancel="handleCancel"
      :showOkBtn="false"
    >
      <div class="video-sty">
        <div>
          <videoPlay
            v-if="showVideo"
            ref="video"
            style="display: inline-block; width: 100%"
            v-bind="options"
          />
        </div>
      </div>
    </BasicModal>
  </div>
</template>
<script setup lang="ts">
  import { ref, nextTick, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { videoPlay } from 'vue3-video-play'; // 引入组件
  import 'vue3-video-play/dist/style.css'; // 引入css

  const heightNum = ref(800);
  const showVideo = ref(false);
  const options = reactive({
    width: '800px',
    height: '450px',
    color: '#409eff',
    muted: false, //静音
    webFullScreen: false,
    autoPlay: true, //自动播放
    currentTime: 0,
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false, //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制器
    title: '', //视频名称
    type: 'm3u8',
    src: '', //视频源
    controlBtns: [
      'audioTrack',
      'quality',
      'speedRate',
      'volume',
      'setting',
      'pip',
      'pageFullScreen',
      'fullScreen',
    ],
  });
  const video: any = ref(null);

  nextTick(() => {
    console.log(video.value);
  });

  const [register] = useModalInner((data) => {
    if (data) {
      if (data.record.videoUrl) {
        showVideo.value = true;
        options.src = data.record.videoUrl;
        options.autoPlay = true;
      }
    }
  });
  const handleCancel = () => {
    //关闭暂停播放视频
    video.value.pause();
  };
</script>
<style>
  .video-sty {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>