<template>
  <div class="chat">
    <div class="top-chat-list">
      <top-chat-box></top-chat-box>
    </div>
    <div class="chat-list">
      <chat-box></chat-box>
    </div>
    <transition name="fade">
      <div class="svgaPage" v-show="showSVAG">
        <canvas id="svgaBox"></canvas>
      </div>
    </transition>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import topChatBox from './chat/topChat';
import chatBox from './chat/chat';
export default {
  name: 'vertical-chat-box',
  components: {
    topChatBox,
    chatBox
  },
  props: {
    isShowChat: {}
  },
  data() {
    return {
      showSVAG: false
    };
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo',
      channelInfo: 'channelInfo',
      giftAni: 'giftAni'
    })
  },
  mounted() {
    this.$nextTick(() => {
      const player = require('@gdyfe/svgaplayer-for-live')
      this.SVGAPlayer = player.default({
        target: '#svgaBox'
      });
      this.$Bus.$on('bus-playsvga', this.playsvga);
      // setTimeout(() => {
      //   this.playsvga([{
      //     value: '//static-pro.guangdianyun.tv/static/svga/666/666·.svga',
      //     userHeadImg:'https://static-pro.guangdianyun.tv/robot-head/57f8ea050533d96616be29c52729124c.jpeg',
      //     userNick: 'Michael',
      //     filterContent: {
      //       img: '//static-pro.guangdianyun.tv/static/svga/666/666@2x.png',
      //       num: 1,
      //       name: '666'
      //     }
      //   }])
      // }, 1000)
    });
  },
  methods: {
    playsvga(url){
      if (!this.SVGAPlayer) return
      this.showSVAG = true
      this.SVGAPlayer.enqueue(url)
      this.SVGAPlayer.$on('end',(info) => {
        this.$Bus.$emit('bus-setGiftBannerInfo', null);
        this.showSVAG = false
      })
      this.SVGAPlayer.$on('start',(info) => {
        this.$Bus.$emit('bus-setGiftBannerInfo', info);
        this.showSVAG = true
      })
     },
  },
  watch: {
    giftAni(newVal) {
      if (newVal) {
        console.log('初始化svgaplayer')
        const player = require('@gdyfe/svgaplayer-for-live')
        this.SVGAPlayer = player.default({
          target: '#svgaBox'
        });
      } else {
        this.SVGAPlayer.destroyed()
        this.SVGAPlayer = null
        this.showSVAG = false
      }
    }
  }
};
</script>

<style lang="less" scoped>
.chat {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  .top-chat-list {
    flex: 0 0 auto;
  }
  .chat-list {
    flex: 1;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  .svgaPage {
   position: absolute;
   bottom: 0;
   width: 90vw;
   height: 90vw;
  //  background: rgba(0, 0, 0, 0.2);
   z-index: 199;
   padding-bottom: 0.5rem;
   display: flex;
   justify-content: center;
   align-items: center;
   .btn {
    position: absolute;
   }
   #svgaBox {
     width: 320px;
     height: 320px;
   }
  }
}
</style>
