<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 }">
      <div class="inline-block">
        <el-tooltip open-delay="200" effect="dark" :content="item.coupCardId" placement="top-start">
          <p class="dm-card__item__title">{{ item.cardName }}</p>
        </el-tooltip>
        <p class="dm-card__item__desc" v-if="item.cardEffectiveMode !== 0">领取后{{ (item.startDay === 0 ? '当' : '第' + item.startDay) + '天，有效天数' + item.limitDay }}天</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 v-if="overdue" class="danger-color fz12 mt5"><i class="el-icon-warning mr5 fz12"></i>超过投放期限</div>
  </div>
</template>

<script>
import { formatDateTimeByType } from '../assets/utils.js';
export default {
  name: 'item-card',
  data() {
    return {
      formatDateTimeByType
    };
  },
  props: {
    item: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    overdue() {
      const { putEndDate, putBeginDate, putEffectiveMode } = this.item;
      if (putEffectiveMode == 0) {
        return new Date() > new Date(putEndDate) || new Date() < new Date(putBeginDate);
      }
      return false;
    }
  }
};
</script>

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