<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";

const seriesData = {
  frag_pct: [],
  free_biggest_size: [],
  free_cnt: [],
  free_size: [],
  total_size: [],
  used_cnt: [],
  used_pct: [],
};

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 {
      chart: null,
      series: [
        {
          name: "frag_pct",
          type: "line",
          showSymbol: false,
          emphasis: {
            scale: false,
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: [],
        },
        {
          name: "free_biggest_size",
          type: "line",
          showSymbol: false,
          emphasis: {
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: [],
        },
        {
          name: "free_cnt",
          type: "line",
          showSymbol: false,
          emphasis: {
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: [],
        },
        {
          name: "free_size",
          type: "line",
          showSymbol: false,
          emphasis: {
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: [],
        },
        {
          name: "total_size",
          type: "line",
          showSymbol: false,
          emphasis: {
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: [],
        },
        {
          name: "used_cnt",
          type: "line",
          showSymbol: false,
          emphasis: {
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: [],
        },
        {
          name: "used_pct",
          type: "line",
          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 (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    handleData(data) {
      Object.keys(seriesData).forEach(key => {
        seriesData[key] = []
      });
      this.series.forEach(item => {
        item.data = []
      });
      // this.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(() => {
        this.chart &&
          this.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() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions();
    },
    setOptions() {
      this.chart.setOption({
        title: {
          text: "LVGL",
        },
        xAxis: {
          type: "time",
          splitLine: {
            show: false,
          },
          axisLabel: {
            formatter: "{HH}:{mm}:{ss}",
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            animation: false,
          },
          padding: [5, 10],
        },
        legend: {
          data: this.legendData,
        },
        series: this.series,
      });
    },
  },
};
</script>
