<template>
  <div class="red-info">
    <div class="user-head">
      <img :src="userHead" alt="" />
    </div>
    <div class="right">
      <div class="name">{{ info.userNick }}</div>
      <div class="content" @click="_showRed(1, info.redpacketId)">
        <div class="info">
          <i class="icon"></i>
          <div class="text">{{ info.filterContent }}</div>
        </div>
        <div class="peg">直播间普通红包</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
  name: 'chat-red-default',
  props: {
    info: {}
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo',
      userInfo: 'userInfo'
    }),
    userHead() {
      const userHeadImg = this.info.userHeadImg;
      if (userHeadImg === 'phoneHead') {
        return this.channelInfo.defaultPhoneHeadAva;
      } else if (userHeadImg === 'default') {
        return this.channelInfo.defaultUserAva;
      } else if (!userHeadImg) {
        return this.channelInfo.defaultUserAva;
      } else {
        return userHeadImg;
      }
    }
  },
  methods: {
    ...mapMutations({
      set_showRedInfo: 'set_showRedInfo'
    }),
    _showRed(type, id) {
      const obj = {
        type: type,
        id: id
      };
      if (this.userInfo.id) {
        this.set_showRedInfo(obj);
      } else {
        this.$layer.msg('登陆后才能领取红包哦!~');
        this.$Bus.$emit('bus-showLogin', true);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.red-info {
  display: flex;
  .user-head {
    flex: 0 0 auto;
    width: 0.36rem;
    height: 0.36rem;
    border-radius: 0.04rem;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .right {
    flex: 1;
    padding: 0 0.1rem;
    .name {
      line-height: 0.2rem;
      font-size: 0.12rem;
    }
    .content {
      display: inline-block;
      padding: 0 0.16rem;
      min-width: 2.2rem;
      max-width: 100%;
      line-height: 0.2rem;
      border-radius: 0.05rem;
      font-size: 0.12rem;
      color: #fff;
      background: #febe5c;
      border-radius: 0.04rem;
      overflow: hidden;
      .info {
        padding: 0.06rem 0;
        display: flex;
        align-items: center;
        border-bottom: 0.01rem solid #ffb139;
        .icon {
          flex: 0 0 auto;
          margin-right: 0.1rem;
          width: 0.25rem;
          height: 0.35rem;
          background: url('./img/icon-red.png') no-repeat center center;
          background-size: 100% auto;
        }
        .text {
          flex: 1;
          line-height: 0.22rem;
          font-size: 0.14rem;
          word-break: break-all;
        }
      }
      .peg {
        padding: 0.04rem 0;
        font-size: 0.1rem;
        color: #fff;
      }
    }
  }
}
</style>
