<template>
	<el-main>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-card shadow="hover" header="系统状态" body-style="height: 250px">
							<div class="progress">
								<el-progress type="dashboard" :percentage="cpu.load" :width="160">
									<template #default="{ percentage }">
										<div class="percentage-value">{{ percentage }}%</div>
										<div class="percentage-label">当前CPU</div>
									</template>
								</el-progress>
								<el-progress type="dashboard" :percentage="mem.usage" :width="160">
									<template #default="{ percentage }">
										<div class="percentage-value">{{ percentage }}%</div>
										<div class="percentage-label">当前内存</div>
									</template>
								</el-progress>
							</div>
						</el-card>
					</el-col>
					<el-col :span="12">
						<el-card shadow="hover" header="网络" body-style="height: 250px">
							<el-row :gutter="24">
								<el-col :span="12">
									<sc-statistic title="上传速度" :value="upSpeed" groupSeparator></sc-statistic>
								</el-col>
								<el-col :span="12">
									<sc-statistic title="下载速度" :value="downSpeed" groupSeparator></sc-statistic>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="12">
									<sc-statistic title="最大上传速度" :value="maxUploadSpeed" groupSeparator></sc-statistic>
								</el-col>
								<el-col :span="12">
									<sc-statistic title="最大下载速度" :value="maxDownloadSpeed" groupSeparator></sc-statistic>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="12">
									<sc-statistic title="总上传" :value="upload" groupSeparator></sc-statistic>
								</el-col>
								<el-col :span="12">
									<sc-statistic title="总下载" :value="download" groupSeparator></sc-statistic>
								</el-col>
							</el-row>
						</el-card>
					</el-col>
					<el-col :span="24">
						<el-card shadow="hover" header="设备列表">
							<el-table ref="table" border style="width: 100%" :data="tableData" :key="mac" height="auto" paginationLayout="" hideDo>
								<el-table-column prop="devName" label="设备名称"></el-table-column>
								<el-table-column prop="maxDownloadSpeed" label="下载速度">
									<template #default="scope">
										{{ convertSpeedUnit(scope.row.maxDownloadSpeed) }}
									</template>
								</el-table-column>
								<el-table-column prop="maxUploadSpeed" label="上传速度">
									<template #default="scope">
										{{ convertSpeedUnit(scope.row.maxUploadSpeed) }}
									</template>
								</el-table-column>
								<el-table-column prop="upload" label="总上传量">
									<template #default="scope">
										{{ convertSpeed(scope.row.upload) }}
									</template>
								</el-table-column>
								<el-table-column prop="download" label="总下载量">
									<template #default="scope">
										{{ convertSpeed(scope.row.download) }}
									</template>
								</el-table-column>
							</el-table>
						</el-card>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="12">
				<el-card shadow="hover" header="系统信息" v-loading="loading">
					<el-descriptions border :column="1">
						<el-descriptions-item label="SN">{{ hardware.sn }}</el-descriptions-item>
						<el-descriptions-item label="MAC">{{ hardware.mac }}</el-descriptions-item>
						<el-descriptions-item label="IP地址">{{ wanStatus.ip.address }}</el-descriptions-item>
						<el-descriptions-item label="网关地址">{{ wanStatus.gw }}</el-descriptions-item>
						<el-descriptions-item label="累计终端">{{ count.all }} 个设备</el-descriptions-item>
						<el-descriptions-item label="当前连接">{{ count.online }} 个设备</el-descriptions-item>
					</el-descriptions>
				</el-card>
				<el-card shadow="hover" header="实时网络" v-loading="loading">
					<scEcharts ref="c1" height="300px" :option="option"></scEcharts>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="20">

		</el-row>
	</el-main>

</template>

<script>
	import scEcharts from '@/components/scEcharts';
	import scStatistic from '@/components/scStatistic';
	export default {
		name: "home",
		components: {
			scEcharts,
			scStatistic
		},
		data(){
			return {
				pageLoading: true,
				dashboard: '0',
				upSpeed: "",
				downSpeed: "",
				maxUploadSpeed: "",
				maxDownloadSpeed: "",
				download: 0.00,
				upload: 0,
				wanStatus: {
					dns: [],
					gw: '',
					ip: {
						mask: '',
						address: '',
					}
				},
				count: {
					all: 0,
					online: 0
				},
				hardware: {
					sn: '',
					mac: ''
				},
				mem: {
					usage: 0
				},
				cpu:{
					load: 0
				},
				tableData: null,
				loading: true,
				option: {
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						boundaryGap: false,
						type: 'category',
						data: []
					},
					yAxis: [{
						type: 'value',
						name: '网络速度(KB/s)',
						"splitLine": {
							"show": false
						}
					}],
					series: [
						{
							name: '下载速度',
							type: 'line',
							symbol: 'none',
							lineStyle: {
								width: 1,
								color: '#409EFF'
							},
							areaStyle: {
								opacity: 0.1,
								color: '#79bbff'
							},
							data: []
						},
						{
							name: '上传速度',
							type: 'line',
							symbol: 'none',
							lineStyle: {
								width: 1,
								color: '#8cc157'
							},
							areaStyle: {
								opacity: 0.1,
								color: '#437daf'
							},
							data: []
						}
					]
				}
			}
		},
		mounted(){
			this.getStatus();
			this.loading = false
			// 每五秒调用一次接口
			this.timer = setInterval(() => {
				this.getStatus();
			}, 5000);
		},
		unmounted() {
			// 在组件销毁时清除定时器
			clearInterval(this.timer);
		},
		methods: {
			// 加载系统状态
			async getStatus(){
  				// 在这里编写你想要执行的操作
				let res = await this.$API.system.home.status.get();

				this.hardware.sn = res.data.hardware.sn
				this.hardware.mac = res.data.hardware.mac

				this.cpu.load = Math.round(res.data.cpu.load * 100)
				//内存
				this.mem.usage = Math.round(res.data.mem.usage * 100)
				this.count.all = res.data.count.all
				this.count.online = res.data.count.online
				// 下载 b
				//this.download = Math.round(res.data.wan.download / 1024 * 8)
				this.download = this.convertSpeed(res.data.wan.download)
				// 上传 b
				// this.upload = Math.round(res.data.wan.upload / 1024 * 8)
				this.upload = this.convertSpeed(res.data.wan.upload)

				this.maxDownloadSpeed = this.convertSpeedUnit(res.data.wan.maxDownloadSpeed)

				this.maxUploadSpeed = this.convertSpeedUnit(res.data.wan.maxUploadSpeed)

				this.downSpeed = this.convertSpeedUnit(res.data.wan.downSpeed)

				this.upSpeed = this.convertSpeedUnit(res.data.wan.upSpeed)

				this.tableData = res.data.dev
				//this.$refs.table.refresh()
				let x = new Date().toLocaleTimeString().replace(/^\D*/, '');
				this.option.xAxis.data.push(x)
				this.option.series[0].data.push(res.data.wan.downSpeed/1024)
				this.option.series[1].data.push(res.data.wan.upSpeed/1024)

				let status = await this.$API.system.network.wanStatus.get();
				this.wanStatus.dns = status.data.dns
				this.wanStatus.gw = status.data.gw
				this.wanStatus.ip = status.data.ip
			},
			speedToKb(speed){
				return Math.round(speed / 1024)
			},
			convertSpeed(dataUsage) {
				if (dataUsage >= 1099511627776) { // 大于等于1 TB
					return (dataUsage / 1099511627776).toFixed(2) + ' TB';
				} else if (dataUsage >= 1073741824) { // 大于等于1 GB
					return (dataUsage / 1073741824).toFixed(2) + ' GB';
				} else if (dataUsage >= 1048576) { // 大于等于1 MB
					return (dataUsage / 1048576).toFixed(2) + ' MB';
				} else if (dataUsage >= 1024) { // 大于等于1 KB
					return (dataUsage / 1024).toFixed(2) + ' KB';
				} else {
					return dataUsage + ' bytes';
				}
			},
			convertSpeedUnit(dataUsage) {
				if (dataUsage >= 1099511627776) { // 大于等于1 TB
					return (dataUsage / 1099511627776).toFixed(2) + ' tb/s';
				} else if (dataUsage >= 1073741824) { // 大于等于1 GB
					return (dataUsage / 1073741824).toFixed(2) + ' gb/s';
				} else if (dataUsage >= 1048576) { // 大于等于1 MB
					return (dataUsage / 1048576).toFixed(2) + ' mb/s';
				} else if (dataUsage >= 1024) { // 大于等于1 KB
					return (dataUsage / 1024).toFixed(2) + ' kb/s';
				} else {
					return dataUsage + ' bytes';
				}
			}
		}
	}
</script>

<style>
.progress {text-align: center;margin-right: 20px;}
.progress .percentage-value {font-size: 28px;}
.progress .percentage-label {font-size: 12px;margin-top: 10px;}
/*.el-progress-circle {margin-right: 20px;}*/
</style>
