<template>
	<el-main>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card>
					<template #header>
						<div class="card-header">
							<el-text>
								<el-icon>
									<component :is="'el-icon-cpu'"/>
								</el-icon>
								<span>CPU</span>
							</el-text>
						</div>
					</template>
					<el-text class="pi-title">
						<el-text type="primary">核心数</el-text>
						<el-text>{{ cpu.cpu_cores }}</el-text>
					</el-text>
					<el-divider></el-divider>
					<el-text class="pi-title">
						<el-text type="primary">用户使用率</el-text>
						<el-text>{{ cpu.user_usage }}</el-text>
					</el-text>
					<el-divider></el-divider>
					<el-text class="pi-title">
						<el-text type="primary">系统使用率</el-text>
						<el-text>{{ cpu.system_usage }}</el-text>
					</el-text>
					<el-divider></el-divider>
					<el-text class="pi-title">
						<el-text type="primary">当前空闲率</el-text>
						<el-text>{{ cpu.idle }}</el-text>
					</el-text>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<template #header>
						<div class="card-header">
							<el-text>
								<el-icon>
									<component :is="'el-icon-document'"/>
								</el-icon>
								<span>内存</span>
							</el-text>
						</div>
					</template>
					<el-text class="pi-title">
						<el-text type="primary">总内存</el-text>
						<el-text>{{ mem.total }}</el-text>
					</el-text>
					<el-divider></el-divider>
					<el-text class="pi-title">
						<el-text type="primary">已用内存</el-text>
						<el-text>{{ mem.used }}</el-text>
					</el-text>
					<el-divider></el-divider>
					<el-text class="pi-title">
						<el-text type="primary">剩余内存</el-text>
						<el-text>{{ mem.free }}</el-text>
					</el-text>
					<el-divider></el-divider>
					<el-text class="pi-title">
						<el-text type="primary">使用率</el-text>
						<el-text>{{ mem.usage }}</el-text>
					</el-text>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<template #header>
						<div class="card-header">
							<el-text>
								<el-icon>
									<component :is="'el-icon-monitor'"/>
								</el-icon>
								<span>服务器信息</span>
							</el-text>
						</div>
					</template>
					<el-text class="pi-title">
						<el-text type="primary">服务器名称</el-text>
						<el-text>{{ sys.server_name }}</el-text>
					</el-text>
					<el-divider></el-divider>
					<el-text class="pi-title">
						<el-text type="primary">操作系统</el-text>
						<el-text>{{ sys.os }}</el-text>
					</el-text>
					<el-divider></el-divider>
					<el-text class="pi-title">
						<el-text type="primary">服务器IP</el-text>
						<el-text>{{ sys.server_ip }}</el-text>
					</el-text>
					<el-divider></el-divider>
					<el-text class="pi-title">
						<el-text type="primary">系统架构</el-text>
						<el-text>{{ sys.architecture }}</el-text>
					</el-text>
					<el-divider></el-divider>
					<el-text class="pi-title">
						<el-text type="primary">PHP版本</el-text>
						<el-text>{{ sys.php_version }}</el-text>
					</el-text>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<template #header>
						<div class="card-header">
							<el-text>
								<el-icon>
									<component :is="'el-icon-mostly-cloudy'"/>
								</el-icon>
								<span>环境信息</span>
							</el-text>
						</div>
					</template>
					<el-text class="pi-title">
						<el-text type="primary">SWOOLE版本</el-text>
						<el-text>{{ app.swoole_version }}</el-text>
					</el-text>
					<el-divider></el-divider>
					<el-text class="pi-title">
						<el-text type="primary">HYPERF版本</el-text>
						<el-text>{{ app.hyperf_version }}</el-text>
					</el-text>
					<el-divider></el-divider>
					<el-text class="pi-title">
						<el-text type="primary">项目路径</el-text>
						<el-text>{{ app.project_path }}</el-text>
					</el-text>
					<el-divider></el-divider>
					<el-text class="pi-title">
						<el-text type="primary">启动时间</el-text>
						<el-text>{{ app.start_time }}</el-text>
					</el-text>
					<el-divider></el-divider>
					<el-text class="pi-title">
						<el-text type="primary">运行时长</el-text>
						<el-text>{{ app.uptime }}</el-text>
					</el-text>
				</el-card>
			</el-col>
			<el-col :span="24">
				<el-card>
					<template #header>
						<div class="card-header">
							<el-text>
								<el-icon>
									<component :is="'el-icon-box'"/>
								</el-icon>
								<span>缓存信息</span>
							</el-text>
						</div>
					</template>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-text class="pi-title">
								<el-text type="primary">Redis版本</el-text>
								<el-text>{{ redis.version }}</el-text>
							</el-text>
							<el-divider></el-divider>
						</el-col>
						<el-col :span="6">
							<el-text class="pi-title">
								<el-text type="primary">运行模式</el-text>
								<el-text>{{ redis.mode }}</el-text>
							</el-text>
							<el-divider></el-divider>
						</el-col>
						<el-col :span="6">
							<el-text class="pi-title">
								<el-text type="primary">端口</el-text>
								<el-text>{{ redis.port }}</el-text>
							</el-text>
							<el-divider></el-divider>
						</el-col>
						<el-col :span="6">
							<el-text class="pi-title">
								<el-text type="primary">客户端数</el-text>
								<el-text>{{ redis.clients }}</el-text>
							</el-text>
							<el-divider></el-divider>
						</el-col>
						<el-col :span="6">
							<el-text class="pi-title">
								<el-text type="primary">运行时间(天)</el-text>
								<el-text>{{ redis.uptime_days }}</el-text>
							</el-text>
							<el-divider></el-divider>
						</el-col>
						<el-col :span="6">
							<el-text class="pi-title">
								<el-text type="primary">使用内存</el-text>
								<el-text>{{ redis.used_memory }}</el-text>
							</el-text>
							<el-divider></el-divider>
						</el-col>
						<el-col :span="6">
							<el-text class="pi-title">
								<el-text type="primary">使用CPU</el-text>
								<el-text>{{ redis.used_cpu }}</el-text>
							</el-text>
							<el-divider></el-divider>
						</el-col>
						<el-col :span="6">
							<el-text class="pi-title">
								<el-text type="primary">内存配置</el-text>
								<el-text>{{ redis.maxmemory }}</el-text>
							</el-text>
							<el-divider></el-divider>
						</el-col>
						<el-col :span="6">
							<el-text class="pi-title">
								<el-text type="primary">AOF是否开启</el-text>
								<el-text>{{ redis.aof_enabled }}</el-text>
							</el-text>
						</el-col>
						<el-col :span="6">
							<el-text class="pi-title">
								<el-text type="primary">RDB是否成功</el-text>
								<el-text>{{ redis.rdb_last_bgsave_status }}</el-text>
							</el-text>
						</el-col>
						<el-col :span="6">
							<el-text class="pi-title">
								<el-text type="primary">Key数量</el-text>
								<el-text>{{ redis.keys }}</el-text>
							</el-text>
						</el-col>
						<el-col :span="6">
							<el-text class="pi-title">
								<el-text type="primary">网络入口/出口</el-text>
								<el-text>{{ redis.net_input_bytes }}/{{redis.net_output_bytes}}</el-text>
							</el-text>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
			<el-col :span="24">
				<el-card>
					<template #header>
						<div class="card-header">
							<el-text>
								<el-icon>
									<component :is="'el-icon-message-box'"/>
								</el-icon>
								<span>磁盘信息</span>
							</el-text>
						</div>
					</template>
					<pi-table :data="disks" hide-pagination hide-do hide-refresh>
						<el-table-column label="盘符路径" prop="path"></el-table-column>
						<el-table-column label="文件系统" prop="filesystem"></el-table-column>
						<el-table-column label="盘符类型" prop="type"></el-table-column>
						<el-table-column label="总大小" prop="total"></el-table-column>
						<el-table-column label="可用大小" prop="used"></el-table-column>
						<el-table-column label="已用大小" prop="available"></el-table-column>
						<el-table-column label="已用百分比" prop="used_percent"></el-table-column>
					</pi-table>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>

<script setup>
import api from "@/api"
import {ref, onMounted} from "vue";
import PiTable from "@/components/piTable/index.vue";

defineOptions({
	name: "monitorServer"
})

let cpu = ref({
	'cpu_cores': 0,
	'user_usage': '0%',
	'system_usage': '0%',
	'idle': '0%'
})

let mem = ref({
	'total': 0,
	'used': '0',
	'free': '0',
	'usage': '0%'
})

let sys = ref({
	'server_name': '',
	'server_ip': '',
	'os': '',
	'architecture': '',
	'php_version': ''
})

let app = ref({
	'hyperf_version': '',
	'swoole_version': '',
	'project_path': '',
	'start_time': '',
	'uptime': ''
})

let disks = ref([])
let redis = ref([])

onMounted(async () => {
	const res = await api.system.monitor.server()
	cpu.value = res.data.cpu
	mem.value = res.data.mem
	sys.value = res.data.sys
	app.value = res.data.app
	redis.value = res.data.redis
	disks.value = res.data.disks
})

</script>

<style lang="scss" scoped>
.pi-title {
	display: flex;
	justify-content: space-between;
}
</style>
