<script setup lang="js">
import { onMounted, onUnmounted, ref } from 'vue';

import {
  ElCard,
  ElCol,
  ElDescriptions,
  ElDescriptionsItem,
  ElProgress,
  ElRow,
} from 'element-plus';

import { cdcmCDCMAPI } from '#/cdcm/api/api.js';
import req from '#/cdcm/api/req_code';

const ret = ref();

const get_system_info = async () => {
  const b = await cdcmCDCMAPI(null, req.CDCMGetSystemInfo);
  ret.value = b;
};

onMounted(() => {
  get_system_info();
});

const timer = setInterval(() => {
  get_system_info();
}, 1000);

onUnmounted(() => {
  clearInterval(timer);
});

// 数字取整函数
const toInt = (value) => {
  return value ? Math.round(value) : 0;
};
</script>

<template>
  <div class="monitor-container">
    <!-- 上半部分 - 设备信息 -->
    <ElRow :gutter="20" class="top-row">
      <ElCol :span="24">
        <ElCard class="device-card">
          <template #header>
            <div class="card-header">
              <span class="device-title">设备信息</span>
            </div>
          </template>
          <ElDescriptions :column="1" border :size="Large">
            <ElDescriptionsItem label="型号" class="device-info">
              CDCM2024
            </ElDescriptionsItem>
            <ElDescriptionsItem label="开机时间" class="device-info">
              {{ ret?.running_information?.hostinfo.boottime || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="运行时长" class="device-info">
              {{ ret?.running_information?.hostinfo.uptime || '-' }}
            </ElDescriptionsItem>
          </ElDescriptions>
        </ElCard>
      </ElCol>
    </ElRow>

    <!-- 下半部分 - 三栏图表 -->
    <ElRow :gutter="20" class="bottom-row">
      <!-- 内存信息 -->
      <ElCol :span="8" class="chart-col">
        <ElCard class="chart-card">
          <template #header>
            <div class="card-header">
              <span>内存使用情况</span>
            </div>
          </template>
          <div v-if="ret?.running_information?.meminfo" class="chart-content">
            <ElProgress
              type="dashboard"
              :percentage="toInt(ret.running_information.meminfo.used_percent)"
              :color="
                ret.running_information.meminfo.used_percent > 80
                  ? '#f56c6c'
                  : '#67c23a'
              "
              :width="120"
            />
            <div class="memory-stats">
              <div>
                总内存:
                {{ toInt(ret.running_information.meminfo.total) }}
                MB
              </div>
              <div>
                已用:
                {{ toInt(ret.running_information.meminfo.used) }}
                MB
              </div>
              <div>
                可用:
                {{ toInt(ret.running_information.meminfo.available) }}
                MB
              </div>
              <div>
                使用率:
                {{ toInt(ret.running_information.meminfo.used_percent) }}%
              </div>
            </div>
          </div>
        </ElCard>
      </ElCol>

      <!-- 磁盘信息 -->
      <ElCol :span="8" class="chart-col">
        <ElCard class="chart-card">
          <template #header>
            <div class="card-header">
              <span>磁盘使用情况</span>
            </div>
          </template>
          <div v-if="ret?.running_information?.diskinfo" class="disk-chart">
            <div
              v-for="(disk, index) in ret.running_information.diskinfo"
              :key="index"
              class="disk-item"
            >
              <div class="disk-name">{{ disk.name }} ({{ disk.path }})</div>
              <ElProgress
                :percentage="toInt(disk.used_percent)"
                :color="disk.used_percent > 80 ? '#f56c6c' : '#67c23a'"
                :stroke-width="16"
              />
              <div class="disk-stats">
                <span>总空间: {{ toInt(disk.total) }} MB</span>
                <span>已用: {{ toInt(disk.used) }} MB</span>
                <span>剩余: {{ toInt(disk.free) }} MB</span>
              </div>
            </div>
          </div>
        </ElCard>
      </ElCol>

      <!-- 网络信息 -->
      <ElCol :span="8" class="chart-col">
        <ElCard class="chart-card">
          <template #header>
            <div class="card-header">
              <span>网络流量</span>
            </div>
          </template>
          <div v-if="ret?.running_information?.netinfo" class="network-chart">
            <div
              v-for="(net, index) in ret.running_information.netinfo"
              :key="index"
              class="network-item"
            >
              <div class="network-name">{{ net.name }}</div>
              <div class="network-stats">
                <div>上传: {{ toInt(net.bytesSent / 1024) }} KB</div>
                <div>下载: {{ toInt(net.bytesRecv / 1024) }} KB</div>
                <div>上传包: {{ toInt(net.packetsSent) }}</div>
                <div>下载包: {{ toInt(net.packetsRecv) }}</div>
              </div>
            </div>
          </div>
        </ElCard>
      </ElCol>
    </ElRow>
  </div>
</template>

<style scoped>
.monitor-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20px;
}

.top-row {
  height: 50%;
  margin-bottom: 20px;
}

.bottom-row {
  height: 50%;
}

.device-card {
  height: 100%;
}

.device-title {
  font-size: 32px;
  font-weight: bold;
}

.device-info {
  font-size: 24px;
}

.chart-col {
  height: 100%;
}

.chart-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chart-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.memory-stats {
  margin-top: 20px;
  font-size: 18px;
  text-align: center;
}

.memory-stats div {
  margin: 16px 0;
}

.disk-chart {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 0 10px;
  overflow-y: auto;
}

.disk-item {
  margin-bottom: 36px;
}

.disk-name {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: bold;
}

.disk-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 18px;
}

.network-chart {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 0 10px;
  overflow-y: auto;
}

.network-item {
  padding-bottom: 16px;
  margin-bottom: 32px;
  border-bottom: 1px solid #eee;
}

.network-name {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: bold;
}

.network-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  font-size: 18px;
}

/* 调整Element UI组件样式 */
:deep(.el-descriptions__header) {
  margin-bottom: 20px;
}

:deep(.el-descriptions__title) {
  font-size: 18px;
}

:deep(.el-card__header) {
  padding: 15px 20px;
  font-size: 32px;
  font-weight: bold;
}
</style>
