<template>
  <div class="app-container">
    <div class="flex-col content-container">
      <el-card style="min-height: 52px">
        <div class="flex flex-warp" style="font-size: 14px;">
          <div class="ml10 flex align-center">系统：<span style="color: #409EFF">{{ data.sys.os }}</span></div>
          <div class="ml10 flex align-center">IP：<span style="color: #409EFF">{{ data.sys.ip }}</span></div>
          <div class="ml10 flex align-center">项目路径：<span style="color: #409EFF">{{ data.sys.dir }}</span></div>
          <div class="ml10 flex align-center">运行时间：<span style="color: #409EFF">{{ data.sys.time }}</span></div>
          <div class="flex1"></div>
          <el-button class="mr10 " type="primary" circle :disabled="loading" :loading="loading" icon="el-icon-refresh-right" @click="getData"></el-button>
          <el-select v-model="interval" class="w80 flex align-center" placeholder="间隔" size="mini">
            <el-option :value="0" :key="0" label="暂停"></el-option>
            <el-option :value="2000" :key="2000" label="2s"></el-option>
            <el-option :value="5000" :key="5000" label="5s"></el-option>
            <el-option :value="10000" :key="10000" label="10s"></el-option>
          </el-select>
        </div>
      </el-card>

      <el-card class="mt10" style="min-height: 244px">
        <div slot="header" class="text-bold">状态</div>
        <div class="text-center flex flex-warp" style="justify-content: space-around;">
          <div>
            <div class="pt5">CPU使用率</div>
            <el-tooltip placement="top-end">
              <div class="text-left" slot="content">
                <div>{{ data.cpu.name }}</div>
                <div class="pt5">{{ data.cpu.pack }}个物理CPU</div>
                <div class="pt5">{{ data.cpu.core }}个物理核心</div>
                <div class="pt5">{{ data.cpu.logic }}个逻辑CPU</div>
              </div>
              <div class="pt5">
                <el-progress type="dashboard" :percentage="parseFloat(data.cpu.usageRate)"/>
              </div>
            </el-tooltip>
            <div class="pt5">{{ data.cpu.coreNumber }} 核心</div>
          </div>

          <div>
            <div class="pt5">内存使用率</div>
            <el-tooltip placement="top-end">
              <div class="text-left" slot="content">
                <div>总量：{{ data.memory.total }}</div>
                <div class="pt5">已使用：{{ data.memory.used }}</div>
                <div class="pt5">空闲：{{ data.memory.available }}</div>
              </div>
              <div class="pt5">
                <el-progress type="dashboard" :percentage="parseFloat(data.memory.usageRate)"/>
              </div>
            </el-tooltip>
            <div class="pt5">{{ data.memory.used }} / {{ data.memory.total }}</div>
          </div>

          <div>
            <div class="pt5">交换区使用率</div>
            <el-tooltip placement="top-end">
              <div class="text-left" slot="content">
                <div>总量：{{ data.swap.total }}</div>
                <div class="pt5">已使用：{{ data.swap.used }}</div>
                <div class="pt5">空闲：{{ data.swap.available }}</div>
              </div>
              <div class="pt5">
                <el-progress type="dashboard" :percentage="parseFloat(data.swap.usageRate)"/>
              </div>
            </el-tooltip>
            <div class="pt5">{{ data.swap.used }} / {{ data.swap.total }}</div>
          </div>

          <div>
            <div class="pt5">磁盘使用率</div>
            <el-tooltip placement="top-end">
              <div class="text-left" slot="content">
                <div>总量：{{ data.disk.total }}</div>
                <div class="pt5">空闲：{{ data.disk.available }}</div>
              </div>
              <div class="pt5">
                <el-progress type="dashboard" :percentage="parseFloat(data.disk.usageRate)"/>
              </div>
            </el-tooltip>
            <div class="pt5">{{ data.disk.used }} / {{ data.disk.total }}</div>
          </div>
        </div>
      </el-card>

      <div class="flex mt10 flex1 flex-warp">
        <el-card class="flex1 mb10">
          <div slot="header" class="text-bold">CPU监控</div>
          <div ref="cpu" style="height: 420px"></div>
        </el-card>

        <el-card class="flex1 mb10 ml10">
          <div slot="header" class="text-bold">内存监控</div>
          <div ref="memory" style="height: 420px"></div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {dateFormat} from "@/utils/dateUtil";

export default {
  name: 'SystemStatus',
  components: {},
  data() {
    return {
      loading: false, // 加载按钮状态
      statusTimer: undefined, // 定时器
      data: {  // 数据
        "cpu": {
          "name": "",
          "pack": 0,
          "core": 0,
          "coreNumber": 0,
          "logic": 0,
          "usageRate": "0",
          "idle": "0"
        },
        "memory": {
          "total": "0 GiB",
          "available": "0 GiB",
          "used": "0 GiB",
          "usageRate": "0"
        },
        "sys": {
          "os": "",
          "time": "0天0小时0分钟",
          "ip": "0.0.0.0",
          "dir": ""
        },
        "swap": {
          "total": "0 GiB",
          "available": "0 GiB",
          "used": "0 GiB",
          "usageRate": "0"
        },
        "disk": {
          "total": "0GB   ",
          "available": "0GB   ",
          "used": "0GB   ",
          "usageRate": "0"
        },
        "time": 0
      },
      interval: 5000, // 更新间隔

      option: {
        legend: {
          data: ['使用率']
        },
        tooltip: {trigger: 'axis', valueFormatter: value => value + "%"},

        xAxis: {
          type: 'time',
          boundaryGap: false,
          splitLine: {
            show: true
          },
          axisLabel: {
            formatter: value => dateFormat("HH:mm", new Date(value)),
            hideOverlap: true,
            width: 80
          }
        },
        yAxis: {
          type: 'value',
          max: 100,
          splitLine: {
            show: true
          },
          axisLabel: {
            formatter: value => value + "%"
          }
        },
        series: [{
          name: '使用率',
          areaStyle: {
            opacity: 0.5,
          },
          type: 'line',
          showSymbol: false,
          data: []
        }],
        color: ['#20a0ff'], // 折线颜色
      },

      cpuData: [],
      memoryData: [],

      cpuChart: undefined,
      memoryChart: undefined,
    }
  },

  // 页面创建
  created() {
    this.getData();
  },

  // keep-alive 显示界面时调用
  activated() {
    this.restartStatusTimer()
  },

  // keep-alive 页面隐藏
  deactivated() {
    this.stopStatusTimer();
  },

  watch: {
    'interval'(value) {
      this.restartStatusTimer();
    }
  },

  mounted() {
    this.cpuChart = echarts.init(this.$refs["cpu"]);
    this.cpuChart.setOption(this.option);
    this.memoryChart = echarts.init(this.$refs["memory"]);
    this.memoryChart.setOption(this.option);
  },

  methods: {
    // 数据加载
    getData() {
      this.loading = true;
      this.$axios.get("/v1/system/status", undefined, false).then(data => {
        this.data = data
        this.loading = false;
        this.cpuData.push([data.time, data.cpu.usageRate])
        this.memoryData.push([data.time, data.memory.usageRate])
        if (this.cpuData.length > 300) {
          this.cpuData.shift()
          this.memoryData.rows.shift()
        }
        this.cpuChart.setOption({series: [{data: this.cpuData}]})
        this.memoryChart.setOption({series: [{data: this.memoryData}]})
      }).catch(() => {
        this.loading = false;
      })
    },

    // 开始刷新状态
    restartStatusTimer() {
      this.stopStatusTimer();
      if (this.interval !== 0) {
        this.statusTimer = window.setInterval(this.getData, this.interval);
      }
    },

    // 停止刷新状态
    stopStatusTimer() {
      if (this.statusTimer) {
        window.clearInterval(this.statusTimer);
      }
      this.statusTimer = undefined;
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container {
  height: calc(100vh - 50px - 20px);
  overflow-x: auto;

  .text-bold {
    font-weight: bold;
    color: #666;
  }

  .content-container {
    //min-width: 1000px;

    ::v-deep .el-card__header {
      padding: 12px 18px;
    }

    ::v-deep .el-card__body {
      padding: 8px;
    }
  }

}
</style>