<!--话务总数据-->
<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.taskExecuteNum / data.planMbrNum) * 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.taskExecuteNum) }}</p>
      </div>
      <div class="item-arrow purper">
        <p>触达率</p>
        <p>{{ formatterRate((data.touchMbrNum / data.taskExecuteNum) * 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-210">
      <div>
        <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-433">
      <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>
</template>

<script>
import formatterNum from '@/mixins/validateNum';
import tip from '@/components/tip';
export default {
  name: 'phone-traffic-sum',
  components: { tip },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      tipText: {
        planMbrNum: '计划使用话务任务触达的顾客人数。如果当前计划在不同时间，通过不同区域（门店），用话务任务多次触达同一个顾客，会进行去重统计，仅计算为1个人。',
        taskExecuteNum: '导购实际执行话务任务的顾客人数，包括“完成”任务和“放弃”任务的人数。如果当前计划在不同时间，通过不同区域（门店），用话务任务多次触达同一个顾客，会进行去重统计，仅计算为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;
    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;
}
.min-w-173 {
  min-width: 173px;
}
.min-w-210 {
  min-width: 210px;
  margin-right: 7px !important;
}
.min-w-433 {
  min-width: 433px;
  margin-right: 0 !important;
  display: flex;
  align-items: center;
  padding: 0 50px 0 36px;
  box-sizing: border-box;
  div {
    flex: 1;
    text-align: left;
  }
}
</style>
