<template>
  <div class="HeadComp">

    <div v-for="(it, i) in headList" :key="'head' + it.name" class="box" :class="{border: i % 2 != 0}">
      <template v-if="i % 2 == 0">
        <img :src="it.img" class="img">
        <div class="item">
          <div class="name">{{ it.name }}</div>
          <div class="num">{{ it.value }} <span v-if="i !== headList.length -1" class="span">个</span></div>
        </div>
      </template>
    </div>

  </div>
</template>

<script setup name="HeadComp">
import { reactive, ref } from 'vue'
import total from '../assets/total.png'
import task from '../assets/task.png'
import platform from '../assets/platform.png'
import clients from '../assets/clients.png'
import fly from '../assets/fly.png'
import { statisticsTask } from '@/api/dashboard/index'

const headList = reactive([
  {
    name: '总条数',
    value: null,
    img: total
  },
  {},
  {
    name: '待执行任务',
    value: null,
    img: task
  },
  {},
  {
    name: '接入平台数量',
    value: null,
    img: platform
  },
  {},
  {
    name: '服务客户数量',
    value: null,
    img: clients
  },
  {},
  {
    name: '累计飞行时长',
    value: null,
    img: fly
  }
])

statisticsTask().then(({ data }) => {
  headList[0].value = data.allTaskNumber
  headList[2].value = data.performTask
  headList[4].value = data.platformNumber
  headList[6].value = data.customerNumber
  headList[8].value = data.flightTimeCount
})

</script>
<style scoped lang='scss'>
.HeadComp {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  font-size: 14px;

  height: 60px;

  .box {
    display: flex;
    align-items: center;

    .img {
      width: 24px;
      height: 24px;
    }

    .item {
      margin-left: 20px;

      .name {
        margin-bottom: 2px;
        color: rgba(0, 0, 0, 0.75);
      }

      .num {
        text-align: end;
        margin-top: 2px;
        font-weight: bold;
        margin-right: 10px;
        color: rgba(0, 0, 0, 1);

        .span {
          font-weight: 400;
        }
      }
    }
  }

  .border {
    border: 1px solid rgba(207, 207, 207, 0.65);
  }
}
</style>
