<template>
  <Skeleton v-if="spinning" active />
  <div v-else>
    <a-row>
      <template v-if="diskInfo && diskInfo.length > 0">
        <a-col :span="6" v-for="(item, index) in diskInfo" :key="'diskInfo' + index">
          <gauge :data="item"></gauge>
        </a-col>
      </template>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { Skeleton } from 'ant-design-vue';
  import { queryDiskInfo } from './disk.api';
  import gauge from './gauge.vue';

  const diskInfo = ref([]);
  const spinning = ref(true);

  function loadRedisInfo() {
    queryDiskInfo()
      .then((res) => {
        for (let i = 0; i < res.length; i++) {
          // 当前算法算的是磁盘的已使用空间
          res[i].restPPT = 100 - parseInt(String((res[i].rest / res[i].max) * 100));
        }
        diskInfo.value = res;
      })
      .finally(() => (spinning.value = false));
  }

  onMounted(() => {
    loadRedisInfo();
  });
</script>