<template>
  <div>
    <div class="dash-board">
      <Select
        v-if="serverNodeOptions.length > 1"
        :options="serverNodeOptions"
        :value="serverId"
        style="width: 300px; margin-bottom: 20px"
        @change="serverIdChange"
      />
      <div class="dash-board-items">
        <div class="dash-board-item">
          <TopEchartsItemNode :value="topValues.cpu" title="CPU使用率" />
        </div>
        <div class="dash-board-item">
          <TopEchartsItemNode
            :bottom="`总JVM内存 ${topValues.jvmTotal}G`"
            :max="topValues.jvmTotal"
            :value="topValues.jvm"
            formatter="G"
            title="JVM内存"
          />
        </div>
        <div class="dash-board-item">
          <TopEchartsItemNode
            :bottom="`总磁盘大小 ${topValues.usageTotal}G`"
            :max="topValues.usageTotal"
            :value="topValues.usage"
            formatter="G"
            title="磁盘占用"
          />
        </div>
        <div class="dash-board-item">
          <TopEchartsItemNode
            :bottom="`系统内存 ${topValues.systemUsageTotal}G`"
            :max="topValues.systemUsageTotal"
            :value="topValues.systemUsage"
            formatter="G"
            title="系统内存"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="TopCard">
  import { ref, onMounted, watch, onUnmounted } from 'vue';
  import { serverNode } from '../../../../api/link/dashboard';
  import TopEchartsItemNode from './TopEchartsItemNode.vue';
  import { isNoCommunity } from '@jdlinker/utils';
  import { useSocketStore } from '@jdlinker/func';
  // @ts-ignore
  import { Select } from 'linker-ui-components';

  const webSocketStore = useSocketStore();
  const stompClient = webSocketStore.$state.stompClient;
  const serverId = ref();
  const serverNodeOptions = ref<Array<any>>([]);
  const topValues = ref({
    cpu: 0,
    jvm: 0,
    jvmTotal: 0,
    usage: 0,
    usageTotal: 0,
    systemUsage: 0,
    systemUsageTotal: 0
  });
  const emit = defineEmits(['serviceChange']);
  const serverIdChange = (val: string) => {
    serverId.value = val;
  };

  const unSub = () => {
    if (webSocketStore) {
      webSocketStore.webSocket_unsub(webSocketStore.$state, topic);
    }
  };

  const topic = '/dashboard/systemMonitor/stats/info/realTime';
  const getData = () => {
    const id = 'operations-statistics-system-info-realTime';
    // unSub();
    const params = {
      type: 'all',
      serverNodeId: serverId.value,
      interval: '1s',
      agg: 'avg'
    };

    const headers = {
      id: id,
      topic: topic,
      parameter: JSON.stringify(params)
    };
    // 消息订阅
    stompClient.subscribe(
      topic,
      (data) => {
        console.log('stompClinet...', data);
        const payload = JSON.parse(data.body).payload;
        const {
          value: { cpu, memory, disk }
        } = payload;
        topValues.value = {
          cpu: cpu.systemUsage,
          jvm: Number(((memory.jvmHeapUsage / 100) * (memory.jvmHeapTotal / 1024)).toFixed(1)),
          jvmTotal: Math.ceil(memory.jvmHeapTotal / 1024),
          usage: Number(((disk.total / 1024) * (disk.usage / 100)).toFixed(1)),
          usageTotal: Math.ceil(disk.total / 1024),
          systemUsage: Number(((memory.systemTotal / 1024) * (memory.systemUsage / 100)).toFixed(1)),
          systemUsageTotal: Math.ceil(memory.systemTotal / 1024)
        };
      },
      headers
    );

    // wsRef.value = getWebSocket(id, topic, {
    //   type: 'all',
    //   serverNodeId: serverId.value,
    //   interval: '1s',
    //   agg: 'avg'
    // })
    //   .pipe(map((res: any) => res.payload))
    //   .subscribe((payload) => {
    //     const {
    //       value: { cpu, memory, disk }
    //     } = payload;
    //     topValues.value = {
    //       cpu: cpu.systemUsage,
    //       jvm: Number(((memory.jvmHeapUsage / 100) * (memory.jvmHeapTotal / 1024)).toFixed(1)),
    //       jvmTotal: Math.ceil(memory.jvmHeapTotal / 1024),
    //       usage: Number(((disk.total / 1024) * (disk.usage / 100)).toFixed(1)),
    //       usageTotal: Math.ceil(disk.total / 1024),
    //       systemUsage: Number(((memory.systemTotal / 1024) * (memory.systemUsage / 100)).toFixed(1)),
    //       systemUsageTotal: Math.ceil(memory.systemTotal / 1024)
    //     };
    //   });
  };

  onMounted(() => {
    console.log('isNoCommunity');
    if (isNoCommunity) {
      serverNode().then((resp: any) => {
        if (resp.success) {
          serverNodeOptions.value = resp.result.map((item: any) => ({
            label: item.name,
            value: item.id
          }));
          if (serverNodeOptions.value.length) {
            serverId.value = serverNodeOptions.value[0]?.value;
          }
        }
      });
    } else {
      getData();
    }
  });

  onUnmounted(() => {
    unSub();
  });

  watch(
    () => serverId.value,
    (val) => {
      val && getData();
      emit('serviceChange', val);
    }
  );
</script>

<style lang="less" scoped>
  .dash-board {
    background-color: #fff;
    padding: 24px;
    .dash-board-items {
      display: flex;
      flex-wrap: wrap;
      border-radius: 2px;
      justify-content: space-between;

      gap: 24px;
    }
    .dash-board-item {
      flex: 1;
      //margin: 24px 12px;
      min-width: calc(25% - 24px);
    }
  }

  @media (max-width: 1400px) {
    .dash-board {
      .dash-board-item {
        min-width: calc(50% - 24px);
      }
    }
  }
</style>
