<template>
  <div class="container">
    <div class="title">深海应急搜捞 统计分析</div>
    <div class="nums">
      <div class="item">
        <img src="@/assets/icons/任务.png" alt="任务" />
        <div class="right">
          <div>完成航次</div>
          <div><span>{{ rescueTotal }}</span>次</div>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/icons/区域.png" alt="区域" />
        <div class="right">
          <div>潜水次数</div>
          <div><span>{{ divingTotal }}</span>次</div>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/icons/航次.png" alt="航次" />
        <div class="right">
          <div>挽回经济损失</div>
          <div><span>{{ priceTotal }}</span>万</div>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/icons/潜水艇.png" alt="潜水艇" />
        <div class="right">
          <div>专项调查区域覆盖</div>
          <div><span>{{ areaTotal }}</span>平方公里</div>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/icons/潜艇.png" alt="潜艇" />
        <div class="right">
          <div>航行时间</div>
          <div><span>{{ hourTotal }}</span>小时</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reportMain } from '@/api/task.js'
import {ref, onMounted} from "vue";

const areaTotal = ref('')
const divingTotal = ref('')
const hourTotal = ref('')
const mileageTotal = ref('')
const priceTotal = ref('')
const rescueTotal = ref('')
const getData = () => {
  reportMain().then(res => {
    const obj = res.array[0]
    areaTotal.value = obj.area_total
    divingTotal.value = obj.diving_total
    hourTotal.value = obj.hour_total
    mileageTotal.value = obj.mileage_total
    priceTotal.value = obj.price_total
    rescueTotal.value = obj.rescue_total
  })
}

onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
  .container {
    padding: 0 8%;

    .title {
      margin-top: 100px;
      text-align: center;
      font-size: 40px;
      font-weight: bold;
    }

    .nums {
      margin-top: 200px;
      display: flex;
      justify-content: space-between;
      padding: 30px;
      border-radius: 10px;
      background-color: rgba(33, 54, 87, 0.7);

      .item {
        flex: 1;
        display: flex;
        align-items: center;

        img {
          width: 60px;
          height: 60px;
          margin-right: 20px;
        }

        span {
          font-size: 40px;
          font-weight: bold;
          margin-right: 5px;
        }
      }
    }
  }
</style>
