const getMax = datalist => Math.max.apply(null, datalist);

function splitStr(content, len) {
  if (content.length <= len) return content;

  const partCount = Math.ceil(content.length / len);
  const partLen = Math.ceil(content.length / partCount);
  let conts = [];
  for (let i = 0; i < partCount; i++) {
    conts.push(content.slice(i * partLen, (i + 1) * partLen));
  }
  return conts.join("\n");
}

export const getCommonCourseOption = datas => {
  const maxCount = getMax(datas.map(item => item.count));
  const maxNum =
    maxCount >= 100
      ? Math.ceil(maxCount / 100) * 100
      : Math.ceil(maxCount / 10) * 10;
  const dLen = datas.length;
  let option = {
    color: ["#5FC9FA", "#3A5AE5"],
    legend: {
      top: 0,
      right: 6,
      data: ["位置值", "人数"],
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 22,
      textStyle: {
        color: "#363D59",
        fontSize: 12
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none"
      }
    },
    grid: {
      top: "18%",
      bottom: "10%",
      left: 50,
      right: 50
    },
    xAxis: [
      {
        type: "category",
        axisLine: {
          show: true,
          lineStyle: {
            color: "#D3D5E0"
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#EFF0F5"
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: "#6F7482",
          interval: 0,
          fontSize: 12,
          margin: 12,
          lineHeight: 17,
          formatter: value => {
            return splitStr(value, 8);
          }
        },
        data: datas.map(item => item.name)
      }
    ],
    yAxis: [
      {
        type: "value",
        name: "位置值",
        nameTextStyle: {
          color: "#363D59",
          align: "right",
          padding: [10, 7]
        },
        min: -1,
        max: 1,
        splitNumber: 10,
        axisLine: {
          show: true,
          lineStyle: {
            color: "#ffffff"
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#EFF0F5"
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: "#6F7482",
          fontSize: 12
        }
      },
      {
        type: "value",
        name: "人数",
        max: maxNum,
        min: -maxNum,
        splitNumber: 12,
        nameTextStyle: {
          color: "#363D59",
          align: "left",
          padding: [10, 6]
        },
        position: "right",
        axisLine: {
          show: true,
          lineStyle: {
            color: "#ffffff"
          }
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: "#626A82",
          fontSize: 12,
          formatter: value => {
            return value < 0 ? "" : value;
          }
        }
      }
    ],
    series: [
      {
        name: "位置值",
        type: "bar",
        yAxisIndex: 0,
        barMaxWidth: 20,
        data: datas.map(item => item.position)
      },
      {
        name: "人数",
        type: "bar",
        yAxisIndex: 1,
        barMaxWidth: 20,
        data: datas.map(item => item.count)
      }
    ]
  };

  if (dLen > 12) {
    const dataZoomRange = Math.floor((12 / dLen) * 100);
    option.dataZoom = [
      {
        type: "slider",
        xAxisIndex: [0],
        bottom: 15,
        start: 0,
        end: dataZoomRange,
        minSpan: dataZoomRange,
        maxSpan: dataZoomRange,
        backgroundColor: "transparent",
        fillerColor: "#8C94AC",
        borderColor: "transparent",
        handleSize: "0%",
        showDetail: false,
        throttle: 200,
        height: 10
      },
      {
        type: "inside",
        xAxisIndex: [0],
        start: 0,
        end: dataZoomRange
      }
    ];
    option.grid.bottom = "18%";
  }

  return option;
};

export const getCourseOtherOption = datas => {
  const indicator = datas.map(item => {
    return {
      name: item.name,
      max: item.max
    };
  });
  return {
    color: ["#FE5D4E"],
    radar: {
      name: {
        textStyle: {
          fontSize: 12,
          color: "#6F7482"
        }
      },
      nameGap: 10,
      indicator,
      splitArea: {
        areaStyle: {
          color: ["#fff", "#EFF0F5"]
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#E1E3EB"
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#E1E3EB"
        }
      },
      radius: "80%"
    },
    series: [
      {
        type: "radar",
        symbolSize: 8,
        label: {
          show: true,
          formatter(params) {
            return params.data.position[params.dimensionIndex];
          }
        },
        itemStyle: {
          borderWidth: 1
        },
        areaStyle: {
          color: "#FE5D4E",
          opacity: 0.7
        },
        lineStyle: {
          width: 2
        },
        data: [
          {
            name: "偏科",
            value: datas.map(item => item.value),
            position: datas.map(item => item.position)
          }
        ]
      }
    ]
  };
};

export const getScoreAnalyseOption = datas => {
  const series = datas.map((item, index) => {
    return {
      name: item.name,
      type: "line",
      data: item.datas.map(item => item.value),
      lineStyle: {
        width: 0
      },
      areaStyle: {
        opacity: 0.8
      },
      zLevel: index + 1,
      smooth: true,
      symbol: "circle",
      showSymbol: false
    };
  });

  return {
    color: ["#5FC9FA", "#3A5AE5"],
    legend: {
      top: 0,
      right: 6,
      data: datas.map(item => item.name),
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 22,
      textStyle: {
        color: "#363D59",
        fontSize: 12
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line"
      }
    },
    grid: {
      top: "17%",
      bottom: "10%",
      left: 50,
      right: 30
    },
    xAxis: {
      type: "category",
      // name: "分数",
      boundaryGap: false,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#EFF0F5"
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "#6F7482",
        interval: 0,
        fontSize: 12,
        margin: 12
      },
      data: datas[0].datas.map(item => item.name)
    },
    yAxis: {
      type: "value",
      name: "人数",
      nameTextStyle: {
        color: "#363D59",
        align: "right",
        padding: [10, 7]
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#EFF0F5"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "#6F7482",
        fontSize: 12
      }
    },
    series
  };
};

export const getScoreAnalyseRateOption = datas => {
  const series = datas.map(item => {
    return {
      name: item.name,
      type: "bar",
      stack: "比例",
      data: [item.value],
      barWidth: 20
    };
  });

  return {
    color: ["#FE5863", "#FECA57", "#5FC9FA", "#1886FE"],
    legend: {
      bottom: 25,
      left: "center",
      data: datas.map(item => item.name),
      itemWidth: 14,
      itemGap: 22,
      textStyle: {
        color: "#626A82",
        fontSize: 12
      }
    },
    grid: {
      top: "30%",
      bottom: "50%",
      left: "1.5%",
      right: "1.5%"
    },
    yAxis: {
      type: "category",
      axisLine: {
        show: true,
        lineStyle: {
          color: "#C1CBDB"
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    xAxis: {
      type: "value",
      min: 0,
      max: 1,
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#C1CBDB"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "#626A82",
        fontSize: 12,
        formatter: value => {
          return Math.floor(value * 100) + "%";
        }
      }
    },
    series
  };
};

export const getScoreCompareAnalyseOption = datas => {
  let option = {
    color: ["#5FC9FA"],
    tooltip: {
      show: true
    },
    grid: {
      top: "10%",
      bottom: "12%",
      left: 30,
      right: "3%"
    },
    xAxis: {
      type: "category",
      axisLine: {
        show: true,
        lineStyle: {
          color: "#C1CBDB"
        }
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: "#C1CBDB"
        }
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: "#C1CBDB"
        },
        alignWithLabel: true
      },
      axisLabel: {
        color: "#626A82",
        interval: 0,
        fontSize: 12,
        margin: 12,
        rotate: datas.length > 10 ? 15 : 0
      },
      data: datas.map(item => item.name)
    },
    yAxis: {
      type: "value",
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#E8EDF3"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "#626A82",
        fontSize: 12
      }
    },
    series: {
      type: "boxplot",
      boxWidth: [20, 24],
      itemStyle: {
        color: "#5FC9FA",
        borderWidth: 1,
        borderColor: "#92949C"
      },
      data: datas.map(item => {
        return {
          name: item.name,
          value: [item.min, item.q1, item.median, item.q3, item.max]
        };
      }),
      tooltip: {
        formatter: function(param) {
          return [
            param.name,
            "最高分: " + param.value[5],
            "中位线: " + param.value[3],
            "最低分: " + param.value[1]
          ].join("<br/>");
        }
      }
    }
  };

  if (datas.length === 2) {
    const colors = [
      {
        color: "#5FC9FA",
        borderWidth: 1,
        borderColor: "#92949C"
      },
      {
        color: "#3A5AE5",
        borderWidth: 1,
        borderColor: "#92949C"
      }
    ];
    option.series.data = datas.map((item, index) => {
      return {
        name: item.name,
        value: [item.min, item.q1, item.median, item.q3, item.max],
        itemStyle: {
          ...colors[index]
        }
      };
    });
  }

  if (datas.length > 20) {
    const dataZoomRange = Math.floor((20 / datas.length) * 100);
    option.dataZoom = [
      {
        type: "slider",
        xAxisIndex: [0],
        bottom: 30,
        start: 0,
        end: dataZoomRange,
        minSpan: dataZoomRange,
        maxSpan: dataZoomRange,
        backgroundColor: "transparent",
        fillerColor: "#8C94AC",
        borderColor: "transparent",
        handleSize: "0%",
        showDetail: false,
        throttle: 200,
        height: 10
      },
      {
        type: "inside",
        xAxisIndex: [0],
        start: 0,
        end: dataZoomRange
      }
    ];
    option.grid.bottom = "20%";
  }

  return option;
};

export const getAnswerAnalyseOption = datas => {
  const seriesConfig = [
    {
      lineStyle: {
        color: "#FE5D4E",
        type: "dashed"
      }
    },
    {
      lineStyle: {
        color: "#3A5AE5",
        width: 1
      },
      areaStyle: {
        color: "#3A5AE5",
        opacity: 0.8
      }
    }
  ];
  const series = datas.map((item, index) => {
    return {
      name: item.name,
      type: "line",
      data: item.datas.map(item => item.value),
      showSymbol: false,
      symbol: "circle",
      ...seriesConfig[index]
    };
  });
  const dlen = datas[0].datas.length;

  let option = {
    color: ["#FE5D4E", "#3A5AE5"],
    legend: {
      top: 0,
      right: 6,
      data: datas.map(item => item.name),
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 22,
      textStyle: {
        color: "#363D59",
        fontSize: 12
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line"
      }
    },
    grid: {
      top: "13%",
      bottom: "12%",
      left: 45,
      right: 15
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#EFF0F5"
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: "#EFF0F5"
        },
        alignWithLabel: true
      },
      axisLabel: {
        color: "#6F7482",
        interval: 0,
        fontSize: 12,
        margin: 12,
        formatter: value => {
          if (value.length > 5 && dlen > 8)
            return [value.substr(0, 5), value.substr(5)].join("\n");
          return value;
        }
      },
      data: datas[0].datas.map(item => item.name)
    },
    yAxis: {
      type: "value",
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#E8EDF3"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "#6F7482",
        fontSize: 12,
        formatter: "{value}%"
      }
    },
    series
  };

  if (dlen > 12) {
    const dataZoomRange = Math.floor((12 / dlen) * 100);
    option.dataZoom = [
      {
        type: "slider",
        xAxisIndex: [0],
        bottom: 0,
        start: 0,
        end: dataZoomRange,
        minSpan: dataZoomRange,
        maxSpan: dataZoomRange,
        backgroundColor: "transparent",
        fillerColor: "#8C94AC",
        borderColor: "transparent",
        handleSize: "0%",
        showDetail: false,
        throttle: 200,
        height: 10
      },
      {
        type: "inside",
        xAxisIndex: [0],
        start: 0,
        end: dataZoomRange
      }
    ];
    option.grid.bottom = "15%";
  }

  return option;
};

export const getDifficultyAnalyseOption = datas => {
  const colors = ["#2abcff", "#3a5ae5"];
  const xaxis = datas.map(function(item) {
    return item.xaxisLabel;
  });
  const legend = datas[0].list.map(function(item) {
    return item.legendLabel;
  });
  const dictData = {};
  datas.map(function(item) {
    item.list.map(function(elem) {
      if (!dictData[elem.legendLabel]) dictData[elem.legendLabel] = [];
      dictData[elem.legendLabel].push(elem.num);
    });
  });
  const series = legend.map(function(item) {
    return {
      name: item,
      type: "bar",
      barWidth: 15,
      data: dictData[item]
    };
  });
  let options = {
    color: colors,
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    legend: {
      top: 0,
      right: 10,
      data: legend,
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 22,
      textStyle: {
        color: "#363D59",
        fontSize: 12
      }
    },
    grid: {
      left: 10,
      top: 40,
      right: 15,
      bottom: "3%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      data: xaxis,
      axisLabel: {
        color: "#6F7482",
        interval: 0,
        fontSize: 12,
        margin: 12
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#EFF0F5"
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#EFF0F5"
        }
      },
      axisTick: {
        show: false
      },
      axisPointer: {
        type: "shadow"
      }
    },
    yAxis: {
      type: "value",
      name: "得分率",
      nameTextStyle: {
        color: "#363D59",
        align: "right",
        padding: [10, 7]
      },
      axisLabel: {
        color: "#6F7482",
        formatter: "{value}%"
      },
      axisLine: {
        lineStyle: {
          color: "#EFF0F5"
        }
      },
      splitLine: {
        lineStyle: {
          color: "#EFF0F5"
        }
      }
    },
    series
  };

  return options;
};

export const getDistinctionAnalyseOption = datas => {
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      },
      formatter(params) {
        return [
          params[0].axisValue,
          params[0].data.detailName,
          `区分度：${params[0].value}`,
          `容易度：${params[1].value}`
        ].join("<br />");
      }
    },
    legend: {
      top: 0,
      data: ["区分度", "容易度"],
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 22,
      textStyle: {
        color: "#363D59",
        fontSize: 12
      }
    },
    grid: {
      top: "12%",
      bottom: "13%",
      left: 45,
      right: 50
    },
    yAxis: [
      {
        type: "value",
        name: "区分度",
        max: 1,
        min: -1,
        splitNumber: 10,
        nameTextStyle: {
          color: "#363D59",
          align: "right",
          padding: [10, 7]
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#EFF0F5"
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: "#6F7482",
          fontSize: 12
        }
      },
      {
        type: "value",
        name: "容易度",
        max: 1,
        min: -1,
        splitNumber: 10,
        nameTextStyle: {
          color: "#363D59",
          align: "left",
          padding: [10, 6]
        },
        position: "right",
        axisLine: {
          show: true,
          lineStyle: {
            color: "#ffffff"
          }
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: "#626A82",
          fontSize: 12,
          formatter: value => {
            return value < 0 ? "" : value;
          }
        }
      }
    ],
    xAxis: {
      type: "category",
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#EFF0F5"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "#6F7482",
        fontSize: 12,
        rotate: 25,
        interval: 0
      },
      data: datas.map(item => item.name)
    },
    series: [
      {
        type: "bar",
        name: "区分度",
        barMaxWidth: 16,
        itemStyle: {
          color: "#5FC9FA"
        },
        data: datas.map(item => {
          return {
            value: item.validity,
            detailName: item.detailName
          };
        })
      },
      {
        type: "line",
        name: "容易度",
        showSymbol: false,
        smooth: true,
        symbol: "circle",
        yAxisIndex: 1,
        lineStyle: {
          color: "#FE5D4E"
        },
        itemStyle: {
          color: "#FE5D4E"
        },
        data: datas.map(item => {
          return {
            value: item.scoreRate,
            detailName: item.detailName
          };
        })
      }
    ]
  };

  if (datas.length > 15) {
    const dataZoomRange = Math.floor((15 / datas.length) * 100);
    option.dataZoom = [
      {
        type: "slider",
        xAxisIndex: [0],
        bottom: 5,
        start: 0,
        end: dataZoomRange,
        minSpan: dataZoomRange,
        maxSpan: dataZoomRange,
        backgroundColor: "transparent",
        fillerColor: "#8C94AC",
        borderColor: "transparent",
        handleSize: "0%",
        showDetail: false,
        throttle: 200,
        height: 10
      },
      {
        type: "inside",
        xAxisIndex: [0],
        start: 0,
        end: dataZoomRange
      }
    ];
    option.grid.bottom = "15%";
  }

  return option;
};

export const getStudentErrorOption = datas => {
  const hasLabels = datas.some(item => item.knowleges.length);
  let option = {
    grid: { top: "15%", left: "3%", right: "2%", bottom: "12%" },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      },
      formatter(params) {
        return [
          params[0].axisValue,
          params[0].data.detailName,
          `难度系数：${params[0].value}`
        ].join("<br />");
      }
    },
    xAxis: {
      type: "category",
      data: datas.map(item => item.name),
      interval: 0,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#EFF0F5"
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#EFF0F5"
        }
      },
      axisLabel: {
        color: "#6F7482",
        fontSize: 12,
        interval: 0,
        rotate: 25
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: "value",
      name: "难度系数",
      nameTextStyle: {
        color: "#202B4B",
        align: "center",
        padding: [15, 5]
      },
      min: 0,
      max: 1,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#fff"
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#EFF0F5"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "#6F7482",
        fontSize: 12
      }
    },
    series: {
      type: "scatter",
      animation: false,
      hoverAnimation: false,
      data: datas,
      symbol: "emptyCircle",
      symbolSize: 6,
      label: {
        show: hasLabels,
        fontSize: 12,
        position: "top",
        offset: [0, 8],
        color: "#fff",
        lineHeight: 14,
        padding: 3,
        backgroundColor: "#3A5AE5",
        formatter: function(params) {
          var knowleges = params.data.knowleges;
          var labelCont = knowleges.join("\n");
          return labelCont;
        }
      },
      itemStyle: {
        color: "#3A5AE5"
      }
    }
  };

  if (datas.length > 30) {
    const dataZoomRange = Math.floor((30 / datas.length) * 100);
    option.dataZoom = [
      {
        type: "slider",
        xAxisIndex: [0],
        bottom: 15,
        start: 0,
        end: dataZoomRange,
        minSpan: dataZoomRange,
        maxSpan: dataZoomRange,
        backgroundColor: "transparent",
        fillerColor: "#8C94AC",
        borderColor: "transparent",
        handleSize: "0%",
        showDetail: false,
        throttle: 200,
        height: 10
      },
      {
        type: "inside",
        xAxisIndex: [0],
        start: 0,
        end: dataZoomRange
      }
    ];
    option.grid.bottom = "15%";
  }

  return option;
};
