function getLineOption(datas, title) {
  if (!datas.chartLabels.length) return;

  return {
    title: {
      text: title,
      left: 0
    },
    grid: {
      top: "15%",
      bottom: "18%"
    },
    tooltip: { show: true },
    xAxis: {
      type: "category",
      data: datas.chartLabels,
      axisLabel: {
        fontSize: 14,
        fontWeight: "bold"
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          color: "#e0e0e0"
        }
      },
      axisLine: {
        lineStyle: {
          color: "#333"
        }
      },
      axisLabel: {
        fontSize: 14
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: "数量",
        type: "line",
        smooth: true,
        data: datas.chartData,
        areaStyle: {
          color: "#b23f3a",
          opacity: 0.3
        }
      }
    ]
  };
}

function getPieOption(datas) {
  if (!datas.chartLabels.length) return;
  var seriesData = datas.chartLabels.map(function(item, index) {
    return {
      name: item,
      value: datas.chartData[0][index]
    };
  });
  return {
    grid: {
      top: "24%",
      bottom: "10%"
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
      show: true,
      itemGap: 20,
      itemWidth: 20,
      textStyle: {
        fontSize: 16
      }
    },
    series: [
      {
        name: "数量",
        type: "pie",
        radius: "70%",
        data: seriesData,
        label: {
          show: false
        },
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  };
}

function getBarOption(datas, title) {
  if (!datas.names.length) return;
  return {
    title: {
      text: title,
      left: 0
    },
    grid: {
      top: "15%",
      bottom: "18%"
    },
    tooltip: {
      show: true
    },
    xAxis: {
      type: "category",
      data: datas.names,
      axisLabel: {
        fontSize: 14,
        fontWeight: "bold"
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          color: "#e0e0e0"
        }
      },
      axisLine: {
        lineStyle: {
          color: "#333"
        }
      },
      axisLabel: {
        fontSize: 14
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: "差值和",
        type: "bar",
        barWidth: 30,
        data: datas.dataList,
        label: {
          show: true,
          position: "top",
          color: "#333",
          fontWeight: 600
        }
      }
    ]
  };
}

function getBarGroupOption(datas, title) {
  if (!datas.names.length) return;
  var onePageMaxBarNum = 20;
  var barNum = datas.names.length * datas.dataList.length;
  var xAxis = datas.dataList.map(function(item) {
    return item.name;
  });
  var series = datas.names.map(function(name, index) {
    var data = datas.dataList.map(function(item) {
      return item.data[index];
    });
    return {
      name: name,
      type: "bar",
      data: data,
      barMaxWidth: 30,
      barMinHeight: 2
      // label: {
      //   show: true,
      //   position: "top",
      //   fontSize: 12,
      //   color: "#333",
      //   formatter: function(params) {
      //     return params.value.toFixed(2) + "%";
      //   }
      // }
    };
  });

  var options = {
    title: {
      text: title,
      left: 0
    },
    grid: {
      top: "15%",
      bottom: "10%"
    },
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      },
      formatter: function(params) {
        var label = params[0].axisValueLabel;
        var infos = params.map(function(item) {
          return item.seriesName + "：" + item.value.toFixed(2) + "%";
        });
        infos.unshift(label);
        return infos.join("<br/>");
      }
    },
    legend: {
      data: datas.names,
      right: 0,
      itemWidth: 14,
      textStyle: {
        fontSize: 16
      }
    },
    xAxis: {
      type: "category",
      data: xAxis,
      axisLabel: {
        fontSize: 14,
        fontWeight: "bold"
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: "value",
      splitLine: {
        show: false
      },
      axisLabel: {
        fontSize: 14,
        formatter: function(value, index) {
          return value + "%";
        }
      },
      axisTick: {
        show: false
      }
    },
    series: series
  };

  if (barNum > onePageMaxBarNum) {
    var zoomInitRange = Math.floor((onePageMaxBarNum * 100) / barNum);
    options.grid.bottom = "16%";
    options.dataZoom = [
      {
        type: "inside",
        start: 0,
        end: zoomInitRange
      },
      {
        type: "slider",
        start: 0,
        end: zoomInitRange
      }
    ];
  }

  return options;
}

function getLineGroupOption(datas, title) {
  if (!datas.length) return;
  var names = datas.map(function(item) {
    return item.name;
  });
  var xaxis = datas[0].dataList.map(function(item, index) {
    return index;
  });

  var series = datas.map(function(item) {
    return {
      name: item.name,
      type: "line",
      symbol: "circle",
      smooth: true,
      itemStyle: {
        emphasis: {
          color: "#333"
        }
      },
      data: item.dataList.map(function(num) {
        return num * num;
      })
    };
  });
  return {
    title: {
      text: title,
      left: 0
    },
    grid: {
      top: "15%",
      bottom: "12%"
    },
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      },
      formatter: function(params) {
        var label = params[0].axisValueLabel;
        var infos = params.map(function(item) {
          return item.seriesName + "：" + Math.sqrt(item.value);
        });
        infos.unshift(label);
        return infos.join("<br/>");
      }
    },
    legend: {
      data: names,
      right: 0,
      itemWidth: 14,
      textStyle: {
        fontSize: 16
      }
    },
    xAxis: {
      type: "category",
      data: xaxis,
      axisLabel: {
        show: false,
        fontSize: 14
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: "value",
      interval: 1,
      splitLine: {
        show: false
      },
      axisLabel: {
        fontSize: 14,
        formatter: function(value) {
          var num = Math.sqrt(value);
          return num % 1 ? "" : parseInt(num);
        }
      },
      axisTick: {
        show: false
      }
    },
    dataZoom: [
      {
        type: "inside",
        start: 0,
        end: 30
      },
      {
        type: "slider",
        start: 0,
        end: 30
      }
    ],
    series: series
  };
}

export default {
  getLineOption,
  getPieOption,
  getBarOption,
  getBarGroupOption,
  getLineGroupOption
};
