<template>
  <div class="p-4">
    <Card>
      <!-- Redis 信息实时监控 -->
      <Row :gutter="8">
        <Col :sm="24" :xl="12">
          <div ref="chartRef" style="width: 100%; height: 300px"></div>
        </Col>
        <Col :sm="24" :xl="12">
          <div ref="chartRef2" style="width: 100%; height: 300px"></div>
        </Col>
      </Row>
    </Card>

    <BasicTable @register="registerTable" :api="getInfo"></BasicTable>
  </div>
</template>
<script lang="ts" name="monitor-redis" setup>
  import { onMounted, ref, reactive, Ref } from 'vue';
  import { BasicTable, useTable } from '@jdlinker/ui';
  import { getInfo, getRedisInfo } from './redis.api';
  import dayjs from 'dayjs';
  import { columns } from './redis.data';
  import { useMessage, useECharts } from '@jdlinker/func';
  import { Card, Row, Col } from 'ant-design-vue';

  const dataSource = ref([]);
  const chartRef = ref<HTMLDivElement | null>(null);
  const chartRef2 = ref<HTMLDivElement | null>(null);
  const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
  const { setOptions: setOptions2, echarts: echarts2 } = useECharts(chartRef2 as Ref<HTMLDivElement>);
  const loading = ref(false);
  let timer = null;
  const { createMessage } = useMessage();
  const key = reactive({
    title: {
      text: 'Redis Key 实时数量（个）'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [],
        type: 'line',
        areaStyle: {
          color: '#ff6987'
        },
        lineStyle: {
          color: '#dc143c',
          width: 10,
          type: 'solid'
        }
      }
    ]
  });
  const memory = reactive({
    title: {
      text: 'Redis 内存实时占用情况（KB）'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [],
        type: 'line',
        areaStyle: {
          color: '#74bcff'
        },
        lineStyle: {
          color: '#1890ff',
          width: 10,
          type: 'solid'
        }
      }
    ]
  });

  const [registerTable, { reload }] = useTable({
    columns,
    showIndexColumn: false,
    pagination: false,
    bordered: true
  });

  // 获取一组数据中最大和最小的值
  function getMaxAndMin(dataSource, field) {
    let maxValue = null,
      minValue = null;
    dataSource.forEach((item) => {
      let value = Number.parseInt(item[field]);
      // max
      if (maxValue == null) {
        maxValue = value;
      } else if (value > maxValue) {
        maxValue = value;
      }
      // min
      if (minValue == null) {
        minValue = value;
      } else if (value < minValue) {
        minValue = value;
      }
    });
    return [maxValue, minValue];
  }

  function loadRedisInfo() {
    getInfo().then((res) => {
      dataSource.value = res.result;
    });
  }

  function initCharts() {
    setOptions(memory);
    setOptions2(key);
  }

  /** 开启定时器 */
  function openTimer() {
    loadData();
    closeTimer();
    timer = setInterval(() => {
      loadData();
    }, 5000);
  }

  /** 关闭定时器 */
  function closeTimer() {
    if (timer) clearInterval(timer);
  }

  function loadData() {
    getRedisInfo()
      .then((res) => {
        let time = dayjs().format('hh:mm:ss');
        let [{ dbSize: currentSize }, memoryInfo] = res;
        let currentMemory = memoryInfo.used_memory / 1000;
        // push 数据
        key.xAxis.data.push(time);
        key.series[0].data.push(currentSize);
        memory.xAxis.data.push(time);
        memory.series[0].data.push(currentMemory);
        // 最大长度为6
        if (key.series[0].data.length > 6) {
          key.xAxis.data.splice(0, 1);
          key.series[0].data.splice(0, 1);
          memory.xAxis.data.splice(0, 1);
          memory.series[0].data.splice(0, 1);
        }
        setOptions(memory, false);
        setOptions2(key, false);

        // 计算 Key 最大最小值
        //let keyPole = getMaxAndMin(key.dataSource, 'y');
        //key.max = Math.floor(keyPole[0]) + 10;
        //key.min = Math.floor(keyPole[1]) - 10;
        //if (key.min < 0) this.key.min = 0;

        // 计算 Memory 最大最小值
        //let memoryPole = getMaxAndMin(memory.dataSource, 'y');
        //memory.max = Math.floor(memoryPole[0]) + 100;
        //memory.min = Math.floor(memoryPole[1]) - 100;
        //if (memory.min < 0) memory.min = 0;
      })
      .catch((e) => {
        //closeTimer()
      });
  }

  onMounted(() => {
    initCharts();
    openTimer();
    setTimeout(() => {
      loadData();
    }, 1000);
  });
</script>
