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

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

let chart = undefined;
export default {
  name: "realLineChart",
  props: ["list", "tab", "channelId"],
  data: function() {
    return {
      leftList: [],
      rightList: [],
      chart: undefined,
    };
  },
  filters: {},
  methods: {
    format(v) {
      if (isNaN(v)) return 0;
      let o = v.toFixed(4);
      if (v > 10000) {
        o = (v / 10000).toFixed(4) + "万";
      }

      return o;
    },
    formatte(list) {
      let keys = [],
        values = [],
        title = "实时市占率";
      list.map((v, i) => {
        if (v && v.length) {
          values.push([]);
          v.map(o => {
            i === 0 && keys.push(o.timestamp);
            values[values.length - 1].push(o.tv_ratings * 100);
          });
        }
      });
      return {
        title,
        keys,
        values,
      };
    },
    updata(data) {
      if (!chart) return;
      let chartData = this.formatte(data);
      chart.setOption({
        title: {
          text: chartData.title,
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          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];
              let l = par.name.split("");
              if (t === "") {
                t = l[8] + l[9] + "时" + l[10] + l[11] + "分";
                if (this.tab === "1min") t += l[12] + l[13] + '秒';
                t += '<br />';
              }
              out +=
                this.getTvName(this.channelId[i]) +
                ": " +
                this.format(par.value) +
                "% <br />";
            }
            return t + out;
          },
        },
        grid: { left: 150, top: "10%", buttom: 0, right: 100 },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: chartData.keys,
          axisLabel: {
            formatter: arr => {
              let l = arr.split("");
              let t = l[8] + l[9] + ":" + l[10] + l[11];
              if (this.tab === "1min") t += ":" + l[12] + l[13];
              return t;
            },
          },
        },
        yAxis: {
          type: "value",
          scale: true,
        },
        series: chartData.values.map(v => {
          return {
            type: "line",
            data: v,
            showAllSymbol: false,
          };
        }),
      },true);
    },
    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.realLineChart) return;
      chart = echarts.init(this.$refs.realLineChart);
      let chartData = this.formatte(this.list);
      chart.resize({
        height: (this.$refs.realLineChart.offsetWidth * 6) / 16,
      });
      var option = {
        tooltip: {
          trigger: "axis",
          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];
              let l = par.name.split("");
              if (t === "") {
                t = l[8] + l[9] + "时" + l[10] + l[11] + "分";
                if (this.tab === "1min") t += l[12] + l[13] + '秒';
                t += '<br />';
              }
              out +=
                this.getTvName(this.channelId[i]) +
                ": " +
                this.format(par.value) +
                "% <br />";
            }
            return t + out;
          },
        },
        title: {
          text: chartData.title,
          left: "center",
        },
        grid: { left: 150, top: "10%", buttom: 0, right: 100 },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: chartData.keys,
          axisLabel: {
            formatter: arr => {
              let l = arr.split("");
              let t = l[8] + l[9] + ":" + l[10] + l[11];
              if (this.tab === "1min") t += ":" + l[11] + l[12];
              return t;
            },
          },
        },
        yAxis: {
          type: "value",
          scale: true,
        },
        series: chartData.values.map(v => {
          return {
            type: "line",
            data: v,
            showAllSymbol: false,
          };
        }),
      };

      option && chart.setOption(option);
    },
  },
  mounted() {
    this.createChart();
  },
  beforeUnmount: function() {
    chart.dispose();
  },
  components: {},
};
</script>
<style></style>
