<template>
  <div :id= "'mt-video'+UUID"
    :style="{
      width: width,
      height: height,
      maxWidth: '100%',
      maxHeight: '100%',
    }"
  ></div>
</template>
<script>
  import DPlayer from 'DPlayer'
  export default {
    components: {
    },
    data () {
      const UUID = (Math.random() * 1000).toString().split('.')[0]
  
      return {
        UUID: UUID,
        video: {}
      }
    },
    props: {
      autoplay: {
        default: false,
        type: Boolean
      },
      width: {
        default: 'auto',
        type: String
      },
      height: {
        default: 'auto',
        type: String
      },
      pic: String,
      type: {
        default: 'flv',
        type: String
      },
      contextmenu: {
        default: () => {
          return [{
            text: '关于医会宝',
            url: 'http://www.medmeeting.com'
          }]
        },
        type: Array
      }
    },
    methods: {
      init (str) {
        this.$load('http://cdn.bootcss.com/flv.js/1.3.2/flv.js', () => {
          console.log('load flvjs')
          this._initVideo(str)
        })
      },
      _initVideo (str) {
        this.$nextTick(() => {
          this.video = new DPlayer({
            autoplay: this.autoplay,
            theme: '#112233',
            element: document.getElementById(`mt-video${this.UUID}`),
            video: {
              url: str,
              pic: this.pic,
              type: this.type
            },
            contextmenu: this.contextmenu
          })
        })
      }
    }
  }
</script>
<style>
  @import '~dplayer/dist/Dplayer.min.css';
</style>
