/*
 * @Author: Sakura
 * @LastEditors: Sakura
 * @FilePath: \ebc-mes\src\mes\common\siderInfoComponent\index.js
 * @Description: 生产执行内容块 --- 左侧收缩组件
 */
import React, { useEffect, useRef, useState, useContext } from "react";
import { Carousel, Row, Col, Spin, Button, Tooltip } from "antd";
import { LeftOutlined, RightOutlined } from "@ant-design/icons";
import classNames from "classnames/bind";
import moment from "moment";

import * as commonBusiness from "@/components/Common/commonBusiness";
import * as commonFunc from "@/components/Common/commonFunc";
import StaticEditTable from "@/components/Common/CommonTable";
import ShowType from "@/components/Common/CommonComponent";
import ClockComponent from "./clockComponent";
import * as commonUtils from "@/utils/utils";
import * as commonConfig from "@/utils/config";

import styles from "./index.less";
import { Space } from "antd";

const iocnObj = {
  taskIcon: require("./assets/facilityIcon.png"),
  facilityIcon: require("./assets/facilityIcon.png"),
  groupIcon: require("./assets/groupIcon.png"),
  userImg: require("./assets/user.jpg")
};

const { myContext } = commonUtils;
const cx = classNames.bind(styles);

const useSiderInfoComponentEvent = props => {
  const { formData = [], app, refreshMachineDataFlag } = props;
  const { userinfo = {} } = app;
  const { iInterface } = userinfo;
  const [pageloading1, setPagesLoading1] = useState(true);

  // 初始化事件
  useEffect(
    async () => {
      if (commonUtils.isEmptyArr(formData)) return;
      let addState = {};

      const list = [
        {
          sName: "workOrderInfo",
          sGrd: iInterface === 0 ? "qz_machinedata" : "machinedata"
        }, // 工单信息
        {
          sName: "deviceTargetInfo",
          sGrd:
            iInterface === 2
              ? "elemachine1"
              : iInterface === 9
                ? "elemachine2"
                : "elemachine"
        }, // 设备及目标信息
        { sName: "employee", sGrd: "teamInfo" }, // 班组信息
        { sName: "teamShiftInfo", sGrd: "teamShiftInfo" } // 机长班次信息
      ];

      for (let i = 0; i < list.length; i++) {
        const item = list[i];
        const { sName, sGrd } = item;
        const config = formData.find(item => item.sGrd === sGrd);
        if (config) {
          addState = {
            execListExtra: list,
            ...addState,
            ...handleGetColumnData(config, sName),
            ...(await handleGetData(config, sName))
          };
        }
      }

      addState.bFinish1 = true;

      props.onSaveState(addState, () => {
        setPagesLoading1(false);
      });
    },
    [formData.length]
  );

  // 扫码后刷新工单信息
  const { productionTableList = [] } = props;
  useEffect(
    async () => {
      if (!refreshMachineDataFlag) return;
      const tempList = {
        sName: "workOrderInfo",
        sGrd: iInterface === 0 ? "qz_machinedata" : "machinedata"
      };

      const { sName, sGrd } = tempList;
      const config = formData.find(item => item.sGrd === sGrd);
      const addState = {
        ...(await handleGetData(config, sName)),
        refreshTableList: productionTableList
      };

      props.onSaveState(addState);
    },
    [refreshMachineDataFlag]
  );

  // 获取表头数据
  const handleGetColumnData = (config, name) => {
    const column = commonFunc.getHeaderConfig(config);
    return {
      [`${name}Column`]: column,
      [`${name}Config`]: config
    };
  };

  // 获取数据集
  const handleGetData = async (config, name) => {
    const conditonValues = props.onGetSqlConditionValues(config);

    // 如果是设备及目标信息，则异步加载
    if (name === "deviceTargetInfo") {
      props.onGetDataSet({
        name: name,
        configData: config,
        condition: { sSqlCondition: { ...conditonValues } },
        isWait: false
      });
      return {};
    }

    try {
      const addState =
        (await props.onGetDataSet({
          name: name,
          configData: config,
          condition: { sSqlCondition: { ...conditonValues } },
          isWait: true
        })) || {};
      return addState;
    } catch (error) {
      console.log("=====error", error);
      return {};
    }
  };

  useEffect(() => {
    window.bChangeMachineData = true;
    return () => {
      window.bChangeMachineData = false;
    };
  }, []);

  const [changeExecInfo, setChangeExecInfo] = useState({});
  const changeExecInfoRef = useRef({});
  useEffect(() => {
    const getValue = () => {
      const changeExecInfoNew = commonUtils.getAppData("changeExecInfo");
      const { sTime } = changeExecInfoNew;
      delete changeExecInfoNew.sTime;
      if (
        JSON.stringify(changeExecInfoNew) !==
        JSON.stringify(changeExecInfoRef.current)
      ) {
        changeExecInfoRef.current = changeExecInfoNew;
        setChangeExecInfo({ ...changeExecInfoNew, sTime });
      }
    };

    getValue();
    const timer = setInterval(() => {
      getValue();
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  // 将工单信息存到全局
  const { workOrderInfoData = [] } = props;
  const [workOrderInfoDataOne = {}] = workOrderInfoData;
  const currentWorkOrderInfo = commonUtils.getAppData(
    "globalData",
    "currentWorkOrderInfo"
  );
  useEffect(
    () => {
      const globalData = commonUtils.getAppData(globalData);
      globalData.currentWorkOrderInfo = {
        ...currentWorkOrderInfo,
        ...workOrderInfoDataOne,
        ...changeExecInfo
      };
      commonUtils.setAppData("globalData", globalData);
    },
    [JSON.stringify(workOrderInfoDataOne), changeExecInfo]
  );

  // 刷新设备及目标信息
  const { refreshDeviceTargetInfo } = props;
  useEffect(
    () => {
      if (refreshDeviceTargetInfo) {
        handleRefreshDeviceTargetInfo();
      }
    },
    [refreshDeviceTargetInfo]
  );

  const handleRefreshDeviceTargetInfo = async () => {
    const { deviceTargetInfoConfig, deviceTargetInfoData = [{}] } = props;
    const conditonValues = props.onGetSqlConditionValues(
      deviceTargetInfoConfig
    );

    const addState = await props.onGetDataSet({
      name: "deviceTargetInfo",
      configData: deviceTargetInfoConfig,
      condition: { sSqlCondition: { ...conditonValues } },
      isWait: true
    });

    addState.deviceTargetInfoData = [
      { ...deviceTargetInfoData[0], ...addState.deviceTargetInfoData[0] }
    ];

    addState.refreshDeviceTargetInfo = false;
    props.onSaveState(addState);
  };

  return {
    ...props,
    pageloading1,
    changeExecInfo
  };
};

const SiderInfoComponent = baseProps => {
  const props = useSiderInfoComponentEvent(baseProps);
  const leftClass = cx({
    siderInfoComponent: true
  });

  return (
    <myContext.Provider
      value={{
        props
      }}
    >
      <div className={leftClass}>
        {props.pageloading1 ? (
          <div className="mesPageloadingDiv">
            <Spin
              spinning={props.pageloading1}
              size="large"
              tip="工单数据加载中..."
            />
          </div>
        ) : (
          <CommonInfoComponent {...baseProps} />
        )}
      </div>
    </myContext.Provider>
  );
};

const CommonInfoComponent = props => {
  return (
    <div className="commonInfo">
      <WorkOrderTypeComponent />
      <DeviceTargetInfoComponent />
      <TeamInfoComponent />
    </div>
  );
};

// 工单类型
const WorkOrderTypeComponent = () => {
  const { props } = useContext(myContext);
  const {
    workOrderInfoConfig = {},
    workOrderInfoData = [],
    changeExecInfo = {}
  } = props;

  const ref = useRef(null);
  const carouselRef = useRef(null);
  const [contentHeight, setContentHeight] = useState(0);
  useEffect(() => {
    const handleSetHeight = () => {
      if (ref.current) {
        const oCarousel = ref.current.querySelector(".ant-carousel");
        const { height } = oCarousel.getBoundingClientRect();
        setContentHeight(height - 8);
      }
    };
    handleSetHeight();
    window.addEventListener("resize", handleSetHeight);
    return () => {
      window.removeEventListener("resize", handleSetHeight);
    };
  }, []);

  const timer = useRef(null);
  const [pageSize, setPageSize] = useState(1);
  useEffect(
    () => {
      clearTimeout(timer.current);
      timer.current = null;
      timer.current = setTimeout(() => {
        let pageSize = Math.floor(contentHeight / 36);
        pageSize = Math.max(pageSize, 1);
        setPageSize(pageSize);
      }, 200);
    },
    [contentHeight]
  );

  const [showConfig, setShowConfig] = useState([]);
  useEffect(
    () => {
      const { gdsconfigformslave = [] } = workOrderInfoConfig;
      const showConfig = gdsconfigformslave.filter(
        item =>
          item.sName && item.bControl && item.sControlName.indexOf("Btn") === -1
      );

      setShowConfig(showConfig);
    },
    [props.bFinish1]
  );

  const viewRowOld = workOrderInfoData[0] || {};
  const viewRow = { ...viewRowOld, ...changeExecInfo };

  const handleGetShowTypeProps = config => {
    // const viewRow = workOrderInfoData[dataIndex] || {};
    return {
      ...commonBusiness.getShowTypes("workOrderInfo", props),
      showConfig: config,
      dataValue: viewRow[config.sName],
      enabled: false,
      bSideInfo: true
    };
  };

  const productionRef = useRef(null);
  const [productionDivId] = useState(
    `productionDivId_${commonUtils.createSid()}`
  );

  return (
    <div className={styles.workOrdertype} ref={ref}>
      <div className="mesTitle">
        <img src={iocnObj.taskIcon} />
        任务：工单信息
      </div>
      <Carousel ref={carouselRef}>
        {/* {
                workOrderInfoData.map((item,index)=>{
                return(
                        <div>
                            { showConfig.map((e,i)=>{
                                const className = cx({ mesShowType: true,odd: i % 2 === 0 });
                                return (
                                    <div className={className}>
                                        <ShowType {...handleGetShowTypeProps( e, item[e.sName] )} />
                                    </div>
                                )
                            })}
                        </div>
                )
                })
            } */}

        {new Array(Math.ceil(showConfig.length / pageSize))
          .fill("")
          .map((_, page) => {
            return (
              <div>
                {new Array(pageSize).fill("").map((_, index) => {
                  const config = showConfig[page * pageSize + index];
                  if (commonUtils.isEmptyObject(config)) {
                    return "";
                  }

                  const className = cx({
                    mesShowType: true,
                    odd: index % 2 === 0
                  });
                  // 生产进度
                  if (config.sName === "sProduction") {
                    const productionArr = commonUtils.convertStrToObj(
                      viewRow[config.sName],
                      []
                    );
                    const showValue = productionArr.map((item, i) => {
                      const { sProcessName, sState } = item;
                      let colorValue;
                      switch (
                        Number(sState) // 根据状态显示颜色
                      ) {
                        case 2:
                          colorValue = "#FF7E37"; /* 2：等待:黄色 */
                          break;
                        case 4:
                          colorValue = "#52C41A"; /* 4：已完成:绿色 */
                          break;
                        case 1:
                        case 3:
                          colorValue = "#106abe"; /* 1、3：进行中:蓝色 */
                          break;
                        default:
                          colorValue = "#000000";
                      }
                      return (
                        <>
                          <span style={{ color: colorValue }}>
                            {sProcessName}
                          </span>
                          {i < productionArr.length - 1 ? (
                            <RightOutlined
                              style={{
                                color: [1, 3].includes(sState)
                                  ? "#000"
                                  : colorValue
                              }}
                            />
                          ) : (
                            ""
                          )}
                        </>
                      );
                    });

                    return (
                      <div className={className} ref={productionRef}>
                        <Row style={{ flexWrap: "nowrap" }}>
                          <Col
                            flex={"160px"}
                            className={styles.productionTitle}
                          >
                            生产进度：
                            {/* <Button
                              type="link"
                              icon={<LeftOutlined />}
                              className={styles.productionBtnLeft}
                              onClick={() => {
                                document.querySelector(
                                  `#${productionDivId}`
                                ).scrollLeft -= 100;
                              }}
                            />
                            <Button
                              type="link"
                              icon={<RightOutlined />}
                              className={styles.productionBtnRight}
                              onClick={() => {
                                document.querySelector(
                                  `#${productionDivId}`
                                ).scrollLeft += 100;
                              }}
                            /> */}
                          </Col>
                          <Col
                            flex={1}
                            className={styles.productionContent1}
                            id={productionDivId}
                          >
                            <Tooltip
                              title={showValue}
                              color="#fff"
                              overlayInnerStyle={{ fontSize: 18 }}
                            >
                              {showValue}
                            </Tooltip>
                          </Col>
                        </Row>
                      </div>
                    );
                  } else if (config.sName === "specialMemo") {
                    return (
                      <div className={className}>
                        <Row style={{ flexWrap: "nowrap" }}>
                          <Col
                            flex={"160px"}
                            className={styles.productionTitle}
                          >
                            特别关注：
                          </Col>
                          <Col
                            flex={1}
                            className={styles.productionContent}
                            style={{ cursor: "not-allowed", gap: 5 }}
                          >
                            {viewRow.specialMemo
                              ? viewRow.specialMemo
                                  .split(",")
                                  .map(item => (
                                    <div className={styles.mesSpecial}>
                                      {item}
                                    </div>
                                  ))
                              : ""}
                          </Col>
                        </Row>
                      </div>
                    );
                  } else if (config.sName === "sLabelColor") {
                    const colorList = "白粉青蓝橙绿黄红".split("");
                    let colorIndex = colorList.findIndex(
                      item => item === viewRow.sLabelColor
                    );
                    colorIndex = colorIndex === -1 ? 0 : colorIndex;
                    return (
                      <div className={className}>
                        <Row style={{ flexWrap: "nowrap" }}>
                          <Col
                            flex={"160px"}
                            className={styles.productionTitle}
                          >
                            {config.showName}:
                          </Col>
                          <Col
                            flex={1}
                            className={styles.productionContent}
                            style={{ cursor: "not-allowed", gap: 5 }}
                          >
                            <span
                              className={`noInput ${
                                viewRow.sLabelColor
                                  ? styles[`mesColor${colorIndex}`]
                                  : ""
                              }`}
                            >
                              <span>{viewRow.sLabelColor}</span>
                            </span>
                          </Col>
                        </Row>
                      </div>
                    );
                  } else {
                    const showTypeProps = handleGetShowTypeProps(config);
                    return (
                      <div className={className}>
                        <ShowType {...showTypeProps} />
                      </div>
                    );
                  }
                })}
              </div>
            );
          })}
      </Carousel>
      <div className="rightBottomBtns">
        <Space>
          <LeftOutlined
            onClick={() => {
              carouselRef.current && carouselRef.current.prev();
            }}
          />
          <RightOutlined
            onClick={() => {
              carouselRef.current && carouselRef.current.next();
            }}
          />
        </Space>
      </div>
    </div>
  );
};

// 设备及目标信息
const DeviceTargetInfoComponent = () => {
  const { props } = useContext(myContext);
  const {
    deviceTargetInfoConfig = {},
    deviceTargetInfoData = [],
    changeExecInfo = {}
  } = props;
  const { gdsconfigformslave = [] } = deviceTargetInfoConfig;
  const showConfig = gdsconfigformslave.filter(
    item =>
      item.sName && item.bControl && item.sControlName.indexOf("Btn") === -1
  );

  const viewRowOld = deviceTargetInfoData[0] || {};
  const viewRow = { ...viewRowOld, ...changeExecInfo };

  const {
    sStatusName,
    dProduceHour = 0,
    bPopup = false,
    iPopDuration = 0,
    tStartDate
  } = viewRow;

  const settingId = useRef(`settingId_${commonUtils.createSid()}`);
  const timer = useRef(null);

  useEffect(
    () => {
      if (sStatusName?.includes("停") && bPopup && iPopDuration) {
        const restTime = Math.max(
          iPopDuration * 60 * 1000 - dProduceHour * 1000,
          0
        );
        clearTimeout(timer.current);
        timer.current = null;
        timer.current = setTimeout(() => {
          window.deviceTargetInfoModalAutoShow = true;
          setTimeout(() => {
            window.deviceTargetInfoModalAutoShow = false;
          }, 5000);
          document.getElementById(settingId.current)?.click();
        }, restTime);
      }

      return () => {
        clearTimeout(timer.current);
      };
    },
    [sStatusName, tStartDate]
  );

  const handleGetShowTypeProps = config => {
    return {
      ...commonBusiness.getShowTypes("deviceTargetInfo", props),
      showConfig: config,
      dataValue: viewRow[config.sName],
      enabled: false
    };
  };

  return (
    <div className={styles.deviceTargetInfo}>
      <div className="mesTitle" style={{ padding: "10px 10px 5px" }}>
        <img src={iocnObj.facilityIcon} />
        设备及目标信息
      </div>
      {showConfig.map((config, index) => {
        if (index > 4) return "";
        const className = cx({
          mesShowType: true,
          odd: index % 2 === 0
        });
        const showTypeProps = handleGetShowTypeProps(config);

        if (config?.sName?.endsWith("Qty")) {
          return (
            <div className={`${className} dynamicClock`}>
              <div className={styles.clock}>
                <ClockComponent
                  num={viewRow[config.sName]}
                  sName={config.sName}
                  {...props}
                />
              </div>
              <Row style={{ flexWrap: "nowrap" }}>
                <Col flex={"160px"} className={styles.dynamicNumTitle}>
                  {config.showName}：
                </Col>
                <Col
                  flex={1}
                  className={styles.dynamicNumContent}
                  style={{ cursor: "not-allowed" }}
                >
                  <div className={styles.mesDynamicNum}>
                    <MesDynamicNum
                      num={viewRow[config.sName]}
                      sName={config.sName}
                    />
                  </div>
                </Col>
              </Row>
            </div>
          );
        } else if (false && config.showName === "更新时间") {
          return (
            <div className={`${className}`}>
              <Row style={{ flexWrap: "nowrap" }}>
                <Col flex={"160px"} className={styles.dynamicNumTitle}>
                  {config.showName}：
                </Col>
                <Col
                  flex={1}
                  className={styles.dynamicNumContent}
                  style={{ cursor: "not-allowed" }}
                >
                  <div className={styles.mesDynamicNum}>
                    <CurrentTimeComponent />
                  </div>
                </Col>
              </Row>
            </div>
          );
        } else if (config.showName === "设备状态") {
          return (
            <div className={className}>
              <ShowType {...showTypeProps} />
              <div className={styles.statusSetting}>
                <Button
                  type="link"
                  size="large"
                  id={settingId.current}
                  onClick={() => {
                    window.deviceTargetInfoModal = true;
                    const record = window.deviceTargetInfoModalAutoShow
                      ? { ...viewRow, deviceTargetInfoModalAutoShow: true }
                      : viewRow;
                    props.onTableBtnClick({
                      name: "deviceTargetInfo",
                      record,
                      config
                    });
                  }}
                >
                  设置
                </Button>
              </div>
            </div>
          );
        } else {
          return (
            <div className={className}>
              <ShowType {...showTypeProps} />
            </div>
          );
        }
      })}
    </div>
  );
};

// 班组信息
const TeamInfoComponent = () => {
  const { props } = useContext(myContext);
  const rowStyle = {
    height: "100%"
  };

  const tableProps = {
    ...commonBusiness.getTableTypes("employee", {
      ...props
    }),
    footer: "hidden", // 合计栏
    // setOpterationColumn: "Y", // 操作栏
    tableProps: {
      rowSelection: null, // 显示单选框还是复选框
      AutoTableHeight: "175px" // 表格高度
    }
  };

  const teamShiftInfo = props.teamShiftInfoData?.[0] || {};
  const { sEmployeeName = "", sEmployeeNo = "" } = teamShiftInfo;

  // 当前上班机长人员
  const { sActualEmployeeName, sActualEmployeeNo } = tableProps.data[0] || {};

  const userinfo = props.app.userinfo || {};
  const { sShift = "", sTeamNo = "" } = userinfo;
  return (
    <div className={styles.teamInfo}>
      <div className="mesTitle">
        <img src={iocnObj.groupIcon} />
        班组信息
      </div>
      <Row gutter="5" wrap={false}>
        <Col flex={"160px"}>
          <Row style={rowStyle}>
            <Col flex={1}>
              {sEmployeeNo ? (
                <img
                  src={`${
                    commonConfig.interface_host
                  }api/ZEBC_042/${sActualEmployeeNo || sEmployeeNo}`}
                  onError={event => {
                    event.target.src = iocnObj.userImg;
                  }}
                />
              ) : (
                <img src={iocnObj.userImg} />
              )}
              <div className="user">
                <span>机长：</span>
                <span>{sActualEmployeeName || sEmployeeName}</span>
              </div>
              <div>
                <span>班组：</span>
                <span>{sTeamNo}</span>
              </div>
              <div>
                <span>班次：</span>
                <span>{sShift == 1 ? "白班" : "夜班"}</span>
              </div>
            </Col>
          </Row>
        </Col>
        <Col flex={1}>
          <StaticEditTable {...tableProps} />
        </Col>
      </Row>
    </div>
  );
};

const MesDynamicNum = ({ num: numNew = 0, sName }) => {
  const fontColor = () => {
    if (["dTrayQty"].includes(sName)) {
      return "red";
    }
    return "#1890FF";
  };

  // 将数字转换为字符串并分割成整数和小数部分
  const parts = numNew.toString().split(".");
  // 对整数部分应用逗号分隔
  const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  // 如果有小数部分，将其与格式化的整数部分重新组合
  const decimalPart = parts.length > 1 ? "." + parts[1] : "";
  const showNum = integerPart + decimalPart;

  return (
    <span
      style={{ fontSize: 22, fontWeight: 600, color: fontColor() }}
      className={styles.MesDynamicNumItem}
      id={`MesDynamicNum_${sName}`}
    >
      {showNum}
    </span>
  );
};

const CurrentTimeComponent = () => {
  const [time, setTime] = useState(moment().format("HH:mm:ss"));
  useEffect(() => {
    const getTime = () => {
      const currentTime = moment().format("HH:mm:ss");
      setTime(currentTime);
    };

    getTime();
    const timer = setInterval(() => {
      getTime();
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return <span>{time}</span>;
};

export default SiderInfoComponent;