<template>
  <div class="app-container cardBody">
    <a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-card title="CPU" :head-style="headStyle" :bordered="false">
            <div class="cardTab">
              <table cellspacing="0" style="width: 100%">
                <thead>
                  <tr>
                    <th class="is-leaf">
                      <div class="cell">{{ $t("ATTRI_BUTE") }}</div>
                    </th>
                    <th class="is-leaf">
                      <div class="cell">{{ $t("ATTR_BUTE_VALUE") }}</div>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <div class="cell">{{ $t("CORES_NUMBER") }}</div>
                    </td>
                    <td>
                      <div v-if="server.cpu" class="cell">
                        {{ server.cpu.cpuNum }}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="cell">{{ $t("USER_UTILIZATION") }}</div>
                    </td>
                    <td>
                      <div v-if="server.cpu" class="cell">
                        {{ server.cpu.used }}%
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="cell">{{ $t("SYSTEM_UTILIZATION") }}</div>
                    </td>
                    <td>
                      <div v-if="server.cpu" class="cell">
                        {{ server.cpu.sys }}%
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="cell">{{ $t("CURRENT_IDLE_RATE") }}</div>
                    </td>
                    <td>
                      <div v-if="server.cpu" class="cell">
                        {{ server.cpu.free }}%
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card
            :title="$t('MEMORY')"
            :head-style="headStyle"
            :bordered="false"
          >
            <div class="cardTab">
              <table cellspacing="0" style="width: 100%">
                <thead>
                  <tr>
                    <th class="is-leaf">
                      <div class="cell">{{ $t("ATTRI_BUTE") }}</div>
                    </th>
                    <th class="is-leaf">
                      <div class="cell">{{ $t("MEMORY") }}</div>
                    </th>
                    <th class="is-leaf">
                      <div class="cell">{{ $t("JVM") }}</div>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <div class="cell">{{ $t("TOTAL_MEMORY") }}</div>
                    </td>
                    <td>
                      <div v-if="server.mem" class="cell">
                        {{ server.mem.total }}GB
                      </div>
                    </td>
                    <td>
                      <div v-if="server.jvm" class="cell">
                        {{ server.jvm.total }}MB
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="cell">{{ $t("USED_MEMORY") }}</div>
                    </td>
                    <td>
                      <div v-if="server.mem" class="cell">
                        {{ server.mem.used }}GB
                      </div>
                    </td>
                    <td>
                      <div v-if="server.jvm" class="cell">
                        {{ server.jvm.used }}MB
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="cell">{{ $t("REMAINING_MEMORY") }}</div>
                    </td>
                    <td>
                      <div v-if="server.mem" class="cell">
                        {{ server.mem.free }}GB
                      </div>
                    </td>
                    <td>
                      <div v-if="server.jvm" class="cell">
                        {{ server.jvm.free }}MB
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="cell">{{ $t("UTILIZATION") }}</div>
                    </td>
                    <td>
                      <div
                        v-if="server.mem"
                        class="cell"
                        :class="{ 'text-danger': server.mem.usage > 80 }"
                      >
                        {{ server.mem.usage }}%
                      </div>
                    </td>
                    <td>
                      <div
                        v-if="server.jvm"
                        class="cell"
                        :class="{ 'text-danger': server.jvm.usage > 80 }"
                      >
                        {{ server.jvm.usage }}%
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </a-card>
        </a-col>
      </a-row>
      <a-col :span="24" class="card-box" style="margin-top: 20px">
        <a-card
          :title="$t('SERVER_INFORMATION')"
          :head-style="headStyle"
          :bordered="false"
        >
          <div class="cardTabTwo">
            <table cellspacing="0" style="width: 100%">
              <tbody>
                <tr>
                  <td>
                    <div class="cell">{{ $t("SERVER_NAME") }}</div>
                  </td>
                  <td>
                    <div v-if="server.sys" class="cell">
                      {{ server.sys.computerName }}
                    </div>
                  </td>
                  <td>
                    <div class="cell">{{ $t("OPERATING_SYSTEM") }}</div>
                  </td>
                  <td>
                    <div v-if="server.sys" class="cell">
                      {{ server.sys.osName }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="cell">{{ $t("SERVER_IP") }}</div>
                  </td>
                  <td>
                    <div v-if="server.sys" class="cell">
                      {{ server.sys.computerIp }}
                    </div>
                  </td>
                  <td>
                    <div class="cell">{{ $t("SYSTEM_ARCHITECTURE") }}</div>
                  </td>
                  <td>
                    <div v-if="server.sys" class="cell">
                      {{ server.sys.osArch }}
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </a-card>
      </a-col>

      <a-col :span="24" class="card-box" style="margin-top: 20px">
        <a-card
          :title="$t('JAVE_INFORMATION')"
          :head-style="headStyle"
          :bordered="false"
        >
          <div class="cardTabTwo">
            <table cellspacing="0" style="width: 100%">
              <tbody>
                <tr>
                  <td>
                    <div class="cell">{{ $t("JAVE_NAME") }}</div>
                  </td>
                  <td>
                    <div v-if="server.jvm" class="cell">
                      {{ server.jvm.name }}
                    </div>
                  </td>
                  <td>
                    <div class="cell">{{ $t("JAVA_VERSION") }}</div>
                  </td>
                  <td>
                    <div v-if="server.jvm" class="cell">
                      {{ server.jvm.version }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="cell">{{ $t("START_UP_TIME") }}</div>
                  </td>
                  <td>
                    <div v-if="server.jvm" class="cell">
                      {{ server.jvm.startTime }}
                    </div>
                  </td>
                  <td>
                    <div class="cell">{{ $t("RUN_TIME") }}</div>
                  </td>
                  <td>
                    <div v-if="server.jvm" class="cell">
                      {{ server.jvm.runTime }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td colspan="1">
                    <div class="cell">{{ $t("INSTALLATION_PATH") }}</div>
                  </td>
                  <td colspan="3">
                    <div v-if="server.jvm" class="cell">
                      {{ server.jvm.home }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td colspan="1">
                    <div class="cell">{{ $t("PROJECT_PATH") }}</div>
                  </td>
                  <td colspan="3">
                    <div v-if="server.sys" class="cell">
                      {{ server.sys.userDir }}
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </a-card>
      </a-col>

      <a-col :span="24" class="card-box" style="margin-top: 20px">
        <a-card
          :title="$t('DISK_STATUS')"
          :head-style="headStyle"
          :bordered="false"
        >
          <div class="cardTab">
            <table cellspacing="0" style="width: 100%">
              <thead>
                <tr>
                  <th class="is-leaf">
                    <div class="cell">{{ $t("DRIVE_LETTER_PATH") }}</div>
                  </th>
                  <th class="is-leaf">
                    <div class="cell">{{ $t("FILE_SYSTEM") }}</div>
                  </th>
                  <th class="is-leaf">
                    <div class="cell">{{ $t("DRIVE_LETTER_TYPE") }}</div>
                  </th>
                  <th class="is-leaf">
                    <div class="cell">{{ $t("TOTAL_SIZE") }}</div>
                  </th>
                  <th class="is-leaf">
                    <div class="cell">{{ $t("AVAILABLE_SIZE") }}</div>
                  </th>
                  <th class="is-leaf">
                    <div class="cell">{{ $t("USED_SIZE") }}</div>
                  </th>
                  <th class="is-leaf">
                    <div class="cell">{{ $t("PERCENTAGE_USED") }}</div>
                  </th>
                </tr>
              </thead>
              <tbody v-if="server.sysFiles">
                <tr v-for="(sysFile, index) in server.sysFiles" :key="index">
                  <td>
                    <div class="cell">{{ sysFile.dirName }}</div>
                  </td>
                  <td>
                    <div class="cell">{{ sysFile.sysTypeName }}</div>
                  </td>
                  <td>
                    <div class="cell">{{ sysFile.typeName }}</div>
                  </td>
                  <td>
                    <div class="cell">{{ sysFile.total }}</div>
                  </td>
                  <td>
                    <div class="cell">{{ sysFile.free }}</div>
                  </td>
                  <td>
                    <div class="cell">{{ sysFile.used }}</div>
                  </td>
                  <td>
                    <div
                      class="cell"
                      :class="{ 'text-danger': sysFile.usage > 80 }"
                    >
                      {{ sysFile.usage }}%
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import ApiConstant from "@/api/ApiConstant";

export default {
  name: "Server",
  data() {
    return {
      // 服务器信息
      server: [],
      overtimer: null,
      timer: true,
      headStyle: {
        height: "34px",
        padding: "0px 15px",
        "line-height": "34px",
        "min-height": "34px",
      },
    };
  },
  destroyed() {
    this.timer = false;
  },
  mounted() {
    this.timer = true;
    this.getList();
  },
  methods: {
    /** 查询服务器信息 */
    getList() {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/monitor/server/info`, {
          params: { isCancelApiLoad: true },
        })
        .then((res) => {
          this.server = JSON.parse(JSON.stringify(res.data.data));
          if (this.timer) {
            setTimeout(() => {
              this.getList();
            }, 3000);
          }
        });
    },
  },
};
</script>
<style lang="less" scoped>
@import (optional, once) "@/theme/index";
.ant-row {
  background: @layout-body-background;
}
.cardBody {
  /deep/ .ant-card {
    box-shadow: 4px 4px 10px @layout-body-background;
  }
  /deep/ .ant-card-body {
    padding: 10px;
  }
  /deep/ .ant-card-head-title {
    height: 34px;
    line-height: 34px;
    padding: 0;
  }
}
.cardTab {
  table {
    thead {
      tr {
        height: 34px;
        line-height: 34px;
        border-bottom: 1px solid @layout-body-background;
        th {
          padding: 0 20px;
        }
      }
    }
    tbody {
      tr {
        border-bottom: 1px solid @layout-body-background;
        height: 34px;
        line-height: 34px;
        td {
          padding: 0 20px;
        }
      }
    }
  }
}
.cardTabTwo {
  table {
    tbody {
      tr {
        height: 34px;
        border-bottom: 1px solid @layout-body-background;
        line-height: 34px;
        td {
          padding: 0 20px;
        }
      }
    }
  }
}
</style>
