<!-- 首页统计数据 -->
<script name="HomeCount" setup lang="ts">
import dayjs from 'dayjs'
import { getDashboardCar, getDashboardInspection } from '@/api/page/page'
const showList = ref([
  {
    name: '巡检测总量',
    value: 0,
    icon: 'icon-car',
  },
  {
    name: '在线率',
    value: '0%',
    icon: 'icon-roate',
  },
  {
    name: '巡检任务总数',
    value: 0,
    icon: 'icon-xunjian',
  },
  {
    name: '巡检公里总数',
    value: '0km',
    icon: 'icon-xingcheng',
  },
  {
    name: '今日巡检数',
    value: 0,
    icon: 'icon-xunjian',
  },
  {
    name: '今日公里总数',
    value: '0km',
    icon: 'icon-xingcheng',
  },
])
// 获取巡检车信息
const fetchCarInfo = () => {
  getDashboardCar({}).then((res) => {
    showList.value[0].value = res.data.length
    showList.value[1].value = (res.data.filter((item: any) => item.status !== '离线').length) / (res.data.length)
  })
}
// 巡检任务和公里
const fetchInspection = () => {
  getDashboardInspection({ timeType: 'year' }).then((res) => {
    showList.value[2].value = res.data.taskCount
    showList.value[3].value = `${res.data.km}km`
  })
  getDashboardInspection({ beginDate: `${dayjs().format('YYYY-MM-DD')} 00:00:00`, endDate: dayjs().format('YYYY-MM-DD HH:mm:ss') }).then((res) => {
    showList.value[4].value = res.data.taskCount
    showList.value[5].value = `${res.data.km}km`
  })
}

onMounted(() => {
  fetchInspection()
  fetchCarInfo()
})
</script>

<template>
  <div class="container-count" style="height: calc(100vh - 50px); width: 24%; padding: 0;margin: 0;">
    <div style="display: flex;width: 100%;flex-wrap: wrap;justify-content: space-around;">
      <div v-for="item in showList" :key="item.name" class="item-count">
        <div class="left">
          <svg-icon :name="item.icon" style="width: 50px;height: 50px;" />
        </div>
        <div class="right">
          <div class="name">
            {{ item.name }}
          </div>
          <div class="value">
            {{ item.value }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scope>
.container-count {
  background-color: rgba($color: #606e86, $alpha: 80%);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
  border-radius: 10px;

  .item-count {
    display: flex;
    width: 45%;
    box-sizing: content-box;
    padding: 10px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;

    .left {
      width: 30%;
    }

    .right {
      width: 60%;
      text-align: center;
    }
  }
}
</style>