<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons");
import resize from "./mixins/resize";

let chart = null

const seriesData = {
  heap_total_size: [],
  heap_used_size: [],
  stack_total_size: [],
  stack_used_size: [],
};

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "350px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    dataList: {
      type: Array,
      required: false,
      default: () => [],
    },
  },
  data() {
    return {
      loading: null,
      series: [
        {
          name: "heap_total_size",
          type: "line",
          max: "dataMax",
          showSymbol: false,
          emphasis: {
            scale: false,
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: [],
        },
        {
          name: "heap_used_size",
          type: "line",
          max: "dataMax",
          showSymbol: false,
          emphasis: {
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: [],
        },
        {
          name: "stack_total_size",
          type: "line",
          max: "dataMax",
          showSymbol: false,
          emphasis: {
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: [],
        },
        {
          name: "stack_used_size",
          type: "line",
          max: "dataMax",
          showSymbol: false,
          emphasis: {
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: [],
        },
      ],
      legendData: Object.keys(seriesData),
    };
  },
  watch: {
    dataList: {
      deep: true,
      handler(val) {
        if (val.length > 0) this.handleData(val);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!chart) {
      return;
    }
    chart.clear();
    chart.dispose();
  },
  methods: {
    handleData(data) {
      Object.keys(seriesData).forEach((key) => {
        seriesData[key] = [];
      });

      this.series.forEach((item) => {
        item.data = [];
      });
      // chart.setOption({ series: this.series });
      data.forEach((item) => {
        this.handleMessage(item);
      });

      let temp = Object.assign(this.series);
      temp.forEach(item => {
        if (Object.prototype.hasOwnProperty.call(seriesData, item.name)) {
          item.data = seriesData[item.name]
        }
      });
      this.series = temp;

      this.$nextTick(() => {
        chart &&
          chart.setOption({
            series: this.series,
          });
      });
    },
    handleMessage(data) {
      Object.keys(data).forEach((k) => {
        if (this.legendData.includes(k)) {
          seriesData[k].push({
            name: k,
            value: [data.timestamp, data[k]],
          });
        }
      });
    },
    initChart() {
      chart = echarts.init(this.$el, "macarons");
      this.setOptions();
    },
    setOptions() {
      chart.setOption({
        title: {
          text: "EVM",
        },
        xAxis: {
          type: "time",
          splitLine: {
            show: false,
          },
          // data: xAxisTitle,
          // boundaryGap: false,
          // axisTick: {
          //   show: false,
          // },
          axisLabel: {
            formatter: "{HH}:{mm}:{ss}",
          },
        },
        yAxis: {
          type: "value",
          scale: true,
          splitLine: {
            show: false,
          },
        },
        // grid: {
        //   left: 10,
        //   right: 10,
        //   bottom: 20,
        //   top: 30,
        //   containLabel: true,
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            animation: false,
          },
          // formatter: function (params) {
          //   params = params[0];
          //   console.log(params);
          //   var date = new Date(params.name);
          //   return (
          //     date.getDate() +
          //     "/" +
          //     (date.getMonth() + 1) +
          //     "/" +
          //     date.getFullYear() +
          //     " : " +
          //     params.value[1]
          //   );
          // },
          padding: [5, 10],
        },
        legend: {
          data: this.legendData,
        },
        series: this.series,
      });
    },
  },
};
</script>