/* eslint-disable space-before-function-paren */
// @ts-ignore
function splitStrByStep(str, step = 2) {
  if (!step) return str;
  if (str.length < step) return [str];

  let strs = str.split("");
  let strArr = [];
  let part = [];
  strs.map((element) => {
    part.push(element);
    if (part.length >= step) {
      strArr.push(part.join(""));
      part = [];
    }
  });
  if (part.length) strArr.push(part.join(""));
  return strArr;
}

const COLORS = [
  ["rgba(85,107,236,1)", "rgba(97,167,255,1)"],
  ["rgba(123,255,248,1)", "rgba(68,194,255,1)"],
  ["rgba(215,255,178,1)", "rgba(139,255,237,1)"],
  ["rgba(255,172,172,1)", "rgba(255,230,152,1)"],
  ["rgba(246,149,150,1)", "rgba(246,102,104,1)"],
];

const PLACE_STATES = {
  wait: {
    name: "应考",
    color: ["rgba(97,167,255,1)", "rgba(85,107,236,1)"],
  },
  login: {
    name: "已登录",
    color: ["rgba(123,255,248,1)", "rgba(68,194,255,1)"],
  },
  error: {
    name: "通讯故障",
    color: ["rgba(255,230,152,1)", "rgba(255,172,172,1)"],
  },
};

export default {
  methods: {
    getLinerColor(index) {
      return {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: COLORS[index][0],
          },
          {
            offset: 1,
            color: COLORS[index][1],
          },
        ],
      };
    },
    getPlaceColor(key, isLine = false) {
      let direct = {};
      if (isLine) {
        direct = { x: 0, y: 0, x2: 0, y2: 1 };
      } else {
        direct = { x: 1, y: 0, x2: 0, y2: 0 };
      }
      return {
        ...direct,
        type: "linear",
        colorStops: [
          {
            offset: 0,
            color: PLACE_STATES[key].color[0],
          },
          {
            offset: 1,
            color: PLACE_STATES[key].color[1],
          },
        ],
      };
    },
    getCategoryChartOption(dataList) {
      const datas = dataList.map((item, index) => {
        return {
          name: item.name,
          value: item.value,
          itemStyle: {
            color: this.getLinerColor(index),
            shadowBlur: 10,
            shadowColor: "rgba(0,0,0,0.15)",
            shadowOffsetX: 0,
            shadowOffsetY: 10,
          },
        };
      });

      return {
        series: [
          {
            name: "报考类型",
            type: "pie",
            radius: [40, 80],
            center: ["50%", "50%"],
            roseType: "radius",
            startAngle: 110,
            minAngle: 10,
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                color: "#fff",
                position: "center",
                formatter: function (params) {
                  return params.name + "\n" + params.value + "%";
                },
              },
              emphasis: {
                show: true,
              },
            },
            lableLine: {
              normal: {
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            data: datas,
          },
        ],
      };
    },
    getPlaceLineChartOption(dataList) {
      const dataZoomRange = Math.floor((8 / dataList.length) * 100);

      let seriesList = [];
      let xAxisLabels = dataList.map((item) => item.name);

      Object.keys(PLACE_STATES).map((key) => {
        let seriesItemData = dataList.map((item) => item[key]);
        seriesList.push({
          name: PLACE_STATES[key].name,
          type: "bar",
          data: seriesItemData,
          barWidth: 6,
          barGap: "600%",
          itemStyle: {
            barBorderRadius: 3,
            color: this.getPlaceColor(key, true),
          },
          label: {
            show: true,
            color: "#78C2FF",
            position: "top",
            fontSize: 11,
            formatter: function (params) {
              if (params.value === 1) return "100%";
              return (params.value * 100).toFixed(2) + "%";
            },
          },
        });
      });

      let options = {
        title: {
          text: "全国考点情况统计",
          left: "1%",
          top: "2%",
          textStyle: {
            color: "#78C2FF",
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "1%",
          right: "3%",
          bottom: "10%",
          top: "20%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          min: 0,
          max: 1,
          interval: 0.25,
          axisLine: {
            lineStyle: {
              color: "#3952AE",
            },
          },
          axisTick: { show: false },
          splitLine: {
            lineStyle: {
              color: "#3952AE",
            },
          },
          axisLabel: {
            color: "#78C2FF",
            fontSize: 12,
            formatter: function (value) {
              return Math.round(value * 100) + "%";
            },
          },
        },
        xAxis: {
          type: "category",
          data: xAxisLabels,
          triggerEvent: true,
          boundaryGap: ["5%", "5%"],
          axisLine: {
            lineStyle: {
              color: "#3952AE",
            },
          },
          axisTick: { show: false },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#3952AE",
            },
          },
          axisLabel: {
            color: "#fff",
            fontSize: 12,
            margin: 20,
            align: "center",
            formatter: function (value) {
              return splitStrByStep(value, 5).join("\n");
            },
          },
        },
        series: seriesList,
      };

      if (dataZoomRange < 100) {
        options.dataZoom = [
          {
            type: "slider",
            xAxisIndex: [0],
            bottom: "0%",
            start: 0,
            end: dataZoomRange,
            minSpan: dataZoomRange,
            maxSpan: dataZoomRange,
            backgroundColor: "rgba(51, 67, 155, 0)",
            fillerColor: "rgba(116, 186, 248, 1)",
            borderColor: "rgba(116, 186, 248, 0)",
            handleSize: "0%",
            showDetail: false,
            throttle: 200,
            height: 5,
          },
          {
            type: "inside",
            xAxisIndex: [0],
            start: 0,
            end: dataZoomRange,
          },
        ];
      }

      return options;
    },
  },
};
