<template>
  <basic-container>
    <el-row :span="24">
      <el-col :span="12">
        <v-chart :options="useKeyCumulate"/>
      </el-col>
      <el-col :span="12">
        <avue-data-display :option="infomationCumulate"/>
      </el-col>
    </el-row>
    <el-row :span="24">
      <el-col :span="12">
        <v-chart :options="memoryCumulate"/>
      </el-col>
      <el-col :span="12">
        <v-chart :options="dbSizeCumulate"/>
      </el-col>
    </el-row>
  </basic-container>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/markPoint'
import 'echarts/lib/component/markLine'
import { fetchInfo } from '@/api/monitor/monitor'

export default {
  components: {
    'v-chart': ECharts
  },

  data() {
    return {
      activeName: 'first',
      timer: undefined,
      memoryCumulate: {
        color: ['#409EFF', '#FFCC99'],
        title: {
          text: 'Redis 内存情况'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['分配内存', '消耗峰值']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} M'
          }
        },
        series: [{
          name: '分配内存',
          data: [],
          type: 'line',
          itemStyle: {
            normal: {
              lineStyle: {
                width: 3// 设置线条粗细
              }
            }
          },
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' }
            ]
          },
          markLine: {
            data: [
              { type: 'average', name: '平均值' }
            ]
          }
        }, {
          name: '消耗峰值',
          data: [],
          type: 'line',
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#ffcc99',
                width: 3// 设置线条粗细
              }
            }
          },
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' }
            ]
          },
          markLine: {
            data: [
              { type: 'average', name: '平均值' }
            ]
          }
        }]
      },
      dbSizeCumulate: {
        color: ['#409EFF'],
        title: {
          text: 'Redis Key 数量'
        },
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 个'
          }
        },
        series: [{
          data: [],
          type: 'line',
          itemStyle: {
            normal: {
              lineStyle: {
                width: 3// 设置线条粗细
              }
            }
          },
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' }
            ]
          }
        }]
      },
      useKeyCumulate: {
        backgroundColor: {
          image: undefined,
          repeat: 'repeat'
        },
        title: {
          text: '命令统计',
          textStyle: {
            color: '#235894'
          }
        },
        tooltip: {},
        series: [{
          name: 'pie',
          type: 'pie',
          selectedMode: 'single',
          selectedOffset: 30,
          clockwise: true,
          label: {
            normal: {
              textStyle: {
                fontSize: 18,
                color: '#235894'
              }
            }
          },
          labelLine: {
            normal: {
              lineStyle: {
                color: '#235894'
              }
            }
          },
          data: [],
          itemStyle: {
            normal: {
              opacity: 0.7,
              color: {
                image: undefined,
                repeat: 'repeat'
              },
              borderWidth: 3,
              borderColor: '#235894'
            }
          }
        }]
      },
      infomationCumulate: {
        data: [
          {
            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: '网络出口'
          }
        ]
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  created() {
    const piePatternSrc = 'data:image/jpeg;base64,[encoded data, 27528 characters]'
    const bgPatternSrc = 'data:image/png;charset=utf-8;base64,[encoded data, 64920 characters]'
    const piePatternImg = new Image()
    piePatternImg.src = piePatternSrc
    const bgPatternImg = new Image()
    bgPatternImg.src = bgPatternSrc
    this.useKeyCumulate.backgroundColor.image = bgPatternImg
    this.useKeyCumulate.series[0].itemStyle.normal.color.image = piePatternImg
    this.getInfo()
    clearInterval(this.timer)
    this.timer = setInterval(() => {
      this.getInfo()
    }, 3000)
  },
  methods: {
    getInfo: function() {
      fetchInfo().then(response => {
        this.memoryCumulate.series[0].data.push(parseFloat(response.data.data.info.used_memory_human))
        this.memoryCumulate.series[1].data.push(parseFloat(response.data.data.info.used_memory_peak_human))
        this.memoryCumulate.xAxis.data.push(response.data.data.time)
        this.dbSizeCumulate.series[0].data.push(parseInt(response.data.data.dbSize))
        this.dbSizeCumulate.xAxis.data.push(response.data.data.time)
        this.useKeyCumulate.series[0].data = response.data.data.commandStats

        // infomation
        this.infomationCumulate.data[0].count = response.data.data.info.redis_version
        this.infomationCumulate.data[1].count = response.data.data.info.redis_mode
        this.infomationCumulate.data[2].count = response.data.data.info.tcp_port
        this.infomationCumulate.data[3].count = response.data.data.info.connected_clients
        this.infomationCumulate.data[4].count = response.data.data.info.uptime_in_seconds
        this.infomationCumulate.data[5].count = response.data.data.info.uptime_in_days
        this.infomationCumulate.data[6].count = response.data.data.info.maxmemory
        this.infomationCumulate.data[7].count = response.data.data.info.maxmemory_human
        this.infomationCumulate.data[8].count = response.data.data.info.aof_enabled
        this.infomationCumulate.data[9].count = response.data.data.info.rdb_last_bgsave_status
        this.infomationCumulate.data[10].count = response.data.data.info.instantaneous_input_kbps + 'kps'
        this.infomationCumulate.data[11].count = response.data.data.info.instantaneous_output_kbps + 'kps'

        // 删除第一个元素
        if (this.memoryCumulate.series[0].data.length > 7) {
          this.memoryCumulate.series[0].data.shift()
          this.memoryCumulate.series[1].data.shift()
          this.dbSizeCumulate.series[0].data.shift()
          this.memoryCumulate.xAxis.data.shift()
          this.dbSizeCumulate.xAxis.data.shift()
        }
      })
    }
  }
}
</script>
