<template>
  <div class="box-main">
    <div class="page-padding">
      <a-row :gutter="24" class="mb-30">
        <a-col :span="12">
          <div ref="myEchartPie" style="width: 100%; height: 350px" />
        </a-col>
        <a-col :span="12">
          <a-card :bordered="false" style="font-weight: bold">
            <a-row :gutter="24">
              <a-col
                v-for="(item, index) in infomationCumulate"
                :key="index"
                :span="6"
              >
                <a-tooltip placement="topLeft">
                  <template #title>{{ item.count }}</template>
                  <a-statistic
                    :title="item.title"
                    :value="item.count"
                    :value-style="{
                      color: '#15A0FF',
                      fontSize: '32px',
                      overflow: 'hidden',
                      textOverflow: 'ellipsis',
                    }"
                    style="margin: 0 15px 30px"
                  >
                  </a-statistic>
                </a-tooltip>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
      <a-row :gutter="24" class="mb-30">
        <a-col :span="12">
          <a-card
            :bordered="false"
            :title="'Radis' + $t('REAL_TIME_MEMORY_USAGE') + '（MB）'"
            style="font-weight: bold"
          >
            <div ref="myEchart2" style="width: 100%; height: 350px" />
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card
            :bordered="false"
            :title="'Radis Key' + $t('REAL_TIME_QUANTITY')"
            style="font-weight: bold"
          >
            <div ref="myEchart1" style="width: 100%; height: 350px" />
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import * as echart from "echarts";
import ApiConstant from "@/api/ApiConstant";

export default {
  data() {
    return {
      overtimer: true,
      tableData: [],
      page: 1, // 页码
      total: 20, // 每页个数
      title: "", // 弹框的标题
      dialogVisble: false, // 弹框的显示 隐藏
      params: {
        role_code: "",
      },
      allUserList: [], // 当前角色下所有的用户列表
      leftXData: [], // 左侧X轴数据
      leftYData: [], // 左侧X轴数据
      rightXData: [], // 右侧X轴数据
      rightYData: [], // 右侧X轴数据
      timer: null, // 定时器ID
      millisec: 3000, // 定时器周期
      columns: [
        {
          dataIndex: "key",
          title: () => this.$t("NAME"),
          sorter: false,
        },
        {
          dataIndex: "description",
          title: () => this.$t("DESCRIBE"),
          sorter: false,
        },
        {
          dataIndex: "value",
          title: () => this.$t("DATA_VALUE"),
          sorter: false,
        },
      ],
      pieData: [],
      // eslint-disable-next-line
      bgPatternImg: require("@/assets/images/pie_bg_01.png"),
      // eslint-disable-next-line
      piePatternImg: require("@/assets/images/pie_bg_02.png"),
      infomationCumulate: [
        {
          count: "",
          title: "Redis版本",
        },
        {
          count: "",
          title: "运行模式",
        },
        {
          count: "",
          title: "监听端口",
        },
        {
          count: "",
          title: "已连客户端",
        },
        {
          count: "",
          title: "启动秒数",
        },
        {
          count: "",
          title: "启动天数",
        },
        {
          count: "",
          title: "内存限制",
        },
        {
          count: "",
          title: "系统内存",
        },
        {
          count: "",
          title: "是否启动AOF",
        },
        {
          count: "",
          title: "RDB是否成功",
        },
        {
          count: "",
          title: "网络入口",
        },
        {
          count: "",
          title: "网络出口",
        },
      ],
    };
  },
  destroyed() {
    this.overtimer = false;
  },
  mounted() {
    this.overtimer = true;
    this.loadData();
  },
  methods: {
    loadData() {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/monitor/redis/info`, {
          params: { isCancelApiLoad: true },
        })
        .then((res) => {
          const { commandStats, dbSize, info, time } = res?.data?.data ?? {};
          if (time) {
            this.leftXData.push(time);
            this.rightXData.push(time);
          }
          if (this.leftXData.length > 5) {
            this.leftXData.splice(0, 1);
          }
          if (this.leftYData.length > 5) {
            this.leftYData.splice(0, 1);
          }
          if (dbSize) {
            this.leftYData.push(parseFloat(dbSize));
          }
          if (this.rightXData.length > 5) {
            this.rightXData.splice(0, 1);
          }
          if (this.rightYData.length > 5) {
            this.rightYData.splice(0, 1);
          }
          if (info?.used_memory) {
            this.rightYData.push(parseFloat(info.used_memory) / 1024);
          }
          if (commandStats && commandStats.length > 0) {
            this.pieData = commandStats;
          }
          // infomation
          this.infomationCumulate[0].count = info.redis_version || "";
          this.infomationCumulate[1].count = info.redis_mode || "";
          this.infomationCumulate[2].count = info.tcp_port || "";
          this.infomationCumulate[3].count = info.connected_clients || "";
          this.infomationCumulate[4].count = info.uptime_in_seconds || "";
          this.infomationCumulate[5].count = info.uptime_in_days || "";
          this.infomationCumulate[6].count = info.maxmemory || "";
          this.infomationCumulate[7].count = info.maxmemory_human || "";
          this.infomationCumulate[8].count = info.aof_enabled || "";
          this.infomationCumulate[9].count = info.rdb_last_bgsave_status || "";
          this.infomationCumulate[10].count =
            `${info.instantaneous_input_kbps}kps` || "";
          this.infomationCumulate[11].count =
            `${info.instantaneous_output_kbps}kps` || "";
          this.initPieChart();
          this.initLeftChart();
          this.initRightChart();
          if (this.overtimer) {
            setTimeout(() => {
              this.loadData();
            }, 3000);
          }
        });
    },
    getRedisInfoList() {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/monitor/redis/info`, {
          params: { isCancelApiLoad: true },
        })
        .then((res) => {
          this.tableData = res.data.data;
        });
    },
    // Radis 内存实时占用情况（KB）
    initPieChart() {
      const itemStyle = {
        normal: {
          opacity: 0.7,
          color: {
            image: this.piePatternImg,
            repeat: "repeat",
          },
          borderWidth: 3,
          borderColor: "#235894",
        },
      };
      const myChart = this.$refs?.myEchartPie
        ? echart.init(this.$refs?.myEchartPie)
        : null;

      const option = {
        backgroundColor: {
          image: this.bgPatternImg,
          repeat: "repeat",
        },
        title: {
          text: "命令统计",
          textStyle: {
            color: "#235894",
          },
        },
        tooltip: {},
        series: [
          {
            name: "pie",
            type: "pie",
            selectedMode: "single",
            selectedOffset: 30,
            clockwise: true,
            label: {
              fontSize: 18,
              color: "#235894",
            },
            labelLine: {
              lineStyle: {
                color: "#235894",
              },
            },
            data: this.pieData,
            itemStyle,
          },
        ],
      };
      myChart?.setOption(option);
    },
    // Radis 内存实时占用情况（KB）
    initLeftChart() {
      const myChart = this.$refs?.myEchart1
        ? echart.init(this.$refs?.myEchart1)
        : null;
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        calculable: true,
        xAxis: [
          {
            gridIndex: 0,
            // boundaryGap: false,
            boundaryGap: [0.2, 0.2],
            type: "category",
            data: this.leftXData,
            axisLine: {
              lineStyle: {
                color: "#272729", // x轴的颜色
                width: 0, // 轴线的宽度
              },
            },
            // 去掉刻度线
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#272729", // x轴的颜色
              width: 0, // 轴线的宽度
            },
          },
          splitLine: {
            // 网格线
            lineStyle: {
              type: "dashed", // 设置网格线类型 dotted：虚线   solid:实线
            },
            show: true, // 隐藏或显示
          },
          // 去掉刻度线
          axisTick: {
            show: false,
          },
          axisLabel: {
            margin: 2,
            formatter(value, index) {
              if (value >= 10000 && value < 10000000) {
                // eslint-disable-next-line
                value = `${value / 10000}万`;
              } else if (value >= 10000000) {
                // eslint-disable-next-line
                value = `${value / 10000000}千万`;
              }
              return value;
            },
          },
        },
        series: [
          {
            data: this.leftYData,
            type: "line",
            symbol: "circle", // 折线点设置为实心点
            symbolSize: 2, // 折线点的大小
            width: 5,
            itemStyle: {
              normal: {
                color: "#386db3", // 折线点的颜色
                lineStyle: {
                  color: "#386db3", // 折线的颜色
                },
              },
            },
            areaStyle: {
              color: "#005087",
              opacity: 0.3,
              origin: "start",
            },
            markPoint: {
              data: [{ type: "max", name: "最大值" }],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
        ],
      };
      myChart?.setOption(option);
    },
    // 状态统计
    initRightChart() {
      const myChart = this.$refs?.myEchart2
        ? echart.init(this.$refs?.myEchart2)
        : null;
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        xAxis: [
          {
            gridIndex: 0,
            // boundaryGap: false,
            boundaryGap: [0.2, 0.2],
            type: "category",
            data: this.rightXData,
            axisLine: {
              lineStyle: {
                color: "#272729", // x轴的颜色
                width: 0, // 轴线的宽度
              },
            },
            // 去掉刻度线
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#272729", // x轴的颜色
              width: 0, // 轴线的宽度
            },
          },
          splitLine: {
            // 网格线
            lineStyle: {
              type: "dashed", // 设置网格线类型 dotted：虚线   solid:实线
            },
            show: true, // 隐藏或显示
          },
          // 去掉刻度线
          axisTick: {
            show: false,
          },
          axisLabel: {
            margin: 2,
            formatter(value, index) {
              if (value >= 10000 && value < 10000000) {
                // eslint-disable-next-line
                value = `${value / 10000}万`;
              } else if (value >= 10000000) {
                // eslint-disable-next-line
                value = `${value / 10000000}千万`;
              }
              return value;
            },
          },
        },
        series: [
          {
            data: this.rightYData,
            type: "line",
            symbol: "circle", // 折线点设置为实心点
            symbolSize: 2, // 折线点的大小
            areaStyle: {
              color: "#FF6987",
              opacity: 0.3,
              origin: "start",
            },
            markPoint: {
              data: [{ type: "max", name: "最大值" }],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
        ],
      };
      myChart?.setOption(option);
    },
  },
};
</script>
<style lang="less">
.icon-defult {
  font-weight: 600;
}
</style>
