<!--卡券收益总数据-->
<template>
  <div class="middle">
    <div class="item-bg bg-purper center_flex min-w-173">
      <div>
        <p>触达人数<tip :text="tipText.touchMbrNum" /></p>
        <p>{{ formatterNum(list.touchMbrNum) }}</p>
      </div>
    </div>
    <div class="item-arrow purper center_flex">
      <p>领取率</p>
      <p>{{ formatterRate((list.getMbrNum / list.touchMbrNum) * 100) }}</p>
    </div>
    <div class="item-bg bg-purper center_flex min-w-173">
      <div>
        <p>领取人数<tip :text="tipText.getMbrNum" /></p>
        <p>{{ formatterNum(list.getMbrNum) }}</p>
      </div>
    </div>
    <div class="item-arrow purper center_flex">
      <p>使用率</p>
      <p>{{ formatterRate((list.useMbrNum / list.getMbrNum) * 100) }}</p>
    </div>
    <div class="item-bg bg-purper center_flex min-w-214">
      <div>
        <p>使用人数<tip :text="tipText.useMbrNum" /></p>
        <p>{{ formatterNum(list.useMbrNum) }}</p>
      </div>
    </div>
    <div class="item-bg bg-purper min-w-527">
      <div>
        <p>销售单数 <tip :text="tipText.orderCnt" /></p>
        <p>{{ formatterNum(list.orderCnt) }}</p>
      </div>
      <div>
        <p>销售单金额（元）<tip :text="tipText.salesAmt" /></p>
        <p>{{ formatterNumAndFixed(list.salesAmt) }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import formatterNum from '@/mixins/validateNum';
import tip from '@/components/tip';
export default {
  name: 'card-profit-sum',
  components: { tip },
  props: {
    list: {
      type: Array,
      default: () => {}
    }
  },
  data() {
    return {
      tipText: {
        touchMbrNum: '当前智能营销计划发出优惠券的顾客数，如果对同一个顾客发送了超过1张优惠券，仅计算为1个人。',
        getMbrNum: '当前智能营销计划发出优惠券后，领取优惠券的顾客人数。如果同一个顾客领取了超过1张优惠券，仅计算为1个人。',
        useMbrNum: '"当前智能营销计划发出优惠券后，使用优惠券的顾客人数。如果同一个顾客使用了超过1张优惠券，仅计算为1个人。由于是单独从“卡券”维度统计，因此只要是使用了该计划所发送优惠券的都会计入，即使顾客使用该优惠券的订单超过了收益有效期"',
        orderCnt: '"当前智能营销计划发出优惠券后，使用优惠券的订单数。如果一个订单使用了超过1张优惠券，仅计算为1个订单。由于是单独从“卡券”维度统计，因此只要是使用了该计划所发送优惠券的订单都会计入，即使该订单超过了收益有效期，也会将该订单计入销售单数。"',
        salesAmt: '"当前智能营销计划发出优惠券后，使用优惠券的订单金额。如果一笔订单使用了超过1张优惠券，该金额仅计算一次。由于是单独从“卡券”维度统计，因此只要是使用了该计划所发送优惠券的订单都会计入，即使该订单超过了收益有效期，也会将该订单金额计入。"'
      }
    };
  },
  mixins: [formatterNum]
};
</script>
<style lang="scss" scoped>
.middle {
  font-family: PingFangSC-Medium, PingFang SC;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .item-bg {
    flex: 1;
    height: 100%;
    border-radius: 6px;
    box-sizing: border-box;
    &.bg-green {
      background: #e3fff8;
    }
    &.bg-purper {
      background: #f0f5ff;
    }
    p {
      &:nth-child(1) {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #606266;
        line-height: 20px;
        padding-top: 4px;
        margin-bottom: 6px;
      }
      &:nth-child(2) {
        font-size: 24px;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        color: #303133;
        line-height: 28px;
      }
    }
  }
  .item-arrow {
    width: 89px;
    height: 71px;
    margin-right: 14px;
    &.purper {
      background: url('~@/assets/img/arrow_purper.png');
    }
    &.green {
      background: url('~@/assets/img/arrow_green.png');
    }
    p {
      width: 47px;
      font-size: 12px;
      line-height: 20px;
      color: #606266;
      font-family: PingFangSC-Regular, PingFang SC;
      &:nth-child(2) {
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        color: #303133;
      }
    }
  }
}
.center_flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.min-w-173 {
  min-width: 173px;
}
.min-w-214 {
  min-width: 214px;
}
.min-w-527 {
  min-width: 527px;
  margin-left: 5px;
  display: flex;
  align-items: center;
  padding: 0 42px 0 47px;
  box-sizing: border-box;
  div {
    flex: 1;
    text-align: left;
  }
}
</style>
