<template>
  <view id="dplayer" style="width:100%; height:100%;"></view>
</template>

<script>
import DPlayer from 'dplayer'

export default {
  props: {
    url: {
      type: String
    },
	thumbnails :{
		type:String
	}
  },
  data(){
    return {
      player: null
    }
  },
  watch: {
    url: {
      handler(val) {
        if (val) {
          if (this.player) {
            const paused = this.player.paused
            this.player.switchVideo({
              url: val,
              type: 'auto'
            })
            if (!paused) {
              this.player.play()
            }
          } else {
            this.init()
          }
        }
      }
    }
  },
  methods: {
    init() {
		console.log('按钮被点击了！',global);
      const url = this.url
	  const thumbnails=this.thumbnails
      this.player = new DPlayer({
        container: document.getElementById('dplayer'),
        theme: '#DA2538',
        autoplay: false,
        screenshot: false,
        airplay: false,
        loop: false,
        volume: 1,
        playbackSpeed: [1, 1.25, 1.5, 2, 2.5, 3],
        video: {
          url: url,
          type: 'auto',
		  thumbnails: thumbnails,
        },
		danmaku: {
		        id: '472e23693b36d8b36779d8ebe2711c2b9d16f8848f',
		        api: 'https://aaaa.xjoht.com/api/app/danmu/',
		        token: 'tokendemo',
		        maximum: 1000,
		        // addition: ['https://aaaa.xjoht.com/api/app/danmu?0b51e9ec886120748b5793cc3b33697a3336e86e6266a1d9cabac28084a4ca56bbf221f451fc6846f21b0977c20f740b871eea77b0234d7e7e73d37972ffd713ea0e8a032d0c863d35f713d9e87563265521ddf460f9e25ed66b87ed2c17e5737a'],
		        user: 'DIYgod',
		        bottom: '15%',
		        unlimited: true,
		        speedRate: 0.5,
		    },
      })
      this.player.on('destroy', () => {
        this.player = null
      })
      this.player.on('pause', () => {
        this.$emit('pause')
      })
      this.player.on('timeupdate', () => {
        if (this.player) {
          this.$emit('timeupdate', this.player.video.currentTime)
        }
      })
      this.player.on('controller_show', () => {
        this.$emit('controller', true)
      })
      this.player.on('controller_hide', () => {
        this.$emit('controller', false)
      })
      this.player.on('setting_show', () => {
        this.$emit('setting', true)
      })
      this.player.on('setting_hide', () => {
        this.$emit('setting', false)
      })
    }
  }
}
</script>
<style>
	.dplayer-comment-input{
		background-color: red;
	}
</style>