<template>
    <div :elid="wrapId" :style="wrapStyle">
      <div :ref="wrapId" :style="wrapStyleEx"></div>
      <div :style="divStyle">
        <table :id="wrapId + '_table'" :style="tableStyle" cellspacing = "0"></table>
      </div>
    </div>
</template>

<script>
import { OptPolarBar } from "./opt/OptPolarBar";
import { OptCapsuleBar } from "./opt/OptCapsuleBar";
import { OptPeakBar } from "./opt/OptPeakBar";
import { OptGradientsBar } from "./opt/OptGradientsBar";
import { OptTwBar } from "./opt/OptTwBar";
import { OptPmBar } from "./opt/OptPmBar";
import { OptGauge } from "./opt/OptGauge";
import { OptFunnel } from "./opt/OptFunnel";
import { OptScatter } from "./opt/OptScatter";
import { OptAxis } from "./opt/OptAxis";
import { OptPie } from "./opt/OptPie";
import { OptNetPie } from "./opt/OptNetPie";
import { OptRadar } from "./opt/OptRadar";
import stringFormatt from "string-format-js";
import { URLParser } from "../../util/URLParser";
import { FString } from "../../util/FString";
import { ToolTip } from "../../util/ToolTip";
import em from "../../mixins/echarts-mixins";
import $ from "jquery";

export default {
  name: "fviz-echarts",
  mixins: [em],
  data (){
    return {
      timeTicket: null
    }
  },
  watch: {
    'objVal.tooltipAutoHover': {
      handler: function (val, oldVal) {
        if(eval(val)){
         this.autoHover(this.objVal.tooltipAutoHoverTime, this.dataObj.length);
        }else{
          clearInterval(this.timeTicket);
        }
      }
    },
    'objVal.tooltipAutoHoverTime': {
      handler: function(val, oldVal){
        if(eval(this.objVal.tooltipAutoHover)){
         this.autoHover(val, this.dataObj.length);
        }else{
          clearInterval(this.timeTicket);
        }
      }
    }
  },
  computed: {
    wrapStyleEx: {
      get() {
        let style = {};
        if (this.objVal.layoutMode == 'absolute') {
        	style["position"] = "relative";
          style["width"] = this.objVal.fwidth - 2 + "px";
          style["height"] = this.objVal.fheight - 1 +  "px";
          if(this.objVal.tableShow && eval(this.objVal.tableShow)){
            style["height"] = this.objVal.fheight - this.objVal.tableHeight - 2 + "px";
            if(this.objVal.vizType == "funnel" || this.objVal.vizType == "gauge"){
              style["height"] = this.objVal.fheight + "px";
            }
          }
        }else{
          style["width"] = "100%";
          style["height"] = "100%";
          if(this.objVal.tableShow && eval(this.objVal.tableShow)){
            style["height"] = (100 - this.objVal.tableHeightPercent) + "%";
          }
        };
        return style;
      }
    },
    tableStyle: {
      get() {
        let style = {
          width: "100%",
          height: this.objVal.tableHeight - 5 + "px",
          border: "1px solid #EEEEEE"
        };
        return style;
      }
    },
    divStyle: {
      get() {
        let style = {};
        if (this.objVal.layoutMode == 'absolute') {
          style["position"] = "relative";
          style["width"] = this.objVal.fwidth - 2 + "px";
          style["height"] = this.objVal.tableHeight - 2 +  "px";
          style["overflow"] = "auto";
        }else{
          style["width"] = "100%";
          style["height"] = this.objVal.tableHeightPercent + "%";
          style["overflow"] = "auto";
        }
        return style;
      }
    }
  },
  methods: {
    getOptions() {
      let me = this;
      let opts = {};
      //绘图网格设置
      if (me.objVal.gridEnable && eval(me.objVal.gridEnable)) {
        opts.grid = {};
        if (me.objVal.gridLeft) {
          if(me.objVal.gridWidth){
            this.updateProp("gridLeft", "");
          }else{
            opts.grid.left = me.objVal.gridLeft;
          }
        }
        if (me.objVal.gridTop) {
          if(me.objVal.gridHeight){
            this.updateProp("gridTop", "");
          }else{
           opts.grid.top = me.objVal.gridTop;
          }
        }
        if (me.objVal.gridRight) {
          if(me.objVal.gridWidth){
            this.updateProp("gridRight", "");
          }else{
            opts.grid.right = me.objVal.gridRight;
          }
        }
        if (me.objVal.gridBottom) {
          if(me.objVal.gridHeight){
            this.updateProp("gridBottom", "");
          }else{
            opts.grid.bottom = me.objVal.gridBottom;
          }
        }
        if (me.objVal.gridWidth) {
          //左右距离同时有值，重置宽度为空
          if (me.objVal.gridLeft && me.objVal.gridRight) {
            this.updateProp("gridWidth", "");
          } else {
            opts.grid.width = me.objVal.gridWidth;
            opts.grid.left = 0;
          }
        }
        if (me.objVal.gridHeight) {
          //上下距离同时有值重置高度为空
          if (me.objVal.gridTop && me.objVal.gridBottom) {
            this.updateProp("gridHeight", "");
          } else {
            if(eval(me.objVal.legendShow) || eval(me.objVal.titleShow) || me.objVal.subTitleText){
              opts.grid.height = me.objVal.gridHeight;
            }else{
              opts.grid.height = me.objVal.gridHeight;
              opts.grid.top = 0;
            }
          }
        }
        if (me.objVal.gridContainLabel) {
          opts.grid.containLabel = eval(me.objVal.gridContainLabel);
        }
      }

      //原生图形元素组件
      if (
        this.objVal.graphicTextEnable &&
        eval(this.objVal.graphicTextEnable)
      ) {
        let evalResult = null;
        let textStr = this.objVal.graphicTextContent;
        //表达式不为空
        if (this.objVal.graphicTextExpress) {
          let evalStr = this.objVal.graphicTextExpress;
          console.log("原始表达式 :>> ", evalStr);
          //匹配大括号内key
          let reg = /{"(.*?)"}/g;
          let keys = [];
          let temp;

          while ((temp = reg.exec(evalStr))) {
            keys.push(temp[1]);
          }

          (this.dataObj || []).forEach(function (obj) {
            keys.forEach(function (k) {
              if (obj.name == k) {
                evalStr = FString.replaceAll(
                  evalStr,
                  '{"' + obj.name + '"}',
                  obj.value
                );
              }
            });
          });
          console.log("计算表达式 : ", evalStr);
          try {
            evalResult = eval(evalStr);
            if (textStr) {
              textStr = textStr.replace("\\n", "\n");
              textStr = textStr.format(evalResult);
            }
          } catch (error) {
            console.error("表达式计算错误 :>> ", error);
          }
        }
        opts.graphic = [
          {
            type: "text",
            left: (this.objVal.graphicTextLeft || 50) + "%",
            top: (this.objVal.graphicTextTop || 50) + "%",
            style: {
              text: textStr,
              textAlign: this.objVal.graphicTextAlign,
              fill: this.objVal.graphicTextColor, //文字的颜色
              fontSize: this.objVal.graphicTextFontSize,
            },
          },
        ];
      }

      //工具栏
      opts.toolbox = {
        right: "50",
        feature: {},
      };

      //开启区域缩放
      if (this.objVal.dataZoomOpen && eval(this.objVal.dataZoomOpen)) {
        opts.toolbox.feature.dataZoom = {
          show: true,
          title: {
            zoom: "选择区域放大",
            back: "还原缩放区域",
          },
        };
      }

      //表单参数、api参数、url参数
      let paramData = this.getQueryParam();
      let titleLink = this.fullPath(this.objVal.titleLink);
      titleLink = URLParser.parse(titleLink, null, paramData);

      let sublink = this.fullPath(this.objVal.subTitleLink);
      sublink = URLParser.parse(sublink, null, paramData);

      //标题
      opts.title = {
        show: eval(this.objVal.titleShow),
        x: this.objVal.titleTextAlign,
        y: this.objVal.titleVerticalAlign,
        text: this.objVal.titleText,
        link: titleLink,
        target: this.objVal.titleTarget,
        subtext: this.objVal.subTitleText,
        sublink: sublink,
        subtarget: this.objVal.subTitleTarget,
        textStyle: {
          color: this.objVal.titleColor,
          fontWeight: this.objVal.titleFontWeight,
          fontSize: this.objVal.titleFontSize,
        },
        subtextStyle: {
          color: this.objVal.subTitleColor,
          fontWeight: this.objVal.subTitleFontWeight,
          fontSize: this.objVal.subTitleFontSize,
        },
      };

      //图例
      opts.legend = {
        show: eval(this.objVal.legendShow),
        orient: this.objVal.legendOrient,
        left: this.objVal.legendLeft,
        top: this.objVal.legendTop,
        textStyle: {
          color: this.objVal.legendFontColor,
          fontSize: this.objVal.legendFontSize,
          fontWeight: this.objVal.legendFontWeight
        },
      };
      // 个别图例包含属性
      if (this.objVal.legendIcon && this.objVal.legendIcon != "default") {
        opts.legend.icon = this.objVal.legendIcon;
      }

      //tooltip
      opts.tooltip = {
        trigger: this.objVal.tooltipTrigger,
        show: eval(this.objVal.tooltipShow),
        backgroundColor: this.objVal.tooltipBackgroudColor || 'rgba(0, 0, 0, 0.5)',
        borderColor: this.objVal.tooltipBackgroudColor || 'rgba(0, 0, 0, 0.5)',
        textStyle: {
          fontSize: this.objVal.tooltipFontSize,
          fontWeight: this.objVal.tooltipFontWeight,
          color: this.objVal.tooltipFontColor
        },
        axisPointer: {
          type: this.objVal.axisPointerType,
          animation: false,
          label: {
            show: eval(this.objVal.axisPointerLabelShow),
            color: this.objVal.axisPointerLabelColor,
            backgroundColor: this.objVal.axisPointerLabelBgColor,
          },
          lineStyle: {
            width: this.objVal.axisPointerLineWidth,
            color: this.objVal.axisPointerLineColor,
            type: this.objVal.axisPointerLineType,
          },
          crossStyle: {
            width: this.objVal.axisPointerLineWidth,
            color: this.objVal.axisPointerLineColor,
            type: this.objVal.axisPointerLineType,
          },
        },
        triggerOn: this.objVal.triggerOnEvent,
        confine: true
      };

      if(eval(this.objVal.tooltipAutoHover)){
        this.autoHover(this.objVal.tooltipAutoHoverTime, this.dataObj.length);
      }

      if(this.objVal.triggerOnEvent == "click"){
        let comCode = this.objVal.comCode;
        switch (comCode) {
          case "fviz-echarts_bar":
          case "fviz-echarts_dy-bar":
          case "fviz-echarts_line-bar":
          case "fviz-echarts_stack-bar":
          case "fviz-echarts_peak-bar":
          case "fviz-echarts_scatter":
          case "fviz-echarts_capsule-bar":
          case "fviz-echarts_gradients-bar":
          case "fviz-echarts_line":
          case "fviz-echarts_dy-line":
          case "fviz-echarts_stack-line":
            opts.tooltip.position = function (point, params, dom, rect, size) {
              return [point[0], '5%'];
            }
            break;
          case "fviz-echarts_tw-bar":
          case "fviz-echarts_pm-bar":
          case "fviz-echarts_flip-bar":
            opts.tooltip.position = function (point, params, dom, rect, size) {
              return {top: point[1], right: '0%'}
            }
            break;
          case "fviz-echarts_polar-bar":
          case "fviz-echarts_radar":
          case "fviz-echarts_pie":
          case "fviz-echarts_ring":
          case "fviz-echarts_rose":
          case "fviz-echarts_nestpie":
          case "fviz-echarts_funnel":
          case "fviz-echarts_gauge":
            opts.tooltip.position = function (point, params, dom, rect, size) {
              return {left: point[0], top: point[1]}
            }
            break;
          default:
            break;
        }
      }

      // 个别图形设置鼠标悬浮的坐标指示器
      if (this.objVal.tooltipAxisPointerType) {
        opts.tooltip.axisPointer = {
          type: this.objVal.tooltipAxisPointerType,
        };
      }

      if (this.objVal.tooltipFormatter) {
        let formatterStr = FString.replaceAll(
          this.objVal.tooltipFormatter,
          /\\n/,
          "<br>"
        );
        opts.tooltip.formatter = function (params) {
          return FString.formatTooltip(formatterStr, params, false);
        };
      }

      //区域缩放
      if (this.objVal.dataZoomOpen && eval(this.objVal.dataZoomOpen)) {
        opts.dataZoom = [
          {
            type: this.objVal.dataZoomType,
            start: this.objVal.dataZoomStart,
            end: this.objVal.dataZoomEnd,
          },
        ];

        if ("slider" == this.objVal.dataZoomType) {
          opts.dataZoom.push({
            type: "inside",
            start: this.objVal.dataZoomStart,
            end: this.objVal.dataZoomEnd,
          });
        }
      }
      //其他个性配置信息
      this.buildOpions(opts);

      if(this.objVal.tableShow && eval(this.objVal.tableShow)){
        $("#" + this.wrapId + "_table").parent().css("display", "block");
      }else{
        $("#" + this.wrapId + "_table").parent().css("display", "none");
      }

      return opts;
    },
    buildTable(factory, opts) {
      let rowData = [];
      let colData = opts.series;
      let tr;
      let titleTr;
      let comCode = this.objVal.comCode;
      if(eval(this.objVal.rowColumnConversion)){
        switch (comCode) {
          case "fviz-echarts_bar": // 柱图
          case "fviz-echarts_dy-bar": // 双Y轴柱图
          case "fviz-echarts_line-bar": // 线柱组合图
          case "fviz-echarts_stack-bar": // 堆积柱图
          case "fviz-echarts_peak-bar": // 山峰柱图
            rowData = opts.xAxis[0].data;
            var colors = eval(this.objVal.colorPaletteList);
            tr = factory.buildTd2(rowData, colData, colors);

            titleTr = factory.buildTh2(rowData);
            break;
          case "fviz-echarts_flip-bar": // 横向柱图
            rowData = opts.xAxis[0].data;
            if(eval(this.objVal.gradientsShow)){
              var colorsDerection = eval(this.objVal.colorDerection);
              var colors = eval(this.objVal.gradientsColorPaletteList);
              tr = factory.buildGradientsTd(rowData, colData, colorsDerection, colors);
            }else{
              var colors = eval(this.objVal.colorPaletteList);
              tr = factory.buildTd2(rowData, colData, colors);
            }

            titleTr = factory.buildTh2(rowData);
            break;
          case "fviz-echarts_pm-bar": // 正负柱图
          case "fviz-echarts_tw-bar": // 双向对比柱图
            var colors = eval(this.objVal.seriesItemColors);
            rowData = opts.xAxis[0].data;
            tr = factory.buildTd2(rowData, colData, colors);

            titleTr = factory.buildTh2(rowData);
            break;
          case "fviz-echarts_capsule-bar": // 胶囊柱图
            var colors = eval(this.objVal.seriesItemColor);
            rowData = opts.xAxis[0].data;
            tr = factory.buildTd2(rowData, colData, colors);

            titleTr = factory.buildTh2(rowData);
            break;
          case "fviz-echarts_gradients-bar": // 渐变色柱图
            rowData = opts.xAxis[0].data;
            if(eval(this.objVal.gradientsShow)){
              var colorsDerection = eval(this.objVal.seriesItemColorDerection);
              var colors = eval(this.objVal.seriesItemColorStops);
              tr = factory.buildGradientsTd(rowData, colData, colorsDerection, colors);
            }else{
              var colors = eval(this.objVal.colorPaletteList);
              tr = factory.buildTd2(rowData, colData, colors);
            }

            titleTr = factory.buildTh2(rowData);
            break;
          case "fviz-echarts_polar-bar": // 圆形柱状图
            var colors = eval(this.objVal.seriesColors);
            rowData = opts.angleAxis[0].data;
            tr = factory.buildTd2(rowData, colData, colors);

            titleTr = factory.buildTh2(rowData);
            break;
          case "fviz-echarts_line": // 折线图
          case "fviz-echarts_dy-line": // 双Y轴折线图
          case "fviz-echarts_stack-line": // 区域堆积图
            var colors = eval(this.objVal.linePointColor);
            rowData = opts.xAxis[0].data;
            tr = factory.buildTd2(rowData, colData, colors);

            titleTr = factory.buildTh2(rowData);
            break;
          case "fviz-echarts_radar": // 雷达图
            var colors = eval(this.objVal.colorPaletteList);
            rowData = opts.radar.indicator;
            colData = opts.series[0].data;
            tr = factory.buildRadarTd2(rowData, colData, colors);

            var cols = []
            for(var i = 0; i < colData.length; i++){
              cols.push(colData[i].name)
            }
            titleTr = factory.buildTh2(cols);
            break;
          case "fviz-echarts_scatter": // 散点图
            var colors = eval(this.objVal.seriesItemStyleColor);
            rowData = opts.xAxis[0].data;
            tr = factory.buildTd2(rowData, colData, colors);

            titleTr = factory.buildTh2(rowData);
            break;
          default:
            titleTr = "";
            rowData = [];
            break;
        }
      }else{
        switch (comCode) {
          case "fviz-echarts_bar": // 柱图
          case "fviz-echarts_dy-bar": // 双Y轴柱图
          case "fviz-echarts_line-bar": // 线柱组合图
          case "fviz-echarts_stack-bar": // 堆积柱图
          case "fviz-echarts_peak-bar": // 山峰柱图
            var colors = eval(this.objVal.colorPaletteList);
            titleTr = factory.buildTh(colData, colors);

            rowData = opts.xAxis[0].data;
            tr = factory.buildTd(rowData, colData);
            break;
          case "fviz-echarts_flip-bar": // 横向柱图
            if(eval(this.objVal.gradientsShow)){
              var colorsDerection = eval(this.objVal.colorDerection);
              var colors = eval(this.objVal.gradientsColorPaletteList);
              titleTr = factory.buildGradientsTh(colData, colorsDerection, colors);
            }else{
              var colors = eval(this.objVal.colorPaletteList);
              titleTr = factory.buildTh(colData, colors);
            }

            rowData = opts.xAxis[0].data;
            tr = factory.buildTd(rowData, colData);
            break;
          case "fviz-echarts_pm-bar": // 正负柱图
          case "fviz-echarts_tw-bar": // 双向对比柱图
            var colors = eval(this.objVal.seriesItemColors);
            titleTr = factory.buildTh(colData, colors);

            rowData = opts.xAxis[0].data;
            tr = factory.buildTd(rowData, colData)
            break;
          case "fviz-echarts_capsule-bar": // 胶囊柱图
            var colors = eval(this.objVal.seriesItemColor);
            titleTr = factory.buildTh(colData, colors);

            rowData = opts.xAxis[0].data;
            tr = factory.buildTd(rowData, colData);
            break;
          case "fviz-echarts_gradients-bar": // 渐变色柱图
            if(eval(this.objVal.gradientsShow)){
              var colorsDerection = eval(this.objVal.seriesItemColorDerection);
              var colors = eval(this.objVal.seriesItemColorStops);
              titleTr = factory.buildGradientsTh(colData, colorsDerection, colors);
            }else{
              var colors = eval(this.objVal.colorPaletteList);
              titleTr = factory.buildTh(colData, colors);
            }

            rowData = opts.xAxis[0].data;
            tr = factory.buildTd(rowData, colData);
            break;
          case "fviz-echarts_polar-bar": // 圆形柱状图
            var colors = eval(this.objVal.seriesColors);
            titleTr = factory.buildTh(colData, colors);

            rowData = opts.angleAxis[0].data;
            tr = factory.buildTd(rowData, colData);
            break;
          case "fviz-echarts_line": // 折线图
          case "fviz-echarts_dy-line": // 双Y轴折线图
          case "fviz-echarts_stack-line": // 区域堆积图
            var colors = eval(this.objVal.linePointColor);
            titleTr = factory.buildTh(colData, colors);

            rowData = opts.xAxis[0].data;
            tr = factory.buildTd(rowData, colData);
            break;
          case "fviz-echarts_radar": // 雷达图
            var colors = eval(this.objVal.colorPaletteList);
            rowData = opts.radar.indicator;

            titleTr = factory.buildTh(rowData, colors);

            colData = opts.series[0].data;
            tr = factory.buildRadarTd(colData);
            break;
          case "fviz-echarts_scatter": // 散点图
            var colors = eval(this.objVal.seriesItemStyleColor)
            titleTr = factory.buildTh(colData, colors);

            rowData = opts.xAxis[0].data;
            tr = factory.buildTd(rowData, colData);
            break;
          case "fviz-echarts_pie": // 饼图
          case "fviz-echarts_ring": // 环形饼图
          case "fviz-echarts_rose": // 玫瑰饼图
            var colors = eval(this.objVal.colorPaletteList);
            titleTr = "";
            rowData = opts.series.data;
            tr = factory.buildPieTd(rowData, colors);
            break;
          case "fviz-echarts_nestpie": // 嵌套饼图
            var colors = eval(this.objVal.colorPaletteList);
            titleTr = "";

            rowData = opts.series;
            tr = factory.buildNestpieTd(rowData, colors);
            break;
          default:
            titleTr = "";
            rowData = [];
            break;
        }
      }

      $("#" + this.wrapId + "_table").empty();
      $("#" + this.wrapId + "_table").append(titleTr);
      $("#" + this.wrapId + "_table").append(tr);

      // 设置表格样式
      $("#" + this.wrapId + "_table th").css({
        border: '1px solid #EEEEEE',
        textAlign: "center",
        color: this.objVal.legendFontColor,
        fontSize: this.objVal.legendFontSize + "px",
        fontWeight: this.objVal.legendFontWeight,
      });

      $("#" + this.wrapId + "_table th span").css({
        display: "flex",
        "justify-content": "center",
        "align-items": "center",
      });

      $("#" + this.wrapId + "_table td").css({
        border: '1px solid #EEEEEE',
        textAlign: 'center',
        padding: "5px 10px",
        color: this.objVal.legendFontColor,
        fontSize: this.objVal.legendFontSize + "px",
        fontWeight: this.objVal.legendFontWeight,

      });

      $("#" + this.wrapId + "_table td span").css({
        display: "flex",
        "justify-content": "center",
        "align-items": "center",
      });
    },
    buildOpions(opts) {
      //有坐标轴的控件
      if ("sql" == this.objVal.dataType || "api" == this.objVal.dataType || "static" == this.objVal.dataType
        || "dataset" == this.objVal.dataType) {
        let factory = null;
        let vizType = this.objVal.vizType;
        switch (vizType) {
          case "line": //折线图
          case "bar": //柱图
            factory = new OptAxis(opts, this);
            break;
          case "nestpie": //嵌套饼图
            factory = new OptNetPie(opts, this);
            break;
          case "pie": //饼图
            factory = new OptPie(opts, this);
            break;
          case "scatter": //散点图
            factory = new OptScatter(opts, this);
            break;
          case "funnel": //漏斗图
            factory = new OptFunnel(opts, this);
            break;
          case "gauge": //仪表盘
            factory = new OptGauge(opts, this);
            break;
          case "radar": //雷达图
            factory = new OptRadar(opts, this);
            break;
          case "pm-bar": //正负柱图
            factory = new OptPmBar(opts, this);
            break;
          case "tw-bar": //双向对比柱图
            factory = new OptTwBar(opts, this);
            break;
          case "gradients-bar": //渐变色柱图
            factory = new OptGradientsBar(opts, this);
            break;
          case "peak-bar": //山峰柱图
            factory = new OptPeakBar(opts, this);
            break;
          case "capsule-bar": //胶囊柱图
            factory = new OptCapsuleBar(opts, this);
            break;
          case "polar-bar": // 圆形柱状图
            factory = new OptPolarBar(opts, this);
            break;
          default:
            factory = null;
            break;
        }
        if (factory) {
          factory.build();
        }
        // 构建表格数据集
        this.buildTable(factory, opts);
      } else {
        this.chart.setOption({
          xAxis: {
            data: this.objVal.renderData.categories,
          },
          series: this.objVal.renderData.series,
        });
      }
    },
    //绑定事件
    bindEvent() {
      if (this.chart) {
        let me = this;
        this.chart.on("click", function (params) {
          //类目名称
          let name = params.name;
          //系列名称
          let seriesName = params.seriesName;

          //组件id
          let comId = me.objVal.id;

          //控件模板中配置变量赋值
          //id
          if (eval(comId) && eval(comId).hasOwnProperty("fvizId")) {
            let dataIndex = params.dataIndex;

            if (me.dataObj[dataIndex]["id"]) {
              eval(comId)["fvizId"] = me.dataObj[dataIndex]["id"];
            }
          }
          //分类名称
          if (eval(comId) && eval(comId).hasOwnProperty("fvizName")) {
            eval(comId)["fvizName"] = name;
          }

          //系列名称（饼图类没有）
          if (eval(comId) && eval(comId).hasOwnProperty("fvizSeriesName")) {
            eval(comId)["fvizSeriesName"] = seriesName;
          }

          //联动
          if (eval(comId) && eval(comId).chain) {
            eval(comId).chain();
          }

          //下钻
          if (eval(comId) && eval(me.objVal.drillOpen) && eval(comId).drill) {
            eval(comId).drill();
          }
        });

        //X轴名称太长鼠标提示
        this.chart.on("mouseover", function (param) {
          var xLabelTip =
            (param.value || "").length > me.objVal.xLabelTextLength
              ? true
              : false;

          if (param.componentType == "xAxis" && xLabelTip) {
            var offsetX;
            var offsetY;
            // 设计器模式下
            if(!me.preview){
              offsetX = param.event.offsetX + 10;
              offsetY = param.event.offsetY + 10;
            }else{
              if(me.objVal.layoutMode == "static"){
                offsetX = param.event.event.clientX + 10;
                offsetY = param.event.offsetY + 10;
              }else{
                offsetX = param.event.offsetX + 10;
                offsetY = param.event.offsetY + 10;
              }
            }

            ToolTip.createTip({
              elid: me.wrapId,
              text: param.value,
              left: offsetX,
              top: offsetY,
            });
          }

          if(param.componentType == "series"){
            clearInterval(me.timeTicket);
            me.chart.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
              dataIndex: param.dataIndex
            });
            me.chart.dispatchAction({
              type: "highlight",
              seriesIndex: 0,
              dataIndex: param.dataIndex
            });
            me.chart.dispatchAction({
              type: "showTip",
              seriesIndex: 0,
              dataIndex: param.dataIndex
            });
          }
        });

        this.chart.on("mouseout", function (param) {
          var xLabelTip =
            (param.value || "").length > me.objVal.xLabelTextLength
              ? true
              : false;

          if (param.componentType === "xAxis" && xLabelTip) {
            ToolTip.removeTip({ elid: me.wrapId });
          }

          if(param.componentType == "series"){
            if(eval(me.objVal.tooltipAutoHover)){
              me.autoHover(me.objVal.tooltipAutoHoverTime, me.dataObj.length);
            }
          }

        });
      }
    },
    autoHover(time, num){
      let me = this;
      let count = 0;
      clearInterval(me.timeTicket);
      me.timeTicket = setInterval(timeTicketHandler, time);

      function timeTicketHandler(){
        me.chart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: count == 0 ? (num - 1) : count - 1
        });
        me.chart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: count
        });
        me.chart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: count,
          position: 'right'
        });
        count = count % num;
        count++;
        if (count > (num - 1)) {
          count = 0
        }
      }
    },
  },
  destroyed() {
    clearInterval(this.timeTicket);
  },
};
</script>

<style scoped >
</style>
