<template>
  <div>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12">
        <home-system-panel
          title="磁盘信息"
          desc="Disk"
          :list="diskUsageList"
          :value="String(diskUsage.percent)"
          subtext="磁盘使用率"
        />
      </el-col>

      <el-col :xs="24" :sm="24" :md="12">
        <home-system-panel
          title="内存信息"
          desc="Memory"
          :list="virtualMemoryList"
          :value="String(virtualMemory.percent)"
          subtext="内存使用率"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import HomeSystemPanel from './HomeSystemPanel.vue'
import * as systemApi from '@/api/system'

const virtualMemory = ref<{
  total_format: string
  used_format: string
  available_format: string
  percent: number
}>({
  total_format: '0',
  used_format: '0',
  available_format: '0',
  percent: 0
})

interface VirtualMemoryType {
    value: string
    name: string
    color: string
}
const virtualMemoryList = ref<VirtualMemoryType[]>([])


interface DiskUsageType {
  total_format: string
  used_format: string
  free_format: string
  percent: number
}
const diskUsage = ref<DiskUsageType>({
  total_format: '0',
  used_format: '0',
  free_format: '0',
  percent: 0
})

interface DiskUsageListType {
  value: string
  name: string
  color: string
}
const diskUsageList = ref<DiskUsageListType[]>([])

const getData = async () => {
  try {
    const res = await systemApi.getSystemInfo()
    if (res.code === 0) {
      virtualMemory.value = res.data.virtual_memory
      virtualMemoryList.value = [
        {
          value: virtualMemory.value.total_format,
          name: '总内存',
          color: '#3AA1FF'
        },
        {
          value: virtualMemory.value.used_format,
          name: '已用内存',
          color: '#36CBCB'
        },
        {
          value: virtualMemory.value.available_format,
          name: '可用内存',
          color: '#4ECB73'
        }
      ]

      diskUsage.value = res.data.disk_usage
      diskUsageList.value = [
        {
          value: diskUsage.value.total_format,
          name: '总大小',
          color: '#FBD437'
        },
        {
          value: diskUsage.value.used_format,
          name: '已用大小',
          color: '#36CBCB'
        },
        {
          value: diskUsage.value.free_format,
          name: '剩余大小',
          color: '#F47F92'
        }
      ]
    }
  } catch (error) {
    console.error('获取系统信息失败:', error)
  }
}

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

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