<template>
  <div class="main-page monitor">
    <div class="page-box">
      <div class="title">服务器监控</div>
      <el-row class="top">
        <el-col
          class="bl"
          :span="8"
        >
          <p class="title_p">CPU使用率</p>
          <EchartsGauge
            title="CPU使用率"
            :pie="toNum(cpu)"
          />
        </el-col>
        <el-col
          class="bl"
          :span="8"
        >
          <p class="title_p">内存使用率</p>
          <EchartsGauge
            title="磁盘使用率"
            :pie="toNum(neicun)"
            endColor="#90E5E5"
            startColor="#23C7C7"
          />
        </el-col>
        <el-col :span="8">
          <p class="title_p">磁盘使用率</p>
          <ul class="porList">
            <li
              v-for="(item, index) in ciPanlist"
              :key="index"
            >
              <p class="p1">{{item['dir.name']}}：{{toNum(item['usage.use.percent'])}}%</p>
              <Progress :pie="toNum(item['usage.use.percent'])" />
              <p class="p2">0 <span>100</span></p>
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>
    <div class="page-box">
      <div class="title">资源明细</div>
      <el-row class="bottom">
        <el-col
          :span="12"
          class="bl bd"
        >
          <div class="head clear">
            <span class="t">CPU使用率(单位:%)</span>
            <el-radio-group
              v-model="selectTime1"
              size="small"
              style="float: right"
              @change="changeHandle1"
            >
              <el-radio-button :label="1">1小时</el-radio-button>
              <el-radio-button :label="6">6小时</el-radio-button>
              <el-radio-button :label="12">12小时</el-radio-button>
              <el-radio-button :label="24">24小时</el-radio-button>
            </el-radio-group>
          </div>
          <EchartsLine
            :dataList="cpuList"
            bColor="#DAEAFA"
            lineColor="#0873E7"
          />
        </el-col>
        <el-col
          :span="12"
          class="bd"
        >
          <div class="head clear">
            <span class="t">内存使用率(单位:%)</span>
            <el-radio-group
              v-model="selectTime2"
              size="small"
              style="float: right"
              @change="changeHandle2"
            >
              <el-radio-button :label="1">1小时</el-radio-button>
              <el-radio-button :label="6">6小时</el-radio-button>
              <el-radio-button :label="12">12小时</el-radio-button>
              <el-radio-button :label="24">24小时</el-radio-button>
            </el-radio-group>
          </div>
          <EchartsLine
            :dataList="ncList"
            bColor="#D8EFEF"
            lineColor="#15D8D8"
          />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import EchartsGauge from './components/echartsGauge.vue'
import Progress from './components/progress.vue'
import EchartsLine from './components/echartsLine.vue'
import { getServerInfo, queryResourceList } from '@/api/common'
export default {
  name: 'monitor',
  components: {
    EchartsGauge,
    Progress,
    EchartsLine
  },
  data() {
    return {
      cpu: 0,
      neicun: 0,
      ciPanlist: [],
      selectTime1: 1,
      selectTime2: 1,
      cpuList: [],
      ncList: [],
      timer: ''
    }
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setInterval(this.getTopData, 1000 * 60 * 5)
      this.getTopData()
      this.getBarData('cpu')
      this.getBarData('内存')
    },
    getTopData() {
      getServerInfo().then(res => {
        const { cpu, ciPanlist, neicun } = res.respData
        this.cpu = cpu
        this.neicun = neicun
        this.ciPanlist = ciPanlist
      })
    },
    getBarData(type) {
      const params = {}
      if (type === 'cpu') {
        params.resourceType = 1
        params.hour = this.selectTime1
      } else if (type === '内存') {
        params.resourceType = 2
        params.hour = this.selectTime2
      }
      queryResourceList(params).then(res => {
        const list = res.respData.map(item => [item.updateTime, this.toNum(item.utilizationRate)])
        if (type === 'cpu') {
          this.cpuList = list
        } else if (type === '内存') {
          this.ncList = list
        }
      })
    },
    changeHandle1() {
      this.getBarData('cpu')
    },
    changeHandle2() {
      this.getBarData('内存')
    },
    toNum(val) {
      return parseFloat(val) || 0
    }
  }
}
</script>
<style lang="scss" scoped>
.monitor {
  .page-box {
    background: #ffffff;
    &:first-child {
      margin-bottom: 24px;
    }
    .title {
      font-weight: 500;
      color: rgba(0, 0, 0, 0.87);
      font-size: 20px;
      line-height: 50px;
      padding: 0 24px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .bl {
      border-right: 1px solid rgba(0, 0, 0, 0.1);
    }
    .top {
      .title_p {
        text-align: center;
        padding: 30px 0 20px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.87);
        font-size: 16px;
      }
      .porList {
        margin: 10px 20px 0 40px;
        padding-right: 20px;
        max-height: 250px;
        overflow-y: auto;
        li {
          margin-bottom: 24px;
          .p1 {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.87);
            margin-bottom: 12px;
          }
          .p2 {
            color: #888888;
            line-height: 12px;
            margin-top: 4px;
            span {
              float: right;
            }
          }
        }
      }
    }
    .bottom {
      .bd {
        padding: 24px 32px;
      }
      .head {
        .t {
          font-size: 14px;
          color: #444444;
          line-height: 32px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.monitor {
  .el-radio-button:first-child .el-radio-button__inner,
  .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0;
  }
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    color: #4495e6;
    background: rgba(68, 149, 230, 0.1);
    border-color: #4495e6;
  }
}
</style>