<!--
 * @Date: 2021-04-15 19:29:59
 * @LastEditors: kongbo
 * @Description: 
 * @LastEditTime: 2021-04-20 15:05:54
 * @weibo: kongbo@
 * @FilePath: /packages/im/danmu.vue
-->
<template>
  <div class="danmu_list" ref="danmu"></div>
</template>

<script>
import danmaku from 'danmaku/dist/esm/danmaku.dom.js';

export default {
  name: 'Message',
  props: ['message'],
  data () {
    return {
      speed: 144,
      dmStyle:{
        color: '#fff',
        textShadow: '#000 1px 0px 1px, #000 0px 1px 1px, #000  0px -1px 1px, #000  -1px 0px 1px'
      }
    }
  },
  mounted () {
    this.init()
  },
  onShow: function(options) {

  },
  onUnload: function() {

  },
  watch: {
    message: {
      handler(val = []) {
        if(val.length < 1){return;}
        (!this.dm || !this.dm.emit) && this.init();
        val.forEach(element => {
          this.dm.emit({
            text: element.content,
            style: this.dmStyle
          })
        });
      },
      immediate: true
    }
  },
  methods: {
    init(){
      this.dm && this.dm.destroy && this.dm.destroy();
      this.dm = new danmaku({
        container: this.$refs.danmu,
        speed: this.speed,
      });
    }
  }
}
</script>

<style scoped lang="less">
.danmu_list {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  font-size: 20px;
  line-height: 170%;
  font-family: SimHei, "Microsoft JhengHei", Arial, Helvetica, sans-serif;
  color: '#fff';
  text-shadow: '#000 1px 0px 1px, #000 0px 1px 1px, #000  0px -1px 1px, #000  -1px 0px 1px';
}
</style>
