<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(3, 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: 'pc-chat-red-password',
  props: {
    info: {}
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo'
    }),
    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
      };
      this.set_showRedInfo(obj);
    }
  }
};
</script>

<style lang="less" scoped>
.red-info {
  display: flex;
  text-align: left;
  .user-head {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .right {
    flex: 1;
    padding: 0px 10px;
    .name {
      line-height: 20px;
      color: #9b9b9b;
      font-size: 12px;
    }
    .content {
      display: inline-block;
      padding: 0 16px;
      min-width: 220px;
      max-width: 100%;
      line-height: 20px;
      border-radius: 5px;
      font-size: 12px;
      color: #fff;
      background: #febe5c;
      border-radius: 4px;
      overflow: hidden;
      .info {
        padding: 6px 0;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ffb139;
        .icon {
          flex: 0 0 auto;
          margin-right: 10px;
          width: 25px;
          height: 35px;
          background: url('./img/icon-red.png') no-repeat center center;
          background-size: 100% auto;
        }
        .text {
          flex: 1;
          line-height: 22px;
          font-size: 14px;
          word-break: break-all;
        }
      }
      .peg {
        padding: 4px 0;
        font-size: 10px;
        color: #fff;
      }
    }
  }
}
</style>
