<script setup lang="ts">
import { ref } from "vue";
import { useRequest } from "vue-request";
import { myRequest } from "@/requests/request.ts";
import { userinfo } from "@/store/store.ts";
import { DateTime } from "luxon";
import YlCpuChart from "@/pages/sys-info/yl-cpu-chart.vue";
import YlMemChart from "@/pages/sys-info/yl-mem-chart.vue";
import YlDiskChart from "@/pages/sys-info/yl-disk-chart.vue";
import YlNetChart from "@/pages/sys-info/yl-net-chart.vue";

const date = ref<Date>(new Date());
const selectIp = ref("");

const { data: systems, loading: systems_loading } = useRequest<resSystem>(
  () =>
    myRequest(
      `/api/sys_info/server?date=${DateTime.fromJSDate(date.value).toFormat("yyyy-LL-dd")}`,
      userinfo.token,
    ),
  { refreshDeps: [date] },
);

const { data: sys_info, loading: info_loading } = useRequest<resSysInfo>(
  () =>
    myRequest(
      `/api/sys_info?date=${DateTime.fromJSDate(date.value).toFormat("yyyy-LL-dd")}&ip=${selectIp.value}`,
      userinfo.token,
    ),
  {
    ready: () => Boolean(selectIp.value),
    refreshDeps: [date, selectIp],
  },
);
</script>

<template>
  <div class="flex between" style="height: 100%">
    <div class="side-menu">
      <div>服务器列表</div>
      <div v-loading="systems_loading">
        <div
          v-for="item in systems?.data"
          :class="{ select: item.ip === selectIp }"
          @click="selectIp = item.ip"
        >
          {{ item.hostname }}--{{ item.ip }}
        </div>
      </div>
    </div>
    <el-scrollbar class="content" style="height: 100%; overflow-y: auto">
      <div class="date-div">
        日期：<el-date-picker
          v-model="date"
          type="date"
          placeholder="选择日期"
          :disabled-date="(d: Date) => d > new Date()"
        />
      </div>
      <div v-loading="info_loading">
        <yl-cpu-chart
          v-if="sys_info?.data?.length"
          :data="sys_info?.data.map((e) => e.cpu_per)"
          :x-data="sys_info?.data.map((e) => e.datetime)"
        />
        <yl-mem-chart
          v-if="sys_info?.data?.length"
          :data="sys_info?.data.map((e) => e.mem.mem_per)"
          :x-data="sys_info?.data.map((e) => e.datetime)"
        />
        <yl-disk-chart
          v-if="sys_info?.data?.length"
          :data="
            sys_info
              ? sys_info.data[0].disk.map((e, i) => ({
                  point: e.point,
                  per: sys_info?.data.map(
                    (item) => item.disk[i].per,
                  ) as number[],
                }))
              : []
          "
          :x-data="sys_info?.data.map((e) => e.datetime)"
        />
        <yl-net-chart
          v-if="sys_info?.data?.length"
          :data="sys_info?.data.map((e) => e.net)"
          :x-data="sys_info?.data.map((e) => e.datetime)"
        />
        <el-empty v-else description="暂无数据" />
      </div>
    </el-scrollbar>
  </div>
</template>

<style scoped>
.side-menu {
  width: 200px;
  height: 100%;
  background-color: #2dcca755;
  text-align: center;
  div {
    padding: 5px 0;
  }
  .select {
    background-color: #108ee933;
  }
}
.content {
  height: 100%;
  width: calc(100% - 150px);
  text-align: center;
  padding: 0 15px;
}
.date-div {
  position: sticky;
  top: 0;
  background-color: #fff;
  padding: 15px;
  z-index: 9;
}
</style>
