<script setup>
import {onMounted, ref, watch} from "vue";
import Util from "../../Util/index.js";
import minimizeStr from '../minimize-str/index.vue'
let props = defineProps(['status', 'site'])

let headerStyle = ref({})
let cpuPercentage = ref(0)
let memoryPercentage = ref(0)
let usedMemory = ref(0)
let totalMemory = ref(0)
let loadPercentage = ref(0)
let diskPercentage = ref(0)
let usedSpace = ref(0)
let totalSpace = ref(0)
let bootTime = ref()
let upTime = ref()
let systemLoad = ref([0, 0, 0])
let site = props.site
let lastOnline = Util.formatDate(site.lastOnline)
let ioRead = ref("0B/s")
let ioWrite = ref("0B/s")
let networkReceive = ref("0B/s")
let networkSend = ref("0B/s")
watch(props, () => {
  let status = props.status
  if(status !== null && status !== undefined) {
    cpuPercentage.value = status.usedCpuPercentage
    memoryPercentage.value = status.usedMemoryPercentage
    usedMemory.value = Util.formatSize(status.usedMemory)
    totalMemory.value = Util.formatSize(status.totalMemory)
    diskPercentage.value = status.usedSpacePercentage
    usedSpace.value = Util.formatSize(status.usedSpace)
    totalSpace.value = Util.formatSize(status.totalSpace)
    bootTime.value = new Date(status.systemBootTime * 1000).toLocaleString('zh-CN')
    upTime.value = Util.formatDuration(status.systemUpTime)
    systemLoad.value = status.systemLoad
    ioRead.value = Util.formatSize(status.ioRead) + "/s"
    ioWrite.value = Util.formatSize(status.ioWrite) + "/s"
    networkReceive.value = Util.formatSize(status.networkReceive) + "/s"
    networkSend.value = Util.formatSize(status.networkSend) + "/s"

    if (systemLoad.value[0] !== -1)
      for (let i = 0; i < 3; i++)
        systemLoad.value[i] = Number(systemLoad.value[i]).toFixed(2)
  }
})

onMounted(() => {
  if(site.online)
    headerStyle.value['--color'] = 'green'
  else
    headerStyle.value['--color'] = 'gray'
})
</script>

<template>
  <el-card :header-color="site.online?'green':'gray'" class="home-card">
    <div class="header">
      <span :style="headerStyle">{{`${site.id}:${site.hostname}`}}</span>
    </div>
      <el-row>
        <el-col :span="12" style="text-align: center">
          <el-progress type="dashboard" :percentage="cpuPercentage" :color="Util.colors" style="text-align: center">
            <template #default>
              {{cpuPercentage}}% <br>
              CPU
            </template>
          </el-progress>
          <span style="text-align: center; display: block">{{(cpuPercentage * site.cpuCore * 0.01).toFixed(2)}} / {{site.cpuCore}}</span>
        </el-col>
        <el-col :span="12" style="text-align: center">
          <el-progress type="dashboard" :percentage="memoryPercentage" :color="Util.colors">
            <template #default>
              {{memoryPercentage}}% <br>
              内存
            </template>
          </el-progress>
          <span style="text-align: center; display: block">{{usedMemory}}/{{totalMemory}}</span>
        </el-col>
      </el-row>

      <el-row style="margin-top: 10px">
        <el-col :span="12" style="text-align: center">
          <el-progress type="dashboard" :percentage="loadPercentage" :color="Util.colors">
            <template #default>
              {{loadPercentage}}% <br>
              负载
            </template>
          </el-progress>
          <span style="text-align: center; display: block">{{systemLoad[0]}}/{{systemLoad[1]}}/{{systemLoad[2]}}</span>
        </el-col>
        <el-col :span="12" style="text-align: center;">
          <el-progress type="dashboard" :percentage="diskPercentage" :color="Util.colors">
            <template #default>
              {{diskPercentage}}% <br>
              硬盘
            </template>
          </el-progress>
          <span style="text-align: center; display: block">{{usedSpace}}/{{totalSpace}}</span>
        </el-col>
        <el-col>
          IP地址:{{site.ip}}<br>
          系统:<minimize-str :str="site.system" :length="25"/>
          <br>
          主机名:{{site.hostname}}<br>
          处理器架构:{{site.cpuArch}}<br>
          处理器名称:<minimize-str :str="site.cpuName" :length="25"/><br>
          处理器核心数:{{site.cpuCore}}<br>
          处理器线程数:{{site.cpuThread}}<br>
          <div v-if="site.online">
            运行时间:{{upTime}}<br>
            开机时间:{{bootTime}}<br>
            磁盘读写:{{ioRead + " " + ioWrite}}<br>
            网络收发:{{networkReceive + " " + networkSend}}<br>
          </div>
          <div v-else>
            最后上线时间:{{lastOnline}}<br>
          </div>
        </el-col>
      </el-row>
  </el-card>
</template>

<style scoped>
.header > span {
  position: relative;
  font-size: 16px;
  font-weight: 500;
  margin-left: 18px;
}

.header > span::before {
  position: absolute;
  top: 4px;
  left: -13px;
  width: 4px;
  height: 14px;
  content: '';
  background: var(--color);
  border-radius: 10px;
}
</style>