<template>
  <div class="video-dialog df ai-c jc-c" v-if="dialogVisible">
    <span class="close" style="color: #fff;" @click="dialogVisible = false"
      >关闭</span
    >
    <video class="player" controls autoplay>
      <source
        src="https://www.runoob.com/try/demo_source/movie.ogg"
        type="video/ogg"
      />
      <object data="movie.mp4" width="320" height="240">
        <embed
          width="320"
          height="240"
          src="https://www.runoob.com/try/demo_source/intro.swf"
        />
      </object>
    </video>
    <div class="player"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref, watch, onMounted } from "vue";
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  setup(props, content) {
    const player = ref();

    const dialogVisible = computed({
      get: () => props.visible,
      set: val => {
        content.emit("update:visible", val);
      }
    });
    watch(dialogVisible, value => {
      if (value) document.body.setAttribute("class", "hidden");
      else document.body.removeAttribute("class");
    });

    onMounted(() => {
      console.log(player);
    });
    return { dialogVisible, player };
  }
});
</script>
<style>
.hidden {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 998;
  overflow: hidden;
}
</style>
<style lang="scss" scoped>
.video-dialog {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
  background: rgba($color: #000000, $alpha: 0.3);
  .close {
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 99;
  }
  .player {
    width: 100%;
    height: 100%;
    background-color: black;
  }
}
</style>
