<template>
  <div class="slw">
    <iframe
      v-if="isShow"
      :id="id"
      allow="autoplay *; microphone *; fullscreen *" allowfullscreen allowtransparency key="" allowusermedia frameBorder="no"
      style="width: 100%; height: 100%;"
      :src="`https://cdn.cunwuyun.cn/jssdk/slw/index.html?url=${src}`"></iframe>
  </div>
</template>

<script>
  export default {
    props: ['src'],

    name: 'slwVideo',

    data () {
      return {
        isShow: true,
        id: `video-${new Date().getTime()}`
      }
    },

    watch: {
      src: {
        handler (val) {
          if (val) {
            this.isShow = false

            this.$nextTick(() => {
              this.isShow = true
            })
          }
        },
        immediate: true,
        deep: true
      }
    },

    mounted () {
      window.addEventListener('message', e => {
        if (e.data.type && e.data.name === 'fullscreen') {
          this.requestFullScreen(document.getElementById(this.id))
        }

        if (!e.data.type && e.data.name === 'fullscreen') {
          this.exitFullscreen()
        }
      }, false)
    },

    methods: {
      exitFullscreen () {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen()
        }
      },

      requestFullScreen (element) {
        var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
        if (requestMethod) {
          requestMethod.call(element);
        } else if (typeof window.ActiveXObject !== 'undefined') {
          var wscript = new ActiveXObject('WScript.Shell')
          if (wscript !== null) {
            wscript.SendKeys('{F11}')
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .slw {
    width: 100%;
    height: 100%;

    iframe {
      border: none;
    }
  }
</style>