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

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { getCacheInfo } from '@/api/monitor/cache';
  import { PieChartOutlined, DesktopOutlined, DashboardOutlined } from '@ant-design/icons-vue';
  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;

    > .ant-card {
      flex: 1;

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

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