const animationIsOpen = true;

export function getInviTypesOption(dataList) {
  if (!dataList.length) return null;
  const chartColor = [
    "#2D99FF",
    "#4346D3",
    "#4D1D83",
    "#5E2BBC",
    "#6648FF",
    "#F43469",
    "#16CEB9",
  ];

  const seriesData = dataList.map((item) => {
    return {
      name: item.type,
      value: item.warnCount,
    };
  });

  return {
    animation: animationIsOpen,
    color: chartColor,
    grid: {
      top: "20%",
      bottom: "10%",
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}<br/>{d}%",
      backgroundColor: "rgba(63,67,87,0.9)",
      padding: 10,
      textStyle: {
        fontSize: 12,
        color: "#E1E6EF",
        fontWeight: 500,
        lineHeight: 18,
      },
    },
    legend: {
      show: false,
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: ["55%", "85%"],
        data: seriesData,
        label: {
          show: false,
        },
      },
    ],
  };
}
export function getInviAreaOption(dataList) {
  if (!dataList.length) return null;

  const chartColor = [
    "#6648FF",
    "#5E2BBC",
    "#4D1D83",
    "#4346D3",
    "#2D99FF",
    "#16CEB9",
  ];

  const seriesData = dataList.map((item) => {
    return {
      name: `${item.province}，${item.warnCount}`,
      value: item.warnCount,
    };
  });

  return {
    animation: animationIsOpen,
    color: chartColor,
    grid: {
      top: "20%",
      bottom: "10%",
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}<br/>{d}%",
      backgroundColor: "rgba(63,67,87,0.9)",
      padding: 10,
      textStyle: {
        fontSize: 12,
        color: "#E1E6EF",
        fontWeight: 500,
        lineHeight: 18,
      },
    },
    legend: {
      show: false,
    },
    series: [
      {
        name: "占比",
        type: "pie",
        radius: ["55%", "85%"],
        data: seriesData,
        label: {
          show: false,
        },
      },
    ],
  };
}

export function getInviTimeOption(dataList, colorType) {
  if (!dataList.length) return;

  const colorSet = {
    white: {
      gridBorderColor: "#e9e9e9",
      legendTextColor: "#2c3e50",
      axisLineColor: "#e9e9e9",
      axisLabelColor: "#2c3e50",
    },
    dark: {
      gridBorderColor: "#292C38",
      legendTextColor: "rgba(225, 230, 239, 0.5)",
      axisLineColor: "#292C38",
      axisLabelColor: "#E1E6EF",
    },
  };
  const color = colorSet[colorType];

  return {
    animation: animationIsOpen,
    grid: {
      show: true,
      top: 50,
      bottom: 30,
      left: 50,
      right: 30,
      borderColor: color.gridBorderColor,
    },
    legend: {
      show: true,
      top: 10,
      right: 30,
      itemGap: 20,
      itemWidth: 16,
      itemHeight: 4,
      icon: "roundRect",
      textStyle: {
        color: color.legendTextColor,
        fontSize: 12,
        padding: [0, 0, 0, 5],
      },
    },
    tooltip: {
      show: true,
      trigger: "axis",
      backgroundColor: "rgba(63,67,87,0.9)",
      padding: 10,
      textStyle: {
        fontSize: 12,
        color: "#E1E6EF",
        fontWeight: 500,
        lineHeight: 18,
      },
    },
    xAxis: {
      type: "category",
      data: dataList.map((item) => item.hour),
      interval: 5,
      splitLine: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: color.axisLineColor,
        },
      },
      axisLabel: {
        color: color.axisLabelColor,
        fontSize: 10,
      },
      axisTick: {
        show: true,
        inside: true,
      },
    },
    yAxis: {
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          color: color.axisLineColor,
        },
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        fontSize: 10,
        color: color.axisLabelColor,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: "在线考生",
        type: "line",
        smooth: true,
        showSymbol: false,
        data: dataList.map((item) => item.onlineCount),
        itemStyle: {
          color: "#16CEB9",
        },
        lineStyle: {
          width: 4,
          color: "#16CEB9",
        },
      },
      {
        name: "预警数量",
        type: "line",
        smooth: true,
        showSymbol: false,
        data: dataList.map((item) => item.warnCount),
        itemStyle: {
          color: "#F7517F",
        },
        lineStyle: {
          width: 4,
          color: "#F7517F",
        },
      },
    ],
  };
}

export function getInviMapOption(dataList) {
  // if (!dataList.length) return;

  let countData = dataList.map((item) => {
    return {
      name: item.province,
      ...item,
      itemStyle: {
        areaColor: "rgba(45, 153, 255, 0.5)",
      },
    };
  });
  // 隐藏南海诸岛
  countData.push({
    name: "南海诸岛",
    itemStyle: {
      opacity: 0,
    },
    emphasis: {
      itemStyle: {
        opacity: 0,
      },
    },
  });

  return {
    tooltip: {
      trigger: "item",
      formatter(params) {
        if (!params.data) return;
        const { name, onlineCount, warnCount } = params.data;
        return `<span style="color:#2D99FF">${name}</span><br />在线人数：${onlineCount}<br />预警总数：${warnCount}`;
      },
      backgroundColor: "rgba(63,67,87,0.9)",
      padding: 10,
      triggerOn: "click",
      textStyle: {
        fontSize: 12,
        color: "#E1E6EF",
        fontWeight: 500,
        lineHeight: 18,
        rich: {
          n: {
            color: "#2D99FF",
          },
        },
      },
    },
    series: [
      {
        name: "数量",
        type: "map",
        mapType: "china",
        layoutCenter: ["50%", "50%"],
        layoutSize: "100%",
        data: countData,
        itemStyle: {
          areaColor: "rgba(45, 153, 255, 0.2)",
          borderColor: "#2D99FF",
          borderWidth: 1,
        },
        emphasis: {
          label: {
            show: false,
          },
          itemStyle: {
            areaColor: "rgba(22, 206, 185, 1)",
            borderColor: "rgba(45, 153, 255, 0.3)",
          },
        },
      },
    ],
  };
}
