<!--群发失败-短信总数据-->
<template>
  <div class="middle">
    <div class="item-bg bg-purper center_flex min-w-173">
      <div>
        <p>计划触达人数<tip :text="tipText.planMbrNum" /></p>
        <p>{{ formatterNum(data.planMbrNum) }}</p>
      </div>
    </div>
    <div class="item-arrow purper center_flex" style="width: 107px;background-size: 100% 100%">
      <p style="width: 80px;">发送成功率</p>
      <p style="width: 80px;">{{ formatterRate((data.touchMbrNum / data.planMbrNum) * 100) }}</p>
    </div>
    <div class="item-bg bg-purper center_flex min-w-173">
      <div>
        <p>实际触达人数<tip :text="tipText.touchMbrNum" /></p>
        <p>{{ formatterNum(data.touchMbrNum) }}</p>
      </div>
    </div>
    <div class="item-arrow purper center_flex">
      <p>转化率</p>
      <p>{{ formatterRate((data.convMbrNum / data.touchMbrNum) * 100) }}</p>
    </div>
    <div class="item-bg bg-purper center_flex min-w-212">
      <div>
        <p>触达顾客转化人数<tip :text="tipText.convMbrNum" /></p>
        <p>{{ formatterNum(data.convMbrNum) }}</p>
      </div>
    </div>
    <div class="item-bg bg-purper min-w-489">
      <div>
        <p>触达顾客订单数 <tip :text="tipText.convOrderCnt" /></p>
        <p>{{ formatterNum(data.convOrderCnt) }}</p>
      </div>
      <div>
        <p>触达顾客转化收益（元）<tip :text="tipText.convSalesAmt" /></p>
        <p>{{ formatterNumAndFixed(data.convSalesAmt) }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import formatterNum from '@/mixins/validateNum';
import tip from '@/components/tip';
export default {
  name: 'batch-fail-msg',
  components: { tip },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      tipText: {
        planMbrNum: '计划使用短信触达的顾客人数。如果当前计划在不同时间用短信多次触达同一个顾客，会进行去重统计，仅计算为1个人。',
        touchMbrNum: '发送短信成功的顾客人数。如果当前计划在不同时间用短信多次触达同一个顾客，会进行去重统计，仅计算为1个人。',
        convMbrNum: '发送短信成功的顾客中，在收益有效期内消费的顾客人数。无论顾客消费了几次，会进行去重统计，仅计算为1个人。',
        convOrderCnt: '发送短信成功的顾客中，在收益有效期内消费的顾客订单数。',
        convSalesAmt: '发送短信成功的顾客中，在收益有效期内消费的顾客订单金额。'
      }
    };
  },
  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: 9px;
    &.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-212 {
  min-width: 212px;
}
.min-w-489 {
  min-width: 489px;
  margin-left: 5px;
  display: flex;
  align-items: center;
  padding: 0 42px 0 47px;
  box-sizing: border-box;
  div {
    flex: 1;
    text-align: left;
  }
}
</style>
