<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";
// import { getDateTimeString } from "@/utils/utils";

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

var data = [
  ["2000-06-05", 116],
  ["2000-06-06", 129],
  ["2000-06-07", 135],
  ["2000-06-08", 86],
  ["2000-06-09", 73],
  ["2000-06-10", 85],
  ["2000-06-11", 73],
  ["2000-06-12", 68],
  ["2000-06-13", 92],
  ["2000-06-14", 130],
  ["2000-06-15", 245],
  ["2000-06-16", 139],
  ["2000-06-17", 115],
  ["2000-06-18", 111],
  ["2000-06-19", 309],
  ["2000-06-20", 206],
  ["2000-06-21", 137],
  ["2000-06-22", 128],
  ["2000-06-23", 85],
  ["2000-06-24", 94],
  ["2000-06-25", 71],
  ["2000-06-26", 106],
  ["2000-06-27", 84],
  ["2000-06-28", 93],
  ["2000-06-29", 85],
  ["2000-06-30", 73],
  ["2000-07-01", 83],
  ["2000-07-02", 125],
  ["2000-07-03", 107],
  ["2000-07-04", 82],
  ["2000-07-05", 44],
  ["2000-07-06", 72],
  ["2000-07-07", 106],
  ["2000-07-08", 107],
  ["2000-07-09", 66],
  ["2000-07-10", 91],
  ["2000-07-11", 92],
  ["2000-07-12", 113],
  ["2000-07-13", 107],
  ["2000-07-14", 131],
  ["2000-07-15", 111],
  ["2000-07-16", 64],
  ["2000-07-17", 69],
  ["2000-07-18", 88],
  ["2000-07-19", 77],
  ["2000-07-20", 83],
  ["2000-07-21", 111],
  ["2000-07-22", 57],
  ["2000-07-23", 55],
  ["2000-07-24", 60],
];

var dateList = data.map(function (item) {
  return item[0];
});
var valueList = data.map(function (item) {
  return item[1];
});

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "600px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      chart: null,
      series: [
        {
          name: "heap_total_size",
          type: "line",
          showSymbol: false,
          emphasis: {
            scale: false,
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: seriesData.heap_total_size,
        },
        {
          name: "heap_used_size",
          type: "line",
          showSymbol: false,
          emphasis: {
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: seriesData.heap_used_size,
        },
        {
          name: "stack_total_size",
          type: "line",
          showSymbol: false,
          emphasis: {
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: seriesData.stack_total_size,
        },
        {
          name: "stack_used_size",
          type: "line",
          showSymbol: false,
          emphasis: {
            focus: "series",
            blurScope: "coordinateSystem",
          },
          data: seriesData.stack_used_size,
        },
      ],
      legendData: [
        "heap_total_size",
        "heap_used_size",
        "stack_total_size",
        "stack_used_size",
      ],
      options: {
        tooltip: {
          trigger: "axis",
        },
        visualMap: [],
        title: [],
        xAxis: [],
        yAxis: [],
        grid: [],
        series: []
      },
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.handleMessage(val);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    handleMessage(data) {
      console.log(data);
      // Object.keys(data).forEach((k) => {
      //   if (this.legendData.includes(k))
      //     seriesData[k].push({
      //       name: k,
      //       value: [getDateTimeString(new Date()), data[k]],
      //     });
      // });

      this.$nextTick(() => {
        // this.chart &&
        //   this.chart.setOption({
        //     series: this.series,
        //   });
      });
    },
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions();
    },
    initOption() {},
    setOptions() {
      this.chart.setOption({
        // Make gradient line here
        visualMap: [
          {
            show: false,
            type: "continuous",
            seriesIndex: 0,
            min: 0,
            max: 400,
          },
          {
            show: false,
            type: "continuous",
            seriesIndex: 1,
            dimension: 0,
            min: 0,
            max: dateList.length - 1,
          },
        ],
        title: [
          {
            left: "center",
            text: "Gradient along the y axis",
          },
          {
            top: "300px",
            left: "center",
            text: "Gradient along the x axis",
          },
        ],
        tooltip: {
          trigger: "axis",
        },
        xAxis: [
          {
            data: dateList,
            gridIndex: 0,
          },
          {
            data: dateList,
            gridIndex: 1,
          },
        ],
        yAxis: [
          {
            gridIndex: 0,
          },
          {
            gridIndex: 1,
          },
        ],
        grid: [
          {
            bottom: "350px",
          },
          {
            top: "350px",
          },
        ],
        series: [
          {
            type: "line",
            showSymbol: false,
            data: valueList,
            xAxisIndex: 0,
            yAxisIndex: 0,
          },
          {
            type: "line",
            showSymbol: false,
            data: valueList,
            xAxisIndex: 1,
            yAxisIndex: 1,
          },
        ],
      });
    },
  },
};
</script>
