<template>
  <div class="FootComp">
    <n-grid x-gap="12" :cols="3">
      <n-gi>
        <div class="test">
          <div class="comp">
            <div class="title">飞手飞行时长统计</div>
            <div id="chart02" />
          </div>
          <div class="comp" style="margin-top: 20px;">
            <div class="title">任务状态统计</div>
            <div id="chart03" />
          </div>
        </div>
      </n-gi>
      <n-gi>
        <div class="test">
          <div class="comp">
            <div class="title">飞手飞行任务数量统计</div>
            <div id="chart04" />
          </div>
          <div class="comp" style="margin-top: 20px;">
            <div class="title">平台任务数量统计</div>
            <div id="chart05" />
          </div>
        </div>
      </n-gi>
      <n-gi>
        <tab-comp class="comp" />
      </n-gi>
    </n-grid>
  </div>
</template>

<script setup name="FootComp">
import TabComp from './TabComp.vue'
import { onMounted } from 'vue'
import myChart from '@/utils/echarts'
import { pilotTaskTimeCount, taskStatusStatistics, pilotTaskStatistics, platformTasks } from '@/api/dashboard/index'

onMounted(() => {
  // 飞手飞行时长
  pilotTaskTimeCount().then(({ data }) => {
    const xAxis = data.map(it => it.flightHandName)
    const YAxis = data.map(it => it.flightTime)
    myChart.line2('chart02', xAxis, YAxis)
  })
  // 任务状态统计
  taskStatusStatistics().then(({ data }) => {
    const xAxis = data.map(it => it.statusType)
    const YAxis = data.map(it => it.pilotTaskSum)
    myChart.line2('chart03', xAxis, YAxis)
  })
  // 飞手飞行任务数量
  pilotTaskStatistics().then(({ data }) => {
    const xAxis = data.map(it => it.flightHandName)
    const YAxis = data.map(it => it.pilotTaskSum)
    myChart.line2('chart04', xAxis, YAxis)
  })
  // 平台任务数量
  platformTasks().then(({ data }) => {
    const xAxis = data.map(it => it.platformName)
    const YAxis = data.map(it => it.pilotTaskSum)
    myChart.line2('chart05', xAxis, YAxis)
  })
})

</script>
<style scoped lang='scss'>
.FootComp {
  margin-top: 20px;

  .comp {
    padding: 10px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
  }

  .title {
    font-size: 16px;
    font-weight: bold;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #chart02,
  #chart03,
  #chart04,
  #chart05 {
    width: 100%;
    height: 195px;
  }
}
</style>
