/*
 * @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 iInterface = 1;
  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 } = props;
    const conditonValues = props.onGetSqlConditionValues(deviceTargetInfoConfig);

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

    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 {
                  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 = {}, workOrderInfoData } = props;

  const [workOrderInfoDataOne = {}] = workOrderInfoData;
  const { iPjMachine } = workOrderInfoDataOne;

  const { gdsconfigformslave = [] } = deviceTargetInfoConfig;
  const showConfig = gdsconfigformslave.filter(
    item => (item.sName && item.bControl && item.sControlName.indexOf("Btn") === -1) || (iPjMachine && item.sName && item.iTag === 100)
  );

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

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

  return (
    <div className={`${styles.deviceTargetInfo} ${iPjMachine ? styles.deviceTargetInfo1 : ""}`}>
      <div className="mesTitle" style={{ padding: "10px 10px 5px" }}>
        <img src={iocnObj.facilityIcon} />
        设备及目标信息
      </div>
      {showConfig.map((config, index) => {
        if (index > (iPjMachine ? 8 : 6)) 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} viewRow={viewRow} />
              </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;
                    props.onTableBtnClick({
                      name: "deviceTargetInfo",
                      record: viewRow,
                      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 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/${sEmployeeNo}`}
                  onError={event => {
                    event.target.src = iocnObj.userImg;
                  }}
                />
              ) : (
                <img src={iocnObj.userImg} />
              )}
              <div className="user">
                <span>机长：</span>
                <span>{sEmployeeName}</span>
              </div>
              <div>
                <span>班组：</span>
                <span>{sTeamNo}</span>
              </div>
              <div>
                <span>班次：</span>
                <span>{sShift == 1 ? "早班" : sShift == 2 ? "中班" : "夜班"}</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;