<template>
  <PageWrapper>
    <n-card :bordered="false" style="margin-bottom: 20px">
      <template #header>
        <div class="flex items-center">
          <n-icon style="margin-right: 6px">
            <DesktopOutlined />
          </n-icon>
          基本信息
        </div>
      </template>
      <n-descriptions :column="4" bordered label-placement="left" :labelStyle="{ width: '150px' }">
        <n-descriptions-item label="Redis版本">{{ baseInfo.redis_version }}</n-descriptions-item>
        <n-descriptions-item label="运行模式">{{
          baseInfo.redis_mode == 'standalone' ? '单机' : '集群'
        }}</n-descriptions-item>
        <n-descriptions-item label="端口">{{ baseInfo.tcp_port }}</n-descriptions-item>
        <n-descriptions-item label="客户端数">{{ baseInfo.connected_clients }}</n-descriptions-item>
        <n-descriptions-item label="运行时间(天)">{{
          baseInfo.uptime_in_days
        }}</n-descriptions-item>
        <n-descriptions-item label="使用内存">{{ baseInfo.used_memory_human }}</n-descriptions-item>
        <n-descriptions-item label="使用CUP">{{
          baseInfo.used_cpu_user_children
        }}</n-descriptions-item>
        <n-descriptions-item label="内存配置">{{ baseInfo.maxmemory_human }}</n-descriptions-item>
        <n-descriptions-item label="AOF是否开启">{{
          baseInfo.aof_enabled == 0 ? '开启' : '关闭'
        }}</n-descriptions-item>
        <n-descriptions-item label="RDB是否成功">{{
          baseInfo.aof_enabled == 'ok' ? '成功' : '失败'
        }}</n-descriptions-item>
        <n-descriptions-item label="key数量">{{ baseInfo.dbSize }}</n-descriptions-item>
        <n-descriptions-item label="网络入口/出口"
          >{{ baseInfo.instantaneous_input_kbps }}
          /
          {{ baseInfo.instantaneous_output_kbps }}</n-descriptions-item
        >
      </n-descriptions>
    </n-card>
    <div class="cache-box">
      <n-card :bordered="false">
        <template #header>
          <div class="flex items-center">
            <n-icon style="margin-right: 6px">
              <PieChartOutlined />
            </n-icon>
            命令统计
          </div>
        </template>
        <pie-box :pieData="commandStats" v-if="commandStats.length > 0" />
      </n-card>
      <n-card :bordered="false">
        <template #header>
          <div class="flex items-center">
            <n-icon style="margin-right: 6px">
              <DashboardOutlined />
            </n-icon>
            内存信息
          </div>
        </template>
        <gauge-box :data="gaugeValue" v-if="gaugeValue" />
      </n-card>
    </div>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { getCacheInfo } from '@/api/monitor/cache';
  import { PieChartOutlined, DesktopOutlined, DashboardOutlined } from '@vicons/antd';
  import pieBox from './pieBox.vue';
  import gaugeBox from './gaugeBox.vue';

  /**
   * 定义参数变量
   */
  const baseInfo = ref<any>({});
  const commandStats = ref([]);
  const gaugeValue = ref('');

  /**
   * 获取缓存信息
   */
  const loadCacheInfo = async () => {
    const result = await getCacheInfo();
    commandStats.value = result.commandStats;
    baseInfo.value = result.info;
    baseInfo.value.dbSize = result.dbSize;
    gaugeValue.value = (result.info.used_memory / 1024 / 1024).toFixed(2);
  };

  /**
   * 钩子函数
   */
  onMounted(() => {
    loadCacheInfo();
  });
</script>
<style lang="less" scoped>
  .cache-box {
    display: flex;

    > .n-card {
      flex: 1;

      &:nth-child(2) {
        margin: 0 15px;
      }
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
