<script setup lang="ts">
import ContainerBox from '@/components/ContainerBox'
import CarModule from './CarModule.vue'
import { mhIcon, jgIcon, zqIcon, zqlIcon } from '@/utils/icons'
import { getCarTypeTotal } from '@/api/home';
import { onMounted, ref } from 'vue';
import { title } from 'process';

const carModules = ref([
  {
    icon: mhIcon,
    number: 0,
    text: "灭火类消防车"
  },
  {
    icon: jgIcon,
    number:0,
    text: "举高类消防车"
  },
  {
    icon: zqIcon,
    number: 0,
    text: "专勤类消防车"
  },
  {
    icon: zqlIcon,
    number: 0,
    text: "战勤类消防车"
  },
])

const sortCarType = {
  ["灭火类消防车"]: {
    icon: mhIcon,
    text: '灭火类消防车'
  },
  ["举高类消防车"]: {
    icon: jgIcon,
    text: '举高类消防车'
  },
  ["专勤类消防"]: {
    icon: zqIcon,
    text: '专勤类消防车'
  },
  ["战勤保障消防车"]: {
    icon: zqlIcon,
    text: '战勤类消防车'
  }
}

function loadData() {
  getCarTypeTotal().then(res => {
    const { data } = res;
    if (data.code === 200) {
      carModules.value =  data.data.map(item => ({ icon: sortCarType[item.carType].icon, number: item.total, text: sortCarType[item.carType].text }))
    }
  })
}

loadData()

</script>

<template>
  <container-box title="消防车辆" style="width:23.2vw;height:24vh;" >
    <div class="car-info">
      <CarModule v-for="(module,index) in carModules" :key="`car-module-${index}`" 
        :icon="module.icon"
        :number="module.number"
        :text="module.text"
      />
    </div>
  </container-box>
</template>

<style scoped lang="less">
@import url("@/assets/css/common.less");
.car-info {
  .flex( space-between);
  flex-wrap: wrap;
  margin-top: 0.5vh;
  :deep(.car-module) {
    margin: 0.6vh 0px;
  }
}
</style>
