<!--卡券收益总数据-->
<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.planMbrNum) }}</p>
      </div>
    </div>
    <div class="item-arrow purper center_flex">
      <p>触达率</p>
      <p>{{ formatterRate((list.touchMbrNum / list.planMbrNum) * 100) }}</p>
    </div>
    <div class="item-bg bg-purper center_flex min-w-173">
      <div>
        <p>实际触达人数<tip :text="tipText.getMbrNum" /></p>
        <p>{{ formatterNum(list.touchMbrNum) }}</p>
      </div>
    </div>
    <div class="item-arrow purper center_flex">
      <p>转化率</p>
      <p>{{ formatterRate((list.convMbrNum / list.touchMbrNum) * 100) }}</p>
    </div>
    <div class="item-bg bg-purper center_flex min-w-214">
      <div>
        <p>触达顾客转化人数<tip :text="tipText.useMbrNum" /></p>
        <p>{{ formatterNum(list.convMbrNum) }}</p>
      </div>
    </div>
    <div class="item-bg bg-purper min-w-527">
      <div>
        <p>触达顾客订单数<tip :text="tipText.orderCnt" /></p>
        <p>{{ formatterNum(list.convOrderCnt) }}</p>
      </div>
      <div>
        <p>触达顾客转化收益（元）<tip :text="tipText.salesAmt" /></p>
        <p>{{ formatterNumAndFixed(list.convSalesAmt) }}</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: Object,
      default: () => {}
    }
  },
  data() {
    return {
      tipText: {
        touchMbrNum: '计划下发卡券触达的顾客人数。如果当前计划在不同时间，通过不同区域（门店），用卡券多次触达同一个顾客，会进行去重统计，仅计算为1个人。',
        getMbrNum: '实际下发卡券触达的顾客人数。如果当前计划在不同时间，通过不同区域（门店），用卡券多次触达同一个顾客，会进行去重统计，仅计算为1个人。',
        useMbrNum: '下发卡券触达的顾客中，在收益有效期内消费的顾客人数。只要下发卡券触达后消费就会被统计，无论卡券有没有被使用。无论顾客消费了几次，会进行去重统计，仅计算为1个人。',
        orderCnt: '下发卡券触达的顾客中，在收益有效期内消费的顾客订单数。只要下发卡券触达后消费就会被统计，无论卡券有没有被使用。',
        salesAmt: '下发卡券触达的顾客中，在收益有效期内消费的顾客订单金额。只要下发卡券触达后消费就会被统计，无论卡券有没有被使用。'
      }
    };
  },
  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>
