<script setup lang="ts">
import { NCard, NProgress, NFlex, NText, NIcon, type ProgressStatus } from 'naive-ui';
import { TimeOutline, HardwareChipOutline, ServerOutline, FolderOutline } from '@vicons/ionicons5';
import { computed, toRefs } from 'vue';

const props = defineProps<{
  cpuUsage?: string;
  memUsage?: string;
  diskUsage?: string;
  runningTime?: string;
}>();

const { cpuUsage, memUsage, diskUsage, runningTime } = toRefs(props);

const cardShow = computed(() => {
  return cpuUsage?.value || memUsage?.value || diskUsage?.value || runningTime?.value;
});

const cpuPercent = computed(() => {
  if (!cpuUsage?.value) return 0;
  return parseFloat(cpuUsage.value.replace('%', ''));
});

const memPercent = computed(() => {
  if (!memUsage?.value) return 0;
  return parseFloat(memUsage.value.replace('%', ''));
});

const diskPercent = computed(() => {
  if (!diskUsage?.value) return 0;
  return parseFloat(diskUsage.value.replace('%', ''));
});

const formattedRunningTime = computed(() => {
  return runningTime?.value ?? '未知';
});

const getProgressStatus = (percent: number): ProgressStatus => {
  if (percent >= 90) return 'error';
  if (percent >= 70) return 'warning';
  return 'success';
};
</script>

<template>
  <NCard v-if="cardShow" size="small" title="硬件占用率" hoverable>
    <NFlex vertical :size="16">
      <!-- CPU 使用率 -->
      <NFlex v-if="cpuUsage" :align="'center'" :size="12">
        <NIcon size="16" style="color: #18a058">
          <HardwareChipOutline />
        </NIcon>
        <NText style="width: 60px; font-size: 14px">CPU</NText>
        <NProgress :percentage="cpuPercent" :status="getProgressStatus(cpuPercent)" style="flex: 1">
          <div>{{ cpuPercent }}%</div>
        </NProgress>
      </NFlex>

      <!-- 内存使用率 -->
      <NFlex v-if="memUsage" :align="'center'" :size="12">
        <NIcon size="16" style="color: #2080f0">
          <ServerOutline />
        </NIcon>
        <NText style="width: 60px; font-size: 14px">内存</NText>
        <NProgress :percentage="memPercent" :status="getProgressStatus(memPercent)" style="flex: 1">
          <div>{{ memPercent }}%</div>
        </NProgress>
      </NFlex>

      <!-- 硬盘使用率 -->
      <NFlex v-if="diskUsage" :align="'center'" :size="12">
        <NIcon size="16" style="color: #f0a020">
          <FolderOutline />
        </NIcon>
        <NText style="width: 60px; font-size: 14px">硬盘</NText>
        <NProgress :percentage="diskPercent" :status="getProgressStatus(diskPercent)" style="flex: 1">
          <div>{{ diskPercent }}%</div>
        </NProgress>
      </NFlex>

      <!-- 运行时间 -->
      <NFlex v-if="runningTime" :align="'center'" :size="12">
        <NIcon size="16" style="color: #722ed1">
          <TimeOutline />
        </NIcon>
        <NText style="width: 100px; font-size: 14px">系统运行时间</NText>
        <NText style="flex: 1; font-size: 14px; color: #666">
          {{ formattedRunningTime }}
        </NText>
      </NFlex>
    </NFlex>
  </NCard>
</template>

<style scoped lang="scss"></style>
