<template>
    <PageWrapper>
        <div class="serverInfo-box">
            <el-card header="CPU">
                <el-table empty-text="暂无数据" :data="formData.cpuInfo">
                    <el-table-column show-overflow-tooltip align="center" width="250" label="属性" prop="name"></el-table-column>
                    <el-table-column show-overflow-tooltip align="center" label="值" prop="value"></el-table-column>
                </el-table>
            </el-card>
            <el-card header="内存">
                <el-table empty-text="暂无数据" :data="formData.memoryInfo">
                    <el-table-column show-overflow-tooltip align="center" label="属性" prop="name"></el-table-column>
                    <el-table-column show-overflow-tooltip align="center" label="内存" prop="value1"></el-table-column>
                    <el-table-column show-overflow-tooltip align="center" label="JVM" prop="value2"></el-table-column>
                </el-table>
            </el-card>
        </div>
        <el-card header="服务器信息">
            <el-table :data="tabledata" :show-header="false">
                <el-table-column width="250"  align="center">服务器名称</el-table-column>
                <el-table-column>{{formData.systemInfo.computerName}}</el-table-column>
                <el-table-column width="150"  align="center">操作系统</el-table-column>
                <el-table-column align="center">{{formData.systemInfo.osName}}</el-table-column>
            </el-table>
            <el-table :data="tabledata" :show-header="false">
                <el-table-column width="250"  align="center">服务器IP</el-table-column>
                <el-table-column>{{formData.systemInfo.computerIp}}</el-table-column>
                <el-table-column width="150"  align="center">系统架构</el-table-column>
                <el-table-column align="center">{{formData.systemInfo.osArch}}</el-table-column>
            </el-table>
        </el-card>
        <el-card header="Java虚拟机信息" style="margin:20px 0;">
            <el-table :data="tabledata" :show-header="false">
                <el-table-column width="250"  align="center">Java名称</el-table-column>
                <el-table-column>{{formData.jvmInfo.name}}</el-table-column>
                <el-table-column width="150"  align="center">Java版本</el-table-column>
                <el-table-column align="center">{{formData.jvmInfo.version}}</el-table-column>
            </el-table>
            <el-table :data="tabledata" :show-header="false">
                <el-table-column width="250"  align="center">启动时间</el-table-column>
                <el-table-column>{{formData.jvmInfo.startTime}}</el-table-column>
                <el-table-column width="150"  align="center">运行时长</el-table-column>
                <el-table-column align="center">{{formData.jvmInfo.runTime}}</el-table-column>
            </el-table>
            <!-- <el-table :data="tabledata" :show-header="false">
                <el-table-column width="150"  align="center">安装路径</el-table-column>
                <el-table-column align="center">{{formData.jvmInfo.computerIp}}</el-table-column>
            </el-table> -->
            <el-table :data="tabledata" :show-header="false">
                <el-table-column width="250"  align="center">项目路径</el-table-column>
                <el-table-column>{{formData.jvmInfo.home}}</el-table-column>
            </el-table>
            <el-table :data="tabledata" :show-header="false">
                <el-table-column width="250"  align="center">运行参数</el-table-column>
                <el-table-column>{{formData.jvmInfo.inputArgs}}</el-table-column>
            </el-table>
        </el-card>
        <el-card header="磁盘状态">
            <el-table empty-text="暂无数据" :data="formData.diskInfo">
                <el-table-column show-overflow-tooltip align="center" label="盘符路径" prop="dirName"></el-table-column>
                <el-table-column show-overflow-tooltip align="center" label="文件系统" prop="sysTypeName"></el-table-column>
                <el-table-column show-overflow-tooltip align="center" label="盘符类型" prop="typeName"></el-table-column>
                <el-table-column show-overflow-tooltip align="center" label="总大小" prop="total"></el-table-column>
                <el-table-column show-overflow-tooltip align="center" label="可用大小" prop="free"></el-table-column>
                <el-table-column show-overflow-tooltip align="center" label="已用大小" prop="used"></el-table-column>
                <el-table-column show-overflow-tooltip align="center" label="已用百分比" prop="usage">
                    <template #default="{ row}">
                       <span>{{ row.usage+'%' }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </PageWrapper>
</template>

<script lang="ts" setup>
import {  onMounted,ref,reactive } from 'vue';
import { getServerInfo} from '@/api/monitor/server';

const tabledata = ref([{}])
const formData = reactive({
    cpuInfo:[],
    memoryInfo:[],
    systemInfo:{},
    jvmInfo:{},
    diskInfo:[]
})
const loadServerInfo = async () => {
    const result = await getServerInfo();
    formData.cpuInfo.push({
        name:'核心数',
        value:result.cpuInfo.cpuNum
    },{
        name:'用户使用率',
        value:result.cpuInfo.used+'%'
    },{
        name:'系统使用率',
        value:result.cpuInfo.sys+'%'
    },{
        name:'当前空闲率',
        value:result.cpuInfo.free+'%'
    })
    formData.memoryInfo.push({
        name:'总内存',
        value1:result.memoryInfo.total+'G',
        value2:result.jvmInfo.total+'M'
    },{
        name:'已用内存',
        value1:result.memoryInfo.used+'G',
        value2:result.jvmInfo.used+'M'
    },{
        name:'剩余内存',
        value1:result.memoryInfo.free+'G',
        value2:result.jvmInfo.free+'M'
    },{
        name:'使用率',
        value1:result.memoryInfo.usage+'%',
        value2:result.jvmInfo.usage+'%',
    })
    formData.systemInfo = result.systemInfo
    formData.jvmInfo = result.jvmInfo
    formData.diskInfo = result.diskInfo
};
onMounted(() => {
    loadServerInfo()
})
</script>
<style lang="scss" scoped>
.serverInfo-box {
    display: flex;
    margin-bottom:20px;
    >.el-card {
        flex: 1;
        &:nth-child(1) {
            margin-right:20px;
        }
    }
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>