<template>
  <div class="countryLineChart" ref="countryLineChart"></div>
</template>

<script>
// import * as ethis.charts from "ethis.charts";
import config from "@/config/index";
import * as echarts from "echarts/core";
import { LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  DataZoomComponent,
  GridComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LineChart,
  CanvasRenderer,
  LegendComponent,
  DataZoomComponent,
]);

let lineTypeOneCharts = undefined;

export default {
  name: "countryLineChart",
  props: ["list", "keys", "xName", "toolTipUnit", "notzoom"],
  c: 12,
  data: function() {
    return {
      leftList: [],
      rightList: [],
      chart: undefined,
    };
  },
  filters: {},
  methods: {
    format(v, digit = 4) {
      if (isNaN(v)) return 0;
      let o = v.toFixed(digit);
      if (v > 100000000) {
        o = (v / 100000000).toFixed(digit) + "亿";
      } else if (v > 10000) {
        o = (v / 10000).toFixed(digit) + "万";
      }

      return o;
    },
    formatte(list) {
      let values = [],
        keys = [];
      for (let o = 0; o < list.length; o++) {
        const v = list[o];
        keys.push(v[this.xName]);
        for (let i = 0; i < this.keys.length; i++) {
          const p = this.keys[i];
          if (!values[i]) values[i] = [];
          values[i][o] = v[p.key] * 100;
        }
      }
      return {
        keys,
        values,
      };
    },
    getTvName(tvId) {
      let li = config.channelNameList || [];
      let t = "";
      for (let i = 0; i < li.length; i++) {
        const v = li[i];
        if (v.value !== tvId) continue;
        t = v.label;
        break;
      }
      return t;
    },
    createChart() {
      if (!this.$refs.countryLineChart) return;
      lineTypeOneCharts = echarts.init(this.$refs.countryLineChart);
      let chartData = this.formatte(this.list);
      lineTypeOneCharts.resize({
        height: (this.$refs.countryLineChart.offsetWidth * 6) / 16,
      });
      var option = {
        tooltip: {
          trigger: "axis",
          confine: true,
          triggerOn: "mousemove",
          axisPointer: {
            type: "line",
            axis: "x",
          },
          formatter: params => {
            let out = "";
            let t = "";
            for (let i = 0; i < params.length; i++) {
              const par = params[i];
              if (t === "") {
                t = par.axisValueLabel;
                t += "<br />";
              }
              out +=
                par.seriesName +
                ": " +
                this.format(par.value) +
                (this.toolTipUnit || "%") +
                " <br />";
            }
            return t + out;
          },
        },
        legend: {
          data: this.keys.map(v => v.name),
        },
        grid: { left: 150, top: "10%", buttom: 0, right: 100 },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: chartData.keys,
        },
        yAxis: {
          type: "value",
          scale: true,
          axisLabel: {
            formatter: arr => {
              return this.format(arr, 0);
            },
          },
        },
        series: chartData.values.map((v, i) => {
          return {
            type: "line",
            name: this.keys[i].name,
            data: v,
            showAllSymbol: false,
            smooth: true,
          };
        }),
      };

      !this.notzoom &&
        (option.dataZoom = [
          {
            show: true,
            realtime: true,
            start: 30,
            end: 70,
            xAxisIndex: [0, 1],
          },
          {
            type: "inside",
            realtime: true,
            start: 30,
            end: 70,
            xAxisIndex: [0, 1],
          },
        ]);
      option && lineTypeOneCharts.setOption(option);
    },
  },
  watch: {
    list() {
      if (lineTypeOneCharts) lineTypeOneCharts.dispose();
      this.createChart();
    },
  },
  mounted() {
    if (lineTypeOneCharts) lineTypeOneCharts.dispose();
    this.createChart();
  },
  beforeUnmount: function() {
    lineTypeOneCharts && lineTypeOneCharts.dispose();
  },
  components: {},
};
</script>
<style></style>
