<template>
  <li class="card-item inline-block" :style="'border:1px solid ' + item.cardColor">
    <div class="card-item_head" :style="'background:' + item.cardColor">
      <!-- gic定义的卡券类型(0:普通卡券, 1:e待洗, 2:好办卡券, 3:微盟外部券, 4:通用外部券 -->
      <el-tooltip placement="top" v-if="item.gicCouponType == 3 || item.gicCouponType == 4">
        <div style="max-width: 300px" slot="content">{{ item.gicCouponType | getTipText }}</div>
        <span class="card-item_head-tip">外部券<i class="iconfont icon-xinxixianshi card-item_head-icon"></i></span>
      </el-tooltip>
      <h4>{{ item.cardName }}</h4>
      <p>{{ item.subName }}</p>
    </div>
    <div class="card-item_body">
      <div class="card-item__count clearfix">
        <div>
          <h5>{{ item.getedQuantity }}</h5>
          <p>领取数量</p>
        </div>
        <div>
          <h5>{{ item.usageQuantity }}</h5>
          <p>使用数量</p>
        </div>
        <div>
          <h5>{{ ((item.usageQuantity * 100) / (item.getedQuantity === 0 ? 1 : item.getedQuantity)).toFixed(2) }}%</h5>
          <p>核销率</p>
        </div>
        <div>
          <h5>{{ item.saleAmount }}</h5>
          <p>销售额</p>
        </div>
        <el-tooltip class="item" effect="dark" open-delay="300">
          <div slot="content">{{ item.isApiCreate ? '该卡券为外部接口创建卡券无法用于营销' : '卡券的领取数量\使用数量\核销率\销售额统计数据每隔3小时更新一次' }}</div>
          <i style="position:absolute;right:10px;top:10px;cursor:pointer;color:#c0c4cc;font-size:18px;" class="el-icon-question"></i>
        </el-tooltip>
      </div>
      <div class="card-item__detail">
        <p class="ellipsis-100">
          使用有效期：<span v-if="item.cardEffectiveMode !== 0">领取后{{ (item.startDay === 0 ? '当' : '第' + item.startDay) + '天，有效天数' + item.limitDay }}天</span>
          <span v-if="item.cardEffectiveMode === 0">{{ formatDateTimeByType(item.beginDate, 'yyyy-MM-dd') }} 至 {{ formatDateTimeByType(item.endDate, 'yyyy-MM-dd') }}</span>
        </p>
        <p>
          模板投放期限：
          <!-- putEffectiveMode 0：固定日期，1：长期 -->
          <span v-if="item.putEffectiveMode == 0">{{ formatDateTimeByType(item.putBeginDate, 'yyyy-MM-dd') }} 至 {{ formatDateTimeByType(item.putEndDate, 'yyyy-MM-dd') }}</span>
          <span v-else>长期有效</span>
        </p>
        <p class="ellipsis-100">
          使用条件：<el-popover :open-delay="300" placement="top-start" width="200" trigger="hover" :content="item.useCondition | filterUseCondition">
            <span slot="reference" class="ellipsis-100">{{ item.useCondition | filterUseCondition }}</span>
          </el-popover>
        </p>
        <p class="ellipsis-100">
          适用门店：<span>{{ item.storeMode === 0 ? '所有门店' : item.storeMode === 1 ? '部分分组' : '部分门店' }}</span>
        </p>
        <p class="ellipsis-100">
          领取限制：<span>每人限制{{ item.cardLimit }}张</span>
        </p>
        <p class="ellipsis-100">
          卡券编号：<span>{{ item.coupCardId }}</span>
        </p>
        <p v-if="item.erpDemoCode" class="ellipsis-100">
          demo券号：<span>{{ item.erpDemoCode || '--' }}</span>
        </p>
      </div>
      <div class="card-item_foot clearfix">
        <div class="fl" v-if="item.gicCouponType != 3 && item.gicCouponType != 4">
          <!-- 由外部api创建 仅展示详情、删除、报表按钮 -->
          <span v-if="item.auditingStatus !== -1"
            >剩余库存：{{ item.couponStock }} <a title="编辑库存" v-if="!shelfFlag && item.useCustomCode === 0 && item.canEdit !== false && !item.isApiCreate" @click="preAdjustStock(item)"><i class="el-icon-edit"></i></a
          ></span>
        </div>
        <render-temp v-if="!shelfFlag" :item="item" @handler="handler"></render-temp>
        <a title="删除" class="fr" v-if="shelfFlag" @click="delShelf(item)"><i class="el-icon-delete"></i></a>
      </div>
    </div>
  </li>
</template>

<script>
import renderTemp from './status-render.js';
import { formatDateTimeByType, appletUnableAlert } from '@/utils/index.js';
export default {
  props: {
    item: {
      type: Object,
      default() {
        return {
          cardEffectiveMode: 0
        };
      }
    },
    //是否为展架里的卡券 默认为false
    shelfFlag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formatDateTimeByType
    };
  },
  components: {
    'render-temp': renderTemp
  },
  methods: {
    /**
     * @param val
     * 1 投放  2 报表  3 编辑  4 删除 5 详情  6复制  7领取记录
     */
    handler(val) {
      // 若小程序版本不支持  不支持 卡券新建编辑复制  修改库存
      if ((val == 3 || val == 6) && !this.$store.state.marketing.appletEnable) {
        appletUnableAlert();
        return;
      }
      switch (val) {
        case 1:
          this.$router.push({
            path: '/card/addgroupsend/' + this.item.coupCardId,
            query: {
              name: this.item.cardName
            }
          });
          break;
        case 2:
          this.$router.push('/card/analysis/' + this.item.coupCardId);
          break;
        case 3:
          this.$router.push('/card/edit/' + this.item.coupCardId);
          break;
        case 4:
          this.$emit('delete-card', this.item.coupCardId);
          break;
        case 5:
          this.$router.push('/card/info/' + this.item.coupCardId);
          break;
        case 6:
          this.$router.push('/card/copy/' + this.item.coupCardId);
          break;
        case 7:
          this.$router.push('/card/record/get?coupCardId=' + this.item.coupCardId + '&new=1');
          break;
      }
    },
    //编辑库存 前置
    preAdjustStock() {
      this.$emit('adjust-stock', this.item);
    },
    delShelf(obj) {
      this.$emit('del-shelf', obj);
    }
  },
  filters: {
    getTipText(type) {
      let result = '--';
      if (type == 3) {
        result = '当前卡券由微盟侧创建，由微盟侧进行卡券控制。在GIC侧只能用于卡券直投、智能营销和扫码营销。';
      } else if (type == 4) {
        result = '当前卡券由外部创建，由外部进行卡券控制，无法在GIC侧进行发放。';
      }
      return result;
    },
    filterUseCondition(val) {
      var _useCondition = JSON.parse(val);
      return (typeof _useCondition.sale_limit === 'undefined' ? '' : (typeof _useCondition.sale_limit.fee === 'undefined' ? '' : (_useCondition.sale_limit.fee ? '最低消费满' + _useCondition.sale_limit.fee : '无最低消费要求') + '；') + (typeof _useCondition.sale_limit.goods === 'undefined' ? '' : '消费指定商品' + _useCondition.sale_limit.goods + '；')) + (typeof _useCondition['goods'] === 'undefined' ? '' : (typeof _useCondition.goods.ok === 'undefined' ? '' : '适用商品（' + (_useCondition.goods.ok || '无') + ')；') + (typeof _useCondition.goods.no === 'undefined' ? '' : '不适用商品（' + (_useCondition.goods.no || '无') + ')；')) + (typeof _useCondition.only === 'undefined' || _useCondition.only == 0 ? '' : '不可与其他优惠共享');
    }
  }
};
</script>
<style lang="scss" scoped>
.card-item {
  width: 340px;
  margin: 10px;
  border: 1px solid #63b359;
  border-radius: 4px;
  overflow-y: none;
  vertical-align: middle;
  min-height: 376px;
  &_head {
    position: relative;
    width: 100%;
    text-align: center;
    color: #fff;
    background: #63b359;
    padding: 10px 0;
    .card-item_head-tip {
      position: absolute;
      top: -1px;
      left: -1px;
      width: 76px;
      height: 24px;
      line-height: 24px;
      background: #d9e9f8;
      border-radius: 3px 0px 16px 0px;
      font-size: 12px;
      font-weight: 400;
      color: #1890ff;
      cursor: default;
      .card-item_head-icon {
        margin-left: 5px;
        font-size: 12px;
      }
    }
    h4 {
      font-size: 16px;
      font-weight: 500;
      line-height: 1.8em;
    }
    p {
      color: #fff;
      line-height: 1.8em;
      font-size: 13px;
    }
  }
  &_body {
    .card-item__count {
      position: relative;
      border-bottom: 1px solid #ddd;
      & > div {
        width: 50%;
        float: left;
        text-align: center;
        margin: 10px 0;
        h5 {
          font-size: 20px;
          line-height: 28px;
        }
        p {
          font-size: 12px;
          color: #999;
          line-height: 20px;
        }
      }
    }
    .card-item__detail {
      padding: 10px;
      height: 150px;
      overflow-y: auto;
      p {
        line-height: 1.8em;
        span {
          font-size: 13px;
          color: #606266;
        }
      }
    }
  }
  &_foot {
    background: #f8f9fb;
    height: 44px;
    line-height: 44px;
    padding: 0 10px;
    /deep/ a {
      color: #909399;
      &:hover {
        color: #1890ff;
      }
    }

    /deep/ i {
      font-size: 16px;
      padding-left: 2px;
      cursor: pointer;
    }
    /deep/ .el-icon-delete {
      &:hover {
        color: #f56c6c;
      }
    }
    /deep/ .fr span {
      font-size: 13px;
    }
  }
}
</style>
