<template>
  <div>
 <div>
  <span class="tag is-medium is-light"><b class="fs-17 has-text-black">CPU: {{ cpuinfo }}</b></span>
  </div>
 <div class="field is-grouped is-grouped-multiline mt-3 mb-1" v-if="data">
  <div class="control" v-for="vkey in  Object.keys(data)">
    <div class="px-2 py-1" style="border: 1px solid #E8E8E8; border-radius: 6px;">
      <p class="has-text-grey">{{ vkey }}</p>
      <p>{{ data[vkey] }}</p>
      <p class="has-text-primary">{{ $formatUnit(data[vkey] / data.total, 0.01, 0, true, 0) }}</p>
    </div>
  </div>
  </div>
</div>
</template>
<script>
export default {
  props: ['ssh'],
  data() {
    return {
      data: undefined,
      cpuinfo: undefined
    }
  },
  created() {
    this.getram()
    this.getcpu()
  },
  methods: {
    async getram() {
      let data = {ssh: this.ssh || 1, path: '', cmd: `free -m`, user: this.$store.login.id}
      let obj = await this.$insertapi('executecommand', data, undefined, false)
      let rows = obj.output[1].split(' ')
      let arr = rows.filter(v=>!this.$empty(v))
      this.data = {total: arr[1], used: arr[2], free: arr[3], shared: arr[4], cache: arr[5], avail: arr[6].replace('\r\n', '')}
    },
    async getcpu() {
      let data = {ssh: this.ssh || 1, path: '', cmd: `grep 'cpu ' /proc/stat | awk '{usage=($2+$4)*100/($2+$4+$5)} END {print usage "%"}'`, user: this.$store.login.id}
      let obj = await this.$insertapi('executecommand', data, undefined, false)
      let num = obj.output[0].replace('\r\n', '').replace('%', '')
      this.cpuinfo = this.$formatUnit(num, 1, 2, true, 2) + '%'
    }
  }
}
</script>