<template>
  <div class="efficiency-box">
    <div class="efficiency-item" v-if="statisticsType == 0">
      <div class="efficiency-item-top">{{ efficiencyData.taskCount }}</div>
      <div class="efficiency-item-bottom">任务总量</div>
    </div>
    <div class="efficiency-item" v-if="statisticsType == 1">
      <div class="efficiency-item-top">{{ efficiencyData.userCount }}</div>
      <div class="efficiency-item-bottom">人员总计</div>
    </div>
    <div class="efficiency-item">
      <div class="efficiency-item-top">{{ efficiencyData.onTimeCount }}</div>
      <div class="efficiency-item-bottom">按时完工</div>
    </div>
    <div class="efficiency-item">
      <div class="efficiency-item-top">{{ efficiencyData.timeOutCount }}</div>
      <div class="efficiency-item-bottom">超时完工</div>
    </div>
    <div class="efficiency-item" v-if="statisticsType == 1">
      <div class="efficiency-item-top">{{ efficiencyData.grabCount }}</div>
      <div class="efficiency-item-bottom">未抢单</div>
    </div>
    <div class="efficiency-item" v-if="statisticsType == 1">
      <div class="efficiency-item-top">{{ efficiencyData.appointFailCount }}</div>
      <div class="efficiency-item-bottom">派发失败</div>
    </div>
    <div class="efficiency-item" v-if="statisticsType == 1">
      <div class="efficiency-item-top">{{ efficiencyData.cancleCount }}</div>
      <div class="efficiency-item-bottom">已取消</div>
    </div>
    <div class="efficiency-item">
      <div class="efficiency-item-top">{{ efficiencyData.unfinishCount }}</div>
      <div class="efficiency-item-bottom">未完工</div>
    </div>
    <div class="efficiency-item">
      <div class="efficiency-item-top">
        {{ efficiencyData.finishPercent + "%" }}
      </div>
      <div class="efficiency-item-bottom">完工率</div>
    </div>
    <div class="efficiency-item">
      <div class="efficiency-item-top">{{ efficiencyData.confirmTimeAve }}</div>
      <div class="efficiency-item-bottom">平均响应</div>
    </div>
    <div class="efficiency-item">
      <div class="efficiency-item-top">
        {{ efficiencyData.transferTimingAve }}
      </div>
      <div class="efficiency-item-bottom">平均转场</div>
    </div>
    <div class="efficiency-item">
      <div class="efficiency-item-top">{{ efficiencyData.wageHourTotal }}</div>
      <div class="efficiency-item-bottom">总工时</div>
    </div>
    <div class="efficiency-item">
      <div class="efficiency-item-top">{{ efficiencyData.wageHourAve }}</div>
      <div class="efficiency-item-bottom">平均工时</div>
    </div>
    <div class="efficiency-item">
      <div class="efficiency-item-top">{{ efficiencyData.pointTotal }}</div>
      <div class="efficiency-item-bottom">总积分</div>
    </div>
    <div class="efficiency-item">
      <div class="efficiency-item-top">{{ efficiencyData.pointAve }}</div>
      <div class="efficiency-item-bottom">平均积分</div>
    </div>
    <div class="efficiency-item">
      <div class="efficiency-item-top">{{ efficiencyData.salaryTotal }}</div>
      <div class="efficiency-item-bottom">总薪资</div>
    </div>
    <div class="efficiency-ite efficiency-item-last">
      <div class="efficiency-item-top">{{ efficiencyData.salaryAve }}</div>
      <div class="efficiency-item-bottom">平均薪资</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
const props = defineProps({
  efficiencyData: {
    type: Object,
    default: () => ({}),
  },
  statisticsType: {
    type: [Number, String],
    default: 0,
  },
});
</script>

<style lang="scss" scoped>
.efficiency-box {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 20px;
  padding-bottom: 10px;
  font-weight: bold;
  font-size: 15px;
}
.efficiency-item {
  flex: 1;
  border-right: 2px solid #ebebeb;
}
.efficiency-item-last {
  flex: 1;
}
.efficiency-item-top {
  display: flex;
  align-items: center;
  justify-content: center;
}
.efficiency-item-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
