import GraphBase from "../../../Common/GraphBase";
import ReactECharts from "echarts-for-react";
// import getOptions from "../../../../hooks/getChartOption";
import { useSelector } from "react-redux";
import { useState } from "react";
import * as echarts from "echarts";

function NatGas(props) {
  const elecTrend = useSelector((state) => state.energy.trend.natGas1);
  const [period, setPeriod] = useState("周");

  const options = getOptions(
    { 周: "week", 月: "month", 年: "year" }[period],
    elecTrend ?? { week: [], month: [], year: [] }
  );

  function handleSwitch(v) {
    // console.log('switched ', v);
  }

  function handleDateChange(v) {
    setPeriod(v);
    // console.log('date ', v);
  }

  return (
    <GraphBase
      icon="battery"
      title="天然气I"
      desc="能耗趋势图"
      switchOptions={false}
      onSwitch={handleSwitch}
      defaultSelect={period}
      dateOptions={["周", "月", "年"]}
      //   legend={["总量"]}
      onDateChange={handleDateChange}
      size={["long", "short"]}
    >
      {/* real echarts here */}
      {options && (
        <ReactECharts
          key={Math.random()}
          option={options}
          // option={getOptions([[91, 69, 5, 10, 21, 46, 24]], "氧气")}
          style={{ height: "100%" }}
        />
      )}
      {!options && (
        <p
          style={{
            color: "#cccf",
            fontSize: "24px",
            userSelect: "none",
            textAlign: "center",
            paddingTop: "48px",
          }}
        >
          暂无数据
        </p>
      )}
      {/* real table data here  */}
    </GraphBase>
  );
}

export default NatGas;

function getOptions(period, trend) {
  console.log("getOptions", period, trend);
  if (trend[period].length === 0) return null;
  // export default function getOptions(seriesData, name) {
  const colors = [
    "#FFD160",
    "#12FFF5",
    "#2760FF",
    "#E80091",
    "#8064ff",
    "#ff8a3b",
    "#8cd26d",
    "#2aa1ff",
  ];
  return {
    color: colors,
    grid: { top: 38, right: 12, bottom: 20, left: 48 },
    legend: {
      show: false,
      icon: "roundRect",
      top: 10,
      right: 10,
      padding: 0,
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 3,
      height: 8,
      textStyle: {
        color: "#DFF1FE",
        fontSize: 10,
      },
    },
    xAxis: {
      type: "category",
      data: Array(period == "week" ? 7 : period == "year" ? 12 : 30)
        .fill(1)
        .map((_, index) => {
          const today = new Date();
          const dtimestamp = today - index * 24 * 60 * 60 * 1000;
          return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
            dtimestamp
          ).getDate()}`;
        })
        .reverse(),
      axisLabel: {
        color: "#fff",
        fontSize: 12,
      },
      axisTick: { show: false },
      axisLine: {
        lineStyle: {
          width: 1,
          color: "#213259",
        },
      },
    },
    yAxis: {
      name: "单位m³/h",
      nameTextStyle: {
        color: "#fff",
        fontSize: 10,
        align: "right",
      },
      type: "value",
      axisLabel: {
        color: "#fff",
        fontSize: 12,
        formatter: "{value}",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#213259",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#213259a0",
        },
      },
    },
    series: {
      data: trend[period],
      type: "line",
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: colors[0] + "40" },
          { offset: 0.5, color: colors[0] + "20" },
          { offset: 1, color: colors[0] + "00" },
        ]),
      },
    },
    // series: seriesData.map((arr, index) => ({
    // 	name: index + 1 + '#' + name,
    // 	data: arr,
    // 	type: 'line',
    // 	areaStyle: {
    // 		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    // 			{ offset: 0, color: colors[index] + '40' },
    // 			{ offset: 0.5, color: colors[index] + '20' },
    // 			{ offset: 1, color: colors[index] + '00' },
    // 		]),
    // 	},
    // })),
    tooltip: {
      trigger: "axis",
    },
  };
}
