<template>
  <div class="gift-roll">
    <transition-group name="move-left" tag="div">
      <div v-for="item in list" :key="item.id">
        <div class="item">
          <div class="box cash" v-if="item.msgType == 2">
            <div class="head">
              <img v-if="item.userHeadImg" :src="item.userHeadImg" alt="" />
              <img v-else :src="channelInfo.defaultUserAva" alt="" />
            </div>
            <div class="info">
              <div class="name">{{ item.userNick }}</div>
              <div class="giftName">打赏{{ item.money }}元</div>
            </div>
          </div>
          <div class="box gift" v-else-if="item.msgType == 14">
            <div class="head">
              <img v-if="item.userHeadImg" :src="item.userHeadImg" alt="" />
              <img v-else :src="channelInfo.defaultUserAva" alt="" />
            </div>
            <div class="info">
              <div class="name">{{ item.userNick }}</div>
              <div class="giftName">送出{{ giftImg(item).name }}</div>
            </div>
            <div class="type">
              <img :src="giftImg(item).img" alt="" />
              <em class="num">* {{ giftImg(item).num }}</em>
            </div>
          </div>
        </div>
      </div>
    </transition-group>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: 'vertical-gift-roll-box',
  data() {
    return {
      list: []
    };
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo'
    })
  },
  mounted() {
    this.$Bus.$on('bus-giftRoll', this.addList);
  },
  methods: {
    giftImg(info) {
      const giftInfo = JSON.parse(info.filterContent || '{}');
      if (!giftInfo.img) {
        giftInfo.img = `${process.env.DEF_OSS}/static/reward/gift-${giftInfo.imgType}.png`;
      }
      return giftInfo;
    },
    addList(obj) {
      if (this.list.length >= 2) {
        this.list.shift();
        this.list.push(obj);
      } else {
        this.list.push(obj);
      }
      setTimeout(() => {
        this.list.shift();
      }, 5000);
    }
  },
  beforeDestroy() {
    this.$Bus.$off('bus-giftRoll', this.addList);
  }
};
</script>

<style lang="less" scoped>
.gift-roll {
  .item {
    display: inline-block;
  }
  .box {
    display: flex;
    align-items: center;
    margin-bottom: 0.1rem;
    padding: 0.01rem;
    height: 0.35rem;
    border-radius: 0.35rem;
    background: rgba(0, 0, 0, 0.3);
    &.gift {
      .head {
        width: 0.3rem;
        height: 0.3rem;
        border-radius: 100%;
        overflow: hidden;
        margin-left: 0.02rem;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      .info {
        margin: 0 0.08rem 0.02rem 0.08rem;
        .name {
          line-height: 0.2rem;
          font-size: 0.11rem;
          color: #ffffff;
        }
        .giftName {
          line-height: 0.1rem;
          font-size: 0.09rem;
          color: #d3d3d3;
        }
      }
      .type {
        position: relative;
        width: 0.4rem;
        height: 0.4rem;
        img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
        .num {
          position: absolute;
          left: 100%;
          top: 0;
          color: red;
          white-space: nowrap;
        }
      }
    }
    &.cash {
      .head {
        width: 0.3rem;
        height: 0.3rem;
        border-radius: 100%;
        overflow: hidden;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      .info {
        margin: 0 0.08rem;
        .name {
          line-height: 0.2rem;
          font-size: 0.11rem;
          color: #ffffff;
        }
        .giftName {
          line-height: 0.1rem;
          font-size: 0.09rem;
          color: #d3d3d3;
        }
      }
    }
  }
}
</style>
