<template>
  <div class="box">
    <div
      class="item"
      :class="{ 'z-active': item.redpacketId == showRedInfo.id }"
      v-for="(item, index) in list"
      :key="index"
      @click="_showRed(item.redpacketId)"
    >
      <div class="icon-red"></div>
      <div class="receive">
        <span v-if="item.isExpire != 1 && item.isRob != 1 && item.isEmpty != 0">未领取</span>
        <span class="no" v-else-if="item.isExpire == 1">过期了</span>
        <span class="no" v-else-if="item.isRob == 1">已领取</span>
        <span class="no" v-else-if="item.isEmpty == 0">领完了</span>
      </div>
    </div>
  </div>
</template>

<script>
const RED_TYPE = 5;
import { mapGetters, mapMutations } from 'vuex';

export default {
  name: 'red-business-list',
  props: {
    list: {}
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      showRedInfo: 'showRedInfo'
    })
  },
  methods: {
    ...mapMutations({
      set_showRedInfo: 'set_showRedInfo'
    }),
    _showRed(id) {
      this.set_showRedInfo({ type: RED_TYPE, id: id });
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  height: 100%;
  white-space: nowrap;
  font-size: 0;
  overflow-x: auto;
  .item {
    display: inline-block;
    vertical-align: top;
    margin: 0 0.05rem;
    .icon-red {
      position: relative;
      display: block;
      width: 0.4rem;
      height: 0.5rem;
      background: url('./img/business-red.png') no-repeat center center;
      background-size: 100% 100%;
      &:before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
      }
    }
    .receive {
      text-align: center;
      font-size: 0.1rem;
      line-height: 0.15rem;
      color: #ffbf5a;
      &.no {
        color: #dddddd;
      }
    }
    &.z-active {
      .icon-red:before {
        display: none;
      }
    }
  }
}
</style>
