<template>
  <div class="dm-card__item__wrap">
    <img v-if="item.status === 0" :src="require('../assets/img/delete_icon.png')" draggable="false" class="flag" />
    <img v-else-if="item.couponStock <= 0" :src="require('../assets/img/stock_icon.png')" draggable="false" class="flag" />
    <div class="dm-card__item" :style="{ background: item.cardColor }">
      <img class="dm-card__item__avatar" :src="item.brandLogo || loadErrorImg" alt="" />
      <div class="inline-block">
        <p class="dm-card__item__title">{{ item.cardName }}</p>
        <p class="dm-card__item__desc" v-if="item.cardEffectiveMode !== 0">领取后第{{ item.startDay + 1 }}-{{ item.limitDay + item.startDay }}天</p>
        <p class="dm-card__item__desc" v-if="item.cardEffectiveMode === 0">{{ formatDateTimeByType(item.beginDate, 'yyyy-MM-dd') }} 至 {{ formatDateTimeByType(item.endDate, 'yyyy-MM-dd') }}</p>
      </div>
    </div>
    <p class="dm-card__item--bottom">
      <span>适用{{ item.storeMode === 0 ? '所有门店' : item.storeMode === 1 ? '部分分组' : '部分门店' }}</span>
    </p>
  </div>
</template>

<script>
import { formatDateTimeByType } from '../assets/utils.js';
export default {
  name: 'item-card',
  data() {
    return {
      formatDateTimeByType,
      // eslint-disable-next-line
      loadErrorImg: require('../assets/img/loaderror.png')
    };
  },
  props: {
    item: {
      type: Object,
      default() {
        return {};
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.dm-card__item__wrap {
  position: relative;
  img.flag {
    position: absolute;
    right: 0px;
    top: -2px;
    z-index: 5;
    width: 70px;
  }
}
</style>
