<!--群发任务 总数据-->
<template>
  <div class="middle">
    <div class="item-bg bg-purper center_flex min-w-173">
      <div>
        <p class="key">计划触达人数<tip :text="tipText.planMbrNum" /></p>
        <p class="value">{{ formatterNum(data.planMbrNum) }}</p>
      </div>
      <div class="item-arrow purper">
        <p>成功率</p>
        <p>{{ formatterRate((data.taskCreateNum / data.planMbrNum) * 100) }}</p>
      </div>
    </div>
    <div class="item-bg bg-purper center_flex min-w-173">
      <div style="padding-left: 20px">
        <p class="key">任务创建成功顾客数<tip :text="tipText.taskCreateNum" /></p>
        <p class="value">{{ formatterNum(data.taskCreateNum) }}</p>
      </div>
      <div class="item-arrow purper">
        <p>执行率</p>
        <p>{{ formatterRate((data.massExecuteNum / data.taskCreateNum) * 100) }}</p>
      </div>
    </div>
    <div class="item-bg bg-purper center_flex min-w-173">
      <div>
        <p class="key">群发执行顾客数<tip :text="tipText.taskExecuteNum" /></p>
        <p class="value">{{ formatterNum(data.massExecuteNum) }}</p>
      </div>
      <div class="item-arrow purper">
        <p>触达率</p>
        <p>{{ formatterRate((data.touchMbrNum / data.massExecuteNum) * 100) }}</p>
      </div>
    </div>
    <div class="item-bg bg-purper center_flex min-w-173">
      <div>
        <p class="key">实际触达人数<tip :text="tipText.touchMbrNum" /></p>
        <p class="value">{{ formatterNum(data.touchMbrNum) }}</p>
      </div>
      <div class="item-arrow green">
        <p>转化率</p>
        <p>{{ formatterRate((data.convMbrNum / data.touchMbrNum) * 100) }}</p>
      </div>
    </div>
    <div class="item-bg bg-green center_flex min-w-188 h143">
      <div style="padding-left: 10px">
        <p class="key">触达顾客转化人数<tip :text="tipText.convMbrNum" /></p>
        <p class="value">{{ formatterNum(data.convMbrNum) }}</p>
      </div>
    </div>
    <div class="item-bg bg-green min-w-235 h143">
      <div class="center_wrap">
        <div>
          <p class="key">触达顾客订单数<tip :text="tipText.convOrderCnt" /></p>
          <p class="value">{{ formatterNum(data.convOrderCnt) }}</p>
        </div>
        <div>
          <p class="key">触达顾客转化收益（元）<tip :text="tipText.convSalesAmt" /></p>
          <p class="value">{{ formatterNumAndFixed(data.convSalesAmt) }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import formatterNum from '@/mixins/validateNum';
import tip from '@/components/tip';
export default {
  name: 'batch-send-sum',
  components: { tip },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      tipText: {
        planMbrNum: '计划使用群发任务触达的顾客人数。如果当前计划在不同时间，通过不同区域（门店），用群发多次触达同一个顾客，会进行去重统计，仅计算为1个人。',
        taskCreateNum: '成功创建群发任务的人数。若该计划在不同时间通过不同区域（门店）用群发多次触达同一个顾客，会进行去重统计，仅计算为1个人。导致群发任务创建不成功的原因可能是：①非所选企业下的客户好友；②该好友每月群发消息接收次数已达上限',
        taskExecuteNum: '导购使用企业微信执行群发的顾客人数。如果当前计划在不同时间，通过不同区域（门店），用群发多次触达同一个顾客，会进行去重统计，仅计算为1个人。点击“查看详情”可以找到群发任务执行率较低的门店，推动门店导购在企业微信中执行群发。',
        touchMbrNum: '导购执行群发后，群发消息发送成功的顾客数，按照顾客人数进行统计。如果当前计划在不同时间，通过不同区域（门店），用群发多次触达同一个顾客，会进行去重统计，仅计算为1个人。可能导致群发消息发送失败的原因是：①群发任务下发后，到导购执行群发的时间段内，顾客删除了企业微信好友，使得发送失败。②顾客是多个门店导购的企微好友，已经有某一导购群发成功，其他导购执行群发会发送失败',
        convMbrNum: '导购执行群发消息发送成功的顾客中，在收益有效期内消费的顾客人数。无论顾客消费了几次，会进行去重统计，仅计算为1个人。',
        convOrderCnt: '导购执行群发消息发送成功的顾客中，在收益有效期内消费的顾客订单数。',
        convSalesAmt: '导购执行群发消息发送成功的顾客中，在收益有效期内消费的顾客订单金额。'
      }
    };
  },
  mixins: [formatterNum]
};
</script>
<style lang="scss" scoped>
.middle {
  font-family: PingFangSC-Medium, PingFang SC;
  height: 143px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .item-bg {
    flex: 1;
    height: 100px;
    border-radius: 6px;
    margin-right: 47px;
    box-sizing: border-box;
    position: relative;
    &.bg-green {
      background: #e3fff8;
    }
    &.bg-purper {
      background: #f0f5ff;
    }
    .key {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #606266;
      line-height: 20px;
      padding-top: 4px;
      margin-bottom: 6px;
    }
    .value {
      font-size: 24px;
      font-family: DINAlternate-Bold, DINAlternate;
      font-weight: bold;
      color: #303133;
      line-height: 28px;
    }
  }
  .item-arrow {
    width: 78px;
    height: 65px;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 7px;
    box-sizing: border-box;
    z-index: 3;
    right: -77px;
    &.purper {
      background: url('~@/assets/img/arrow_purper.png');
      background-size: 100% 100%;
    }
    &.green {
      background: url('~@/assets/img/arrow_green.png');
      background-size: 100% 100%;
    }
    p {
      width: 47px;
      font-size: 12px;
      margin-top: -3px;
      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;
}
.h143 {
  height: 143px !important;
}
.min-w-173 {
  min-width: 173px;
}
.min-w-188 {
  min-width: 188px;
  margin-right: 7px !important;
}
.min-w-235 {
  min-width: 235px;
  margin-right: 0 !important;
  display: flex;
  justify-content: center;
  padding: 7px 0;
  .center_wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
</style>
