<template>
  <popup v-if="ifShow">
    <div class="preview-wrapper">
      <div class="title">{{title}}</div>
      <img class="close-btn" :src="require('@/assets/images/icons/material_preview_close@2x.png')" @click=onClickClose />
      <video class="video" controls controlslist="nodownload noremoteplayback noplaybackrate" disablePictureInPicture autoplay :src="videoSrc"></video>
    </div>
  </popup>
</template>

<script>
import Popup from "@/components/shared/popup";

export default {
  props: {
  },
  components:{
    Popup
  },
  data(){
    return {
      ifShow: false,
      title: '',
      videoSrc: '',
    }
  },
  computed: {
  },
  watch: {
  },
  methods:{
    show(title = '', videoSrc) {
      if (!videoSrc) {
        return
      }
      this.title = title
      this.videoSrc = videoSrc
      this.ifShow = true
    },
    onClickClose() {
      this.ifShow = false
    }
  }
}
</script>

<style scoped lang="less">
  .preview-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    .title {
      position: absolute;
      top: 16px;
      left: 30px;
      z-index: 2;
      height: 36px;
      font-size: 14px;
      color: #FFFFFF;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-left: 16px;
      padding-right: 16px;
    }
    .close-btn {
      position: absolute;
      top: 16px;
      right: 30px;
      width: 36px;
      height: 36px;
      z-index: 2;
      cursor: pointer;
    }
    .video {
      position: absolute;
      width: 960px;
      height: 540px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
    }
  }
</style>