<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="url" type="video/mp4" />
    </video>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref, watch, onMounted } from "vue";
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    url: {
      type: String,
      required: true
    }
  },
  setup(props, content) {
    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");
    });

    return { dialogVisible };
  }
});
</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 {
  width: 7.5rem;
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 999;
  background: rgba($color: #000000, $alpha: 1);
  .close {
    position: absolute;
    left: 0.2rem * 2;
    top: 0.2rem * 2;
    z-index: 99;
  }
  .player {
    width: 100%;
    background-color: black;
  }
}
</style>
