// 天然气流量
import cls from "./index.module.css";
import BottomBarItem from "../BottomItemBackground";
import triangle from "../../../assets/Icon/triangle.svg";
import { Switch, Select, Radio } from "antd";
import { useState } from "react";
import GridList from "./gridList";
import GasChart from "./gasChart";
import dayjs from "dayjs";

function GasII(props) {
  const [dataSource, setDataSource] = useState("gas-i"); // gas-i , gas-ii
  const [showChart, setShowChart] = useState(true);

  function handleSwitchChange(val) {
    if (val) {
      setShowChart(true);
    } else {
      setShowChart(false);
    }
  }

  // function handleSourceChange(e) {
  //   if (e.target.value == "ii") {
  //     // 天然气II
  //     setDataSource("gas-ii");
  //   } else if (e.target.value == "i") {
  //     // 天然气 I
  //     setDataSource("gas-i");
  //   }
  // }

  function handleDateChange(value) {
    if (value == "天然气I") {
      setDataSource("gas-i");
    } else {
      setDataSource("gas-ii");
    }
  }

  const desc =
    dayjs().subtract(7, "day").format("YYYY.MM.DD") +
    " - " +
    dayjs().subtract(1, "day").format("YYYY.MM.DD");
  return (
    <BottomBarItem
      icon="pause"
      title="天然气流量"
      desc={desc}
      className={`${cls.gas} ${props.className}`}
      style={props.style}
    >
      {/* legend */}
      <div className={cls.headWidget}>
        <div className="flex items-center">
          <Switch size="small" defaultChecked onChange={handleSwitchChange} />
          {showChart && <span className={cls.switchLabel}>历史详情</span>}
          {!showChart && <span className={cls.switchLabel}>实时流量</span>}
        </div>

        <Select
          defaultValue={"天然气I"}
          style={{ width: 90 }}
          popupClassName="xc-date-selector-menu"
          className={cls.radioGroup}
          options={["天然气I", "天然气II"].map((item) => ({
            label: item,
            value: item,
          }))}
          suffixIcon={<img src={triangle} alt="#" />}
          notFoundContent={
            <span
              style={{
                color: "#fff",
                fontSize: "14px",
                lineHeight: 1,
                paddingLeft: "12px",
              }}
            >
              - 无 -
            </span>
          }
          onChange={(value, option) => handleDateChange(value)}
        />

        {/* <Radio.Group
          defaultValue="i"
          buttonStyle="solid"
          className={cls.radioGroup}
          onChange={handleSourceChange}
        >
          <Radio.Button value="i" className="radio-group__item">
            天然气 I
          </Radio.Button>
          <Radio.Button value="ii" className="radio-group__item">
            天然气 II
          </Radio.Button>
        </Radio.Group> */}
      </div>

      <div className={cls.chart}>
        {showChart && <GasChart dataSource={dataSource} />}
        {!showChart && <GridList dataSource={dataSource} />}
      </div>
    </BottomBarItem>
  );
}

export default GasII;