<template>
  <div class="red-packet" :class="info.userId == userId ? 'me' : 'you'">
    <div class="top" :class="info.ext.grabbed == 1 ? 'open' : 'unopen'">
      <i class="red-packet-icon"></i>
      <div class="word">
        <p>{{info.content.title}}</p>
        <p v-if="info.ext.grabbed == 1">已领取</p>
      </div>
    </div>
    <div class="bot">
      EOS红包
    </div>
  </div>
</template>

<script>

export default {
  name: 'redPacket',
  props: ['info'],
  computed: {
    userId () {
      return this.$store.state.userId
    }
  }
}
</script>

<style lang="scss" scoped>
.red-packet{
  width: 200px;
  border-radius: 6px;
  margin-top: 5px;
  overflow: hidden;
  cursor: pointer;
  .top{
    height: 70px;
    line-height: 70px;
    font-size: 14px;
    padding-left: 14px;
    .word{
      color: #ffffff;
      display: inline-block;
      vertical-align: middle;
      p{
        line-height: 1;
        &:first-child{
          margin-bottom: 6px;
        }
      }
    }
  }
  .open {
    background-color: #f6d7bc;
    .red-packet-icon{
      background: url('./img/open-packet.png') no-repeat;
      width: 36px;
      height: 51px;
      background-size: 100%;
    }
  }
  .unopen {
    background-color: #e99c57;
    .red-packet-icon {
      background: url('./img/unopen-packet.png') no-repeat;
      width: 36px;
      height: 44px;
      background-size: 100%;
    }
  }
  .bot{
    background-color: #ffffff;
    color: #999999;
    padding-left: 14px;
    font-size: 12px;
    height: 26px;
    line-height: 26px;
  }
  &.you{
    float: left;
    margin-left: 12px;
  }
  &.me{
    float: right;
    margin-right: 12px;
    .top{
      text-align: left;
    }
    .bot{
      text-align: left;
    }
  }
  .tips{
    display: inline-block;
  }
  .red-packet-icon{
    display: inline-block;
    vertical-align: middle;
    margin-right: 14px;
  }
}
</style>
