var FChart = {
  _xAxis: [],
  _series: [],
  _currentPage: 1,
  _pageSize: 100,
  _progress: 0,
  _size: 200,
  /**
   * 创建折线图
   */
  genLineChart: function (chart, xAxis, series, merge, option, onYformatter) {
    var that = this;

    this._xAxis = xAxis;
    this._series = series;

    var fontSize = this.fGetChartFontSize();
    if (option == undefined) {
      option = {
        animationEasing: 'elasticOut',
        animationDelayUpdate: function (idx) {
          return idx * 5;
        },
        // title: {
        //     text: '在线监测数据',
        //     textStyle:{
        //         fontSize: fontSize
        //     }
        // },
        toolbox: {
          bottom: 0,
          feature: {
            dataZoom: {},
            magicType: {
              type: ['line', 'bar'],
            },
            // dataView: {},
            // saveAsImage: {
            //     pixelRatio: 2
            // },
            restore: {},
          },
        },
        tooltip: {
          textStyle: {
            fontSize: fontSize,
          },
        },
        legend: {
          type: 'scroll',
          data: [],
          left: 0,
          textStyle: {
            fontSize: fontSize,
            color: 'white',
          },
        },
        xAxis: {
          name: '时间',
          data: that._xAxis,
          axisLabel: {
            textStyle: {
              fontSize: fontSize,
            },
            color: '#ffffff',
            textBorderColor: '#fff',
          },
          axisTick: {
            lineStyle: {
              color: 'white',
            },
            intervel: 0,
            inside: false,
          },

          nameTextStyle: {
            color: '#ffffff',
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff',
            },
          },
        },
        yAxis: {
          name: '浓度(μg/m³)',
          axisLabel: {
            textStyle: {
              fontSize: fontSize,
            },
            formatter: function (value) {
              var texts = [];
              if (typeof onYformatter === 'function') {
                texts.push(onYformatter(value));
              } else {
                texts.push(value);
              }
              return texts;
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'white',
            },
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: 'white',
            },
          },
          minInterval: 1,
        },
        series: [],
      };
    }
    if (this._series != undefined) {
      option.series = [];
      option.legend.data = [];
      for (let i = 0; i < this._series.length; i++) {
        const e = this._series[i];
        if (e.show) {
          option.series.push(e);
          option.legend.data.push(e.name);
        }
      }
    }

    chart.setOption(option, {
      notMerge: merge == true ? false : true,
    });
    var wH = $(window).height();
    var wW = $(window).width();

    var minW = 700;
    var minH = 280;

    var width = wW * 0.3 > minW ? wW * 0.3 : minW;
    var height = wH * 0.35 > minH ? wH * 0.35 : minH;
    chart.resize({
      width: width,
      height: height,
    });

    return option;
  },

  /**
   * 切换图例
   */
  lineChartOnLegend: function (chart, xAxis, series, option, progress, size) {
    this._xAxis = xAxis;
    this._series = series;

    // option.xAxis.data = this._xAxis;
    // if (this._series != undefined) {
    //   option.series = [];
    //   option.legend.data = [];
    //   for (let i = 0; i < this._series.length; i++) {
    //     const e = this._series[i];
    //     if (e.show) {
    //       option.series.push(e);
    //       option.legend.data.push(e.name);
    //     }
    //   }
    // }

    // chart.setOption(option, { notMerge: true });
    // return option;
    return this.lineChartOnPage2({
      chart: chart,
      option: option,
      progress: progress == undefined ? FChart._progress : progress,
      size: size == undefined ? FChart._size : size,
    });
  },

  /**
   * 折线图分页切换
   */
  lineChartOnPage: function ({
    chart,
    option,
    currentPage = 1,
    pageSize = 100,
  }) {
    this._currentPage = currentPage;
    this._pageSize = pageSize;

    var xAxis = this._xAxis;
    var series = this._series;

    option.series = [];
    option.xAxis.data = [];
    option.legend.data = [];

    for (let i = pageSize * (currentPage - 1); i < xAxis.length; i++) {
      if (i > pageSize * currentPage - 1) {
        break;
      }
      option.xAxis.data.push(xAxis[i]);
    }

    for (let i = 0; i < series.length; i++) {
      const e = series[i];
      if (e.show) {
        var s = Util.deepCopy(e);
        s.data = [];
        for (let y = pageSize * (currentPage - 1); y < e.data.length; y++) {
          if (y > pageSize * currentPage - 1) {
            break;
          }
          const f = e.data[y];
          s.data.push(f);
        }
        option.series.push(s);
        option.legend.data.push(s.name);
      }
    }

    chart.setOption(option, {
      notMerge: true,
    });
  },

  lineChartOnPage2: function ({ chart, option, progress = 0, size = 200 }) {
    this._progress = progress;
    this._size = size;

    var xAxis = this._xAxis;
    var series = this._series;

    option.series = [];
    option.xAxis.data = [];
    option.legend.data = [];

    var len = xAxis.length - size + 1;
    len = len > 0 ? len : xAxis.length;
    var first = Math.round(len * progress);
    var last = first + size - 1;
    if (last > xAxis.length) {
      last = xAxis.length;
      first = last - (last < size ? last : size);
    }

    for (let i = first; i < last; i++) {
      option.xAxis.data.push(xAxis[i]);
    }

    for (let i = 0; i < series.length; i++) {
      const e = series[i];
      if (e.show) {
        var s = Util.deepCopy(e);
        s.data = [];
        for (let y = first; y < last; y++) {
          const f = e.data[y];
          s.data.push(f);
        }
        option.series.push(s);
        option.legend.data.push(s.name);
      }
    }

    chart.setOption(option, {
      notMerge: true,
    });

    return option;
  },

  /**
   * 定位跳转索引点
   * @param {*} chart
   * @param {*} option
   * @param {*} index
   * @param {*} factorName 当前地图展示的监测因子名字
   */
  locate(chart, option, index, factorName) {
    // 1. 定位点应该展示在趋势图中间，因此定位百分比往前偏移当前_size的一半
    let i = index - parseInt(this._size / 2);
    // 2. 确保索引不会超出范围
    i = i < 0 ? 0 : i;
    // 3. 获取索引对应的进度百分比
    const progress = i / (this._xAxis.length - this._size + 1);

    for (const iterator of this._series) {
      if (iterator.name == factorName) {
        iterator.markLine = {
          symbol: 'none',
          data: [
            {
              name: '选中',
              xAxis: this._xAxis[index],
              label: {
                color: 'white',
              },
              lineStyle: {
                color: 'yellow',
              },
            },
          ],
        };
      } else {
        iterator.markLine = undefined;
      }
    }
    this.lineChartOnPage2({
      chart,
      option,
      progress,
      size: this._size,
    });

    return progress;
  },

  /**
   * 获取合适的字体大小
   */
  fGetChartFontSize: function () {
    const dpr = window.devicePixelRatio;
    let fontSize = 12;
    if (dpr == 2) {
      fontSize = 17;
    } else if (dpr == 3) {
      fontSize = 24;
    } else if (dpr > 3) {
      fontSize = 24;
    }
    return fontSize;
  },

  /**
   * 创建仪表盘
   */
  genGauge: function (chart, name, value) {
    var fontSize = this.fGetChartFontSize();
    var option = {
      title: {
        text: name,
        textStyle: {
          color: 'white',
          fontSize: fontSize,
        },
        left: 'center',
      },
      textStyle: {
        color: '#ffffff',
        fontSize: 10,
      },
      tooltip: {
        formatter: '{a} <br/>{b} : {c}%',
      },
      toolbox: {
        // feature: {
        //     restore: {},
        //     saveAsImage: {}
        // }
      },
      series: [
        {
          name: name,
          type: 'gauge',
          detail: {
            color: 'white',
            formatter: '{value}',
            textStyle: {
              fontSize: fontSize,
            },
          },
          splitLine: {
            lineStyle: {
              color: 'white',
            },
          },
          axisTick: {
            lineStyle: {
              color: 'white',
            },
          },
          axisLabel: {
            color: 'white',
            fontSize: 10,
          },
          axisLine: {
            lineStyle: {
              color: [
                [0.2, '#2afd2a'],
                [0.8, '#f1e74d'],
                [1, '#c23531'],
              ],
            },
          },
          itemStyle: {
            color: 'white',
          },
          data: [
            {
              value: value,
              name: '',
            },
          ],
          min: 0,
          max: 1000,
        },
      ],
    };
    chart.setOption(option);
    return option;
  },
};