import {Device} from '../../base/Device';
/**
 * @author yeyuchao
 * @description 视频公共组件
 * @date 2019.1.22
 */
const screenHeight = window.screen.height;//get screen width
const screenWidth = window.screen.width;
let videoWidth   = screenWidth/2;//calculate the video width;
let videoHeight  = screenHeight / 2;//calculate the video height;
// const videoHeight  = screenHeight;
export default {
    props:{
        videoUrl:String,
        width:String
    },
    data() {
        return {
          showVideo:false,
          showVideoContainer:false,
          videoWidth:null,
          videoHeight:null,
          videoStyle:"",
          device:null
        }
    },

    computed: {
    },

    watch: {
    },

    created() {
      this.device = new Device();
      if(this.device.phone){
        videoWidth   = screenWidth;//calculate the video width;
        videoHeight  = screenHeight * 2 / 5;//calculate the video height;
      }else{
        videoWidth   = screenWidth/2;//calculate the video width;
        videoHeight  = screenHeight / 2;//calculate the video height;
      }
      this.videoWidth = videoWidth;
      this.videoHeight = videoHeight;
      this.videoStyle = "margin-top:calc(50vh - "+videoHeight/2+"px);margin-left:calc(50vw - "+videoWidth/2+"px);";
    },

    mounted() {

    },

    methods: {

        navigationToVideo() {
          this.showVideoContainer = true;
          setTimeout(()=>{
            this.showVideo = true;
          },100);
        },
        closeVideo(){
            this.showVideo = false;
            this.showVideoContainer = false;
        },
        videoCanPlay(){
            this.$nextTick(()=>{
                document.getElementById("videoContent").play();
            })
        },
    }
}
