import React, { useState, useEffect, useRef } from "react";
import "./index.less";
import DataTable from "./DataTable";
import io from "socket.io-client";
import Krjk from "./Krjk";
import Kwxx from "./Kwxx";
import { FullscreenOutlined, FullscreenExitOutlined } from "@ant-design/icons";
import { useFullscreen, useRequest, useAsyncEffect } from "ahooks";
import Charts from "./Charts";
import Clock from "./Clock";
import {
  getInstoreData,
  getOutstoreData,
  getStationStatistics,
  getInOutstoreNum,
  getInOutstoreWeight,
  queryRealityWeight,
  queryMonitor,
  queryStore,
} from "./getData.js";
import { message } from "antd";
const { NODE_ENV } = process.env;
const websocketUrl =
  NODE_ENV == "development"
    ? "http://192.168.40.41:7001"
    : "http://192.168.40.41:7001";
// : `${window.location.protocol == "http:" ? "ws" : "wss"}://${
//     window.location.host
//   }`;
let socket;
export default (second) => {
  const ref = useRef(null);
  const [isFullscreen, { enterFullscreen, exitFullscreen, toggleFullscreen }] =
    useFullscreen(ref);

  const [full, setfull] = useState(false);

  const [instoreData, setinstoreData] = useState([]); //入库
  const [outStoreData, setoutStoreData] = useState([]); //出库
  const [stationStatistics, setstationStatistics] = useState([]); //库存统计
  const [InOutstoreNum, setInOutstoreNum] = useState([]); //出库
  const [InOutstoreWeight, setInOutstoreWeight] = useState([]); //出库
  const [realNum, setnum] = useState(""); //
  const [monitor, setMonitor] = useState([]); //
  const [stautsnum, setstautsnum] = useState(); //
  const [divSize, setdivSize] = useState({
    width: "100%",
    height: "100%",
  });
  const [common, setcommon] = useState(new Date());

  const [socketType, setsocketType] = useState("");
  useEffect(() => {
    socket = io(websocketUrl, {
      reconnectionDelay: 4000,
      //   transports: ["websocket"],
      autoConnect: true,
      query: { id: localStorage.getItem("WMS_ID") },
    });

    //   connect to socketIO server
    socket.connect();
    socket.on("message", (data) => {
      console.log("socketIO", data);
      setsocketType(data?.wsMsgModel);
    });
  }, []);
  useAsyncEffect(() => {
    if (!isFullscreen) {
      setcommon(new Date());
    }
  }, [isFullscreen]);
  // getInstoreData
  const InstoreDataFetch = useRequest(getInstoreData, {
    manual: false,
    onSuccess: (result, params) => {
      console.log(result);
      setinstoreData(result);
    },
    onError: (error) => {
      message.error(error.message);
      setinstoreData([]);
    },
  });

  // getOutstoreData
  const OutstoreDataFetch = useRequest(getOutstoreData, {
    manual: false,
    onSuccess: (result, params) => {
      console.log(result);

      setoutStoreData(result);
    },
    onError: (error) => {
      message.error(error.message);
      setoutStoreData([]);
    },
  });
  // getStationStatistics
  const StationStatisticsFetch = useRequest(getStationStatistics, {
    manual: false,
    onSuccess: (result, params) => {
      console.log(result);
      setstationStatistics(result);
    },
    onError: (error) => {
      message.error(error.message);
      setstationStatistics([]);
    },
  });
  // getInOutstoreNum
  const InOutstoreNumFetch = useRequest(getInOutstoreNum, {
    manual: false,
    onSuccess: (result, params) => {
      console.log(result);
      setInOutstoreNum(result);
    },
    onError: (error) => {
      message.error(error.message);
      setInOutstoreNum([]);
    },
  });
  // getInOutstoreWeight
  const InOutstoreWeightFetch = useRequest(getInOutstoreWeight, {
    manual: false,
    onSuccess: (result, params) => {
      console.log(result);
      setInOutstoreWeight(result);
    },
    onError: (error) => {
      message.error(error.message);
      setInOutstoreWeight([]);
    },
  });
  // getInOutstoreWeight
  const RealityWeightFetch = useRequest(queryRealityWeight, {
    manual: false,
    onSuccess: (result, params) => {
      console.log(result);
      setnum(result?.stockNum);
    },
    onError: (error) => {
      message.error(error.message);
      setnum("");
    },
  });
  // queryMonitor
  const queryMonitorFetch = useRequest(queryMonitor, {
    manual: false,
    onSuccess: (result, params) => {
      console.log(result);
      setMonitor(result[0]?.secondList);
    },
    onError: (error) => {
      message.error(error.message);
      setMonitor([]);
    },
  });
  // queryMonitor
  const queryStoreFetch = useRequest(queryStore, {
    manual: false,
    onSuccess: (result, params) => {
      setstautsnum(result);
    },
    onError: (error) => {
      message.error(error.message);
      setstautsnum([]);
    },
  });

  useEffect(() => {
    setTimeout(() => {
      switch (socketType) {
        case "INDEX_BOARD_INSTORE":
          InstoreDataFetch.run();
          break;
        case "INDEX_BOARD_OUTSTORE":
          OutstoreDataFetch.run();
          break;
        case "INDEX_BOARD_MONITOR":
          queryMonitorFetch.run();
          break;
        case "INDEX_BOARD_STORE":
          queryStoreFetch.run();
          break;
        case "INDEX_BOARD_INVENTORYSTATISTICS":
          StationStatisticsFetch.run();
          break;
        case "INDEX_BOARD_INOUTSTORENUM":
          InOutstoreNumFetch.run();
          break;
        case "INDEX_BOARD_INOUTSTOREWEIGHT":
          InOutstoreWeightFetch.run();
          break;
        case "INDEX_BOARD_REALITYWEIGHT":
          RealityWeightFetch.run();
          break;
        default:
          return;
      }
    }, 1000);
  }, [socketType]);

  return (
    <>
      <div key={common} className="kb-container" ref={ref}>
        <header>
          <div className="kb-time">
            <Clock />
          </div>
          <div className="kb-title" style={{ textAlign: "center" }}>
            <h2 style={{ marginBottom: 0, letterSpacing: 10 }}>
              线边库监控看板
            </h2>
          </div>
          <div>
            <div
              style={{
                cursor: "pointer",
                width: 30,
                height: 30,
                float: "right",
                marginRight: 16,
              }}
              onClick={() => {
                toggleFullscreen();
                setfull((v) => !v);
              }}
              title="全屏"
            >
              {full ? (
                <FullscreenExitOutlined
                  style={{ color: "#fff", fontSize: "24px" }}
                />
              ) : (
                <FullscreenOutlined
                  style={{ color: "#fff", fontSize: "24px" }}
                />
              )}
            </div>
          </div>
        </header>
        {/* 看板 */}
        <div className="kb-content">
          {/* 左侧 */}
          <div className="Left">
            {/* 待入库 */}
            <div className="unit">
              <DataTable
                headTitle={["任务编号", "产品信息", "批次号", "库位"]}
                title="待入库任务"
                data={instoreData}
              />
            </div>
            {/* 待出库 */}
            <div className="unit">
              <DataTable
                headTitle={["任务编号", "产品信息", "批次号", "库位", "工位"]}
                title="待出库任务"
                data={outStoreData}
              />
            </div>
          </div>
          <div className="Center">
            {/* 库存监控 */}
            <div className="unit">
              <div>
                <Kwxx data={stautsnum}></Kwxx>
              </div>
              <div>
                <Krjk data={monitor}></Krjk>
              </div>
            </div>
            {/* 库存统计 */}
            <div className="unit">
              <DataTable
                headTitle={["产品编码", "产品名称", "规格", "卷数", "重量"]}
                title="库存统计"
                data={stationStatistics}
              />
            </div>
          </div>
          <div className="Right">
            <div className="unit">
              <Charts title="出入库单数量" data={InOutstoreNum} />
            </div>
            <div className="unit">
              <Charts title="出入库产品数量" data={InOutstoreWeight} />
            </div>
            <div className="unit realTime">
              <div className="content-header"> 实时库存重量</div>
              <div
                style={{
                  lineHeight: "calc(100% - 32px)",
                  height: "calc(100% - 32px)",
                }}
              >
                <div className="realTime-content">
                  <span>{realNum ?? "--"}</span>
                </div>
                <span
                  style={{ color: "#00bbf2", fontSize: 24, fontWeight: 600 }}
                >
                  KG
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};
