<template>
  <div class="center-top">
    <div class="center-top-box">
      <div class="center-top-box-title">
        <span>今日工单量</span>
        <span class="center-top-box-title-hb">环比 {{ state.orderDay.toDayQoQ }}%</span>
      </div>
      <div class="center-top-box-num">
        <CountFlop :val="state.orderDay.toDayCount"/>
        <span>件</span>
      </div>
    </div>
    <div class="center-top-box">
      <div class="center-top-box-title">
        <span>本月工单量</span>
        <span class="center-top-box-title-hb">环比 {{ state.orderDay.toMonthQoQ }}%</span>
      </div>
      <div class="center-top-box-num num-2">
        <CountFlop :val="state.orderDay.toMonthCount" suffix=""/>
        <span>件</span>
      </div>
    </div>
    <div class="center-top-box">
      <div class="center-top-box-title">
        <span>本年工单量</span>
        <span class="center-top-box-title-hb">环比 {{ state.orderDay.toYearQoQ }}%</span>
      </div>
      <div class="center-top-box-num num-3">
        <CountFlop :val="state.orderDay.toYearCount" suffix=""/>
        <span>件</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {defineAsyncComponent, reactive, onMounted, onUnmounted} from "vue";
import {orderDay} from '@/api/home';
import mittBus from "@/utils/mitt";

const CountFlop = defineAsyncComponent(() => import('@/components/Count-flop/index.vue'));
const state = reactive({
  orderDay: {
    toDayCount: 920132131,
    toDayQoQ: 0,
    toMonthCount: 0,
    toMonthQoQ: 0,
    toYearCount: 0,
    toYearQoQ: 0
  }
})
const getData = async () => {
  try {
    const {result} = await orderDay();
    state.orderDay = result;
  } catch (error) {
    console.log(error);
  }
}
onMounted(() => {
  // 接收消息
  mittBus.on('ordercountstatistics', (res: any) => {
    state.orderDay = res;
  });
  getData();
})
onUnmounted(() => {
  // 取消接收消息
  mittBus.off('ordercountstatistics');
})
</script>
<style scoped lang="scss">
.center-top {
  height: 100px;
  display: flex;
  justify-content: space-between;
  width: 100%;

  .count-up-wrap {
    display: inline-block;
    font-size: 20px;
    margin-right: 10px;
  }

  .center-top-box {
    width: 242px;

    &:nth-child(1) {
      color: #24FFFB;
    }

    &:nth-child(2) {
      color: #17A7FC;
    }

    &:nth-child(3) {
      color: #EFB53B;
    }

    &-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;

      &-hb {
        font-size: 12px;
      }

    }

    &-num {
      display: flex;
      align-items: end;
      margin-top: 8px;

      .count-flop {
        height: 62px;
        line-height: 62px;
        font-size: 60px;
        color: #fff;
        font-weight: bold;

        :deep(.count-flop-box) {
          line-height: inherit;
          width: 40px;
          border: 1px solid #1B918F;
          background: #196665;
        }
      }

      span {
        font-size: 12px;
        margin-left: 5px;
      }
    }

    .num-2 {
      :deep(.count-flop-box) {
        border: 1px solid #166690;
        background: rgba(16, 75, 100, .8);
      }
    }

    .num-3 {
      :deep(.count-flop-box) {
        border: 1px solid #FDD442;
        background: rgba(56, 65, 49, .4);
      }
    }
  }
}


</style>