/*
 * @Author: Sakura
 * @LastEditors: Sakura
 * @Date: 2024-02-26 10:55:04
 * @Description: 首界面
 */

// 第三方组件
import React, {
  useReducer,
  useContext,
  useEffect,
  useRef,
  useState
} from "react";
import moment from "moment";
import {
  ConfigProvider,
  Space,
  Popover,
  Modal,
  Input,
  Divider,
  message
} from "antd";
import {
  UndoOutlined,
  UserAddOutlined,
  SwapOutlined,
  AppstoreOutlined
} from "@ant-design/icons";
import zhCN from "antd/lib/locale-provider/zh_CN";

// 内容展示组件
import TeamInfo from "../teamInfo";
import ScheduledTasks from "../scheduledTasks";
import ProductionExec from "../productionExec";
import OperationGuid from "../operationGuide";
import QueryTracking from "../queryTracking";
import ServiceUpkeep from "../serviceUpkeep";

import teamIcon from "./assets/teamIcon.png";
import c_teamIcon from "./assets/c_teamIcon.png";
import planTaskIcon from "./assets/planTaskIcon.png";
import c_planTaskIcon from "./assets/c_planTaskIcon.png";
import proExeIcon from "./assets/proExeIcon.png";
import c_proExeIcon from "./assets/c_proExeIcon.png";
import queryTraceIcon from "./assets/queryTraceIcon.png";
import c_queryTraceIcon from "./assets/c_queryTraceIcon.png";
import guideIcon from "./assets/guideIcon.png";
import c_guideIcon from "./assets/c_guideIcon.png";
import serviceIcon from "./assets/serviceIcon.png";
import c_serviceIcon from "./assets/c_serviceIcon.png";
import systemIcon from "./assets/systemIcon.png";
import c_systemIcon from "./assets/c_systemIcon.png";

// 弹窗组件
import CommonModalComponent from "../common/commonModalComponent";
import CommonFilePreviewComponent from "../common/commonFilePreviewComponent";
import FaceCollectionComponent from "../common/faceCollectionComponent";
import { DraggableConfirmModal } from "@/components/Draggable";

// 通用方法
import * as commonUtils from "@/utils/utils";
import * as commonServices from "@/services/services";
import * as commonConfig from "@/utils/config";

// 样式、图片
import styles from "./index.less";
import logo from "./assets/logo.png";

const { myContext, reducer } = commonUtils;

// 初始化数据
const getInitialState = props => {
  const { app } = props;
  const { currentMesPane, menuMap, menuMapOpposite } = app;
  return {
    currentContent: "teamInfo",
    routerPath: [],
    sModelsId: "0",
    sModelType: "",
    isEditPwd: false,
    menuMap,
    menuMapOpposite,
    sParentConditions: {},
    ...currentMesPane
  };
};

// 修改密码
const OpenModalEditPwd = props => {
  const { hooksProps, dispatch } = useContext(myContext);
  if (!hooksProps.isEditPwd) return "";
  const [pwdForm, setPwdForm] = useState({
    sOldPwd: "",
    sUserPwd: "",
    sUserPwdAgain: "",
    sId: props.app.userinfo.sId
  });
  // 确认修改密码
  const handleOk = () => {
    if (pwdForm.sUserPwd !== pwdForm.sUserPwdAgain) {
      message.error("两次输入的密码不一致！", 5);
      return;
    }
    const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@ #$%^&*()_+`\-={}:";'<>?,.\/]).{6,64}$/;
    if (!passwordRegex.test(pwdForm.sUserPwd)) {
      message.error("新密码必须包含字母、数字和特殊字符，且至少6位！", 5);
      return;
    }
    const url = `${
      commonConfig.server_host
    }sftlogininfo/updatePasswordUserName/update?sModelsId=${100}`;
    props.dispatch({
      type: "app/editPwd",
      payload: {
        url,
        value: pwdForm,
        editPwdType: "oee",
        succeed: () => {
          dispatch(["saveState", { isEditPwd: false }]);
        }
      }
    });
  };

  const inputStyle = {
    border: "1px solid #AAA",
    marginTop: 10,
    borderRadius: 5
  };

  return (
    <Modal
      className="mesCommonModal mesComfirm"
      title="修改密码"
      open={hooksProps.isEditPwd}
      onOk={handleOk}
      onCancel={() => dispatch(["saveState", { isEditPwd: false }])}
    >
      <Input.Password
        style={{ ...inputStyle, marginTop: 0 }}
        placeholder="请输入原密码"
        onChange={e => setPwdForm({ ...pwdForm, sOldPwd: e.target.value })}
      />
      <Input.Password
        style={inputStyle}
        placeholder="请输入新密码"
        onChange={e => setPwdForm({ ...pwdForm, sUserPwd: e.target.value })}
      />
      <Input.Password
        style={inputStyle}
        placeholder="请确认新密码"
        onChange={e =>
          setPwdForm({ ...pwdForm, sUserPwdAgain: e.target.value })
        }
      />
    </Modal>
  );
};

let _state = {};

// 业务层
const useIndexMesEvent = props => {
  const [state, dispatch] = useReducer(reducer, getInitialState(props));

  _state = state;
  // 打开通用弹窗
  const handleOpenCommonModal = ({
    type,
    url,
    sActiveId,
    title,
    sParentConditions,
    copyTo,
    parentProps,
    modalCallback
  }) => {
    if (!type) return;

    let newType = type;
    if (type === "commonModal") {
      const {
        [`${type}Visible`]: visible,
        [`${type}1Visible`]: visible1
      } = _state;

      if (visible1) {
        newType = "commonModal2";
      } else if (visible) {
        newType = "commonModal1";
      }
    }

    dispatch([
      "saveState",
      {
        [`${newType}Visible`]: true,
        [`${newType}Url`]: url,
        [`${newType}sActiveId`]: sActiveId,
        [`${newType}Title`]: title,
        [`${newType}sParentConditions`]: sParentConditions,
        [`${newType}copyTo`]: copyTo,
        [`${newType}parentProps`]: parentProps,
        [`${newType}modalCallback`]: modalCallback
      }
    ]);
  };

  // 关闭通用弹窗
  const handleCloseCommonModal = ({ type }) => {
    window.bXingchejiluModal = false;
    window.deviceTargetInfoModal = false;
    if (!type) return;

    let newType = type;
    if (type === "commonModal") {
      const {
        [`${type}1Visible`]: visible1,
        [`${type}2Visible`]: visible2
      } = _state;

      if (visible2) {
        newType = "commonModal2";
      } else if (visible1) {
        newType = "commonModal1";
      }
    }

    dispatch([
      "saveState",
      {
        [`${newType}Visible`]: false
      }
    ]);
  };

  // 跳转页面
  const handleChangeRouter = params => {
    const {
      routerPath,
      sModelsId,
      sModelType,
      type,
      path = [],
      sParentConditions = {} // 上层页面带过来的查询条件
    } = params;
    const { managementData = [] } = props.app;
    const { menuMapOpposite } = state;
    const [lv1, lv2] = path;
    if (type === "name") {
      const lv1Content = managementData.find(item => item.sMenuName === lv1);
      if (!lv1Content || commonUtils.isEmptyArr(lv1Content.children)) return;
      const lv2Content = lv1Content.children.find(
        item => item.sMenuName === lv2
      );
      if (!lv2Content) return;
      const currentContent = lv1Content.sId;
      const sModelsId = lv2Content.sId;
      const sModelType = lv2Content.sName;
      handleChangeRouter({
        routerPath: [menuMapOpposite[currentContent]],
        sModelsId,
        sModelType,
        sParentConditions
      });
    } else if (type === "id") {
      // 未上班不能进维修保养
      // const userinfo = commonUtils.getAppData("userinfo");
      // if (!userinfo.bStartWork && menuMapOpposite[lv1] === "serviceUpkeep") {
      //   Modal.warning({
      //     title: "温馨提示:",
      //     content: <div>请先上班后再操作！</div>,
      //     okText: "确认"
      //   });
      //   return;
      // }

      dispatch([
        "saveState",
        {
          currentContent: menuMapOpposite[lv1],
          routerPath: [menuMapOpposite[lv1]],
          sModelsId: lv2,
          sModelType,
          sParentConditions
        }
      ]);
    } else {
      dispatch([
        "saveState",
        {
          currentContent: routerPath[0],
          routerPath,
          sModelsId,
          sModelType,
          sParentConditions
        }
      ]);
    }
  };

  // 设置遮罩
  const handleSetMask = status => {
    dispatch([
      "saveState",
      {
        maskVisible: status
      }
    ]);
  };

  // 注册全局方法
  useEffect(() => {
    props.dispatch({
      type: "app/saveGlobalFun",
      payload: {
        onOpenCommonModal: handleOpenCommonModal,
        onCloseCommonModal: handleCloseCommonModal,
        onChangeRouter: handleChangeRouter,
        onSetMask: handleSetMask
      }
    });
  }, []);

  // 监听菜单变化
  const { currentContent, sModelsId, sModelType, sParentConditions } = state;
  useEffect(
    () => {
      props.dispatch({
        type: "app/saveCurrentMesPane",
        payload: { currentContent, sModelsId, sModelType, sParentConditions }
      });
    },
    [currentContent, sModelsId, sModelType]
  );

  useEffect(() => {
    const connectWs = () => {
      if (
        props.app.webSocket === null ||
        props.app.webSocket?.readyState !== WebSocket.OPEN
      ) {
        console.log("================webSocket连接======================");
        props.dispatch({
          type: "app/createWebSocket",
          payload: { reStart: true, dispatch: props.dispatch }
        });
      }
    };

    connectWs();
    const timer = setInterval(() => {
      connectWs();
    }, 50000);

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

  useEffect(() => {
    window.instructSetLock = false;
    window.bXingchejiluModal = false;
    window.deviceTargetInfoModal = false;
  }, []);

  return {
    props,
    hooksProps: state,
    dispatch,
    onOpenCommonModal: handleOpenCommonModal, // 打开通用弹窗
    onChangeRouter: handleChangeRouter // 跳转页面
  };
};

// MES首页
const IndexMes = baseProps => {
  const { props, ...rest } = useIndexMesEvent(baseProps);

  const [logoutShow, setLogoutShow] = useState(false);
  if (!props.app.globalFun) return "";

  // 退出登录二次效验
  const logout = () => {
    setLogoutShow(true);
  };

  // 退出登录请求
  const handleColseOee = () => {
    const { app, sModelsId } = props;
    const { sId } = app.userinfo;

    const iPlcNo = commonUtils.isNotEmptyObject(app.iPlcNo)
      ? commonUtils.convertStrToNumber(app.iPlcNo)
      : 0;
    if (iPlcNo > 0) {
      const sProcedureName = "sp_OEE_Exit";
      const sProcedureValue = {
        sMachineId: app.sMachineId,
        sTeamId: app.sTeamId
      };
      handleGenericProcedureCall(
        sProcedureName,
        sProcedureValue,
        app.token,
        sModelsId
      );
    }
    const url = `${commonConfig.server_host}logout`;
    props.dispatch({
      type: "app/loginOut",
      payload: { url, sId, loginOutType: "loginMesOut" }
    });
  };

  /* 自定义存储过程 */
  const handleGenericProcedureCall = async (
    sProcedureName,
    value,
    token,
    sModelsId
  ) => {
    const url = `${
      commonConfig.server_host
    }procedureCall/doGenericProcedureCall?sModelsId=${sModelsId}`;
    const returnData = (await commonServices.postValueService(
      token,
      value,
      url
    )).data;
    if (returnData.code === -1) {
      getServiceError(returnData);
    }
  };

  /**   获取sql下拉数据   */
  const getServiceError = async returnData => {
    props.dispatch({ type: "app/throwErrorMes", payload: returnData });
  };

  return (
    <ConfigProvider locale={zhCN}>
      <myContext.Provider
        value={{
          props,
          ...rest,

          logout
        }}
      >
        <div className={styles.indexMes}>
          <HeaderConponent />
          <div className="layout">
            <SiderComponent />
            <ContentComponent />

            {/* 修改密码弹窗 */}
            <OpenModalEditPwd {...props} />
            {/* 退出登录弹窗 */}
            {logoutShow && (
              <DraggableConfirmModal
                btnShow={false}
                content={"是否退出登录"}
                onOk={() => {
                  handleColseOee();
                  setLogoutShow(false);
                }}
                onCancel={() => setLogoutShow(false)}
              />
            )}
          </div>
        </div>
        <CommonModal />
        {/*<MaskComponent />*/}
      </myContext.Provider>
    </ConfigProvider>
  );
};

// 头部
const HeaderConponent = () => {
  const { props } = useContext(myContext);

  const weekday = ["日", "一", "二", "三", "四", "五", "六"];
  const [time, setTime] = useState("0000-00-00 00:00:00");
  const { logout } = useContext(myContext);
  useEffect(() => {
    const getTime = () => {
      const currentTime = moment().format("YYYY-MM-DD HH:mm:ss");
      const currentWeek = moment().weekday();
      setTime(`${currentTime}${" "}${" "}星期${weekday[currentWeek]}`);
    };

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

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

  const { app } = props;
  const { userinfo, sMachineNameStr, sTeamNameSName } = app;
  const { sUserNameBak: sUserName, sShift } = userinfo;

  return (
    <div className="header">
      <div className="logo">
        <img src={logo} alt="logo" />
      </div>
      <div className="title">
        <span>伟盛鑫淼生产执行系统（EBC-MES）</span>
      </div>
      <div className="userInfo">
        <Space size={30}>
          <div>
            <span>账号：</span>
            <span>{sUserName}</span>
          </div>
          <div>
            <span>机台：</span>
            <span>{sMachineNameStr}</span>
          </div>
          <div>
            <span>班组：</span>
            <span>{sTeamNameSName}</span>
            <span>
              ({sShift == 1 ? "白班" : "夜班"})
            </span>
          </div>
          <div>
            <span>{userinfo.bDelayedOvertime ? "延时加班" : ""}</span>
          </div>
        </Space>
      </div>
      <div className="funBar">
        <Divider type="vertical" />
        <div className="timeInfo">{time}</div>
        <Divider type="vertical" />
        <div className="logout" onClick={logout} />
      </div>
    </div>
  );
};

// 左侧侧边栏
const SiderComponent = () => {
  const { dispatch, hooksProps, props, ...rest } = useContext(myContext);
  const { currentContent, menuMap } = hooksProps;
  const menuList = [
    {
      id: "teamInfo",
      title: "班组信息",
      path: "/indexMes/teamInfo",
      icon: teamIcon,
      c_icon: c_teamIcon
    },
    {
      id: "scheduledTasks",
      title: "计划任务",
      path: "/indexMes/scheduledTasks",
      icon: planTaskIcon,
      c_icon: c_planTaskIcon
    },
    {
      id: "productionExec",
      title: "生产执行",
      path: "/indexMes/productionExec",
      icon: proExeIcon,
      c_icon: c_proExeIcon
    },
    {
      id: "serviceUpkeep",
      // title: "维修保养",
      title: "设备管理",
      path: "/indexMes/serviceUpkeep",
      icon: serviceIcon,
      c_icon: c_serviceIcon
    },
    // {
    //   id: "queryTracking",
    //   title: "查询追踪",
    //   path: "/indexMes/queryTracking",
    //   icon: queryTraceIcon,
    //   c_icon: c_queryTraceIcon
    // },
    {
      id: "operationGuide",
      title: "操作指南",
      path: "/indexMes/operationGuide",
      icon: guideIcon,
      c_icon: c_guideIcon
    }
  ];

  let [hoverState, setHoverState] = useState(null);

  return (
    <div className="sider">
      {menuList.map(item => (
        <div
          className={`menu ${item.id === currentContent ? "checked" : ""}`}
          key={item.id}
          onMouseEnter={() => setHoverState(item.id)}
          onMouseLeave={() => setHoverState(null)}
          onClick={() => {
            try {
              const { app } = props;
              const { managementData } = app;

              const defaultList = ["productionExec", "machineTasks"];
              const lv1Content = managementData.find(
                data => data.sId === menuMap[item.id]
              );
              const lv2Content =
                lv1Content.children.find(data =>
                  defaultList.some(list => data.sName.includes(list))
                ) ||
                lv1Content.children.find(
                  data => !data.sName.includes("commonModal")
                );
              rest.onChangeRouter({
                type: "id",
                path: [lv1Content.sId, lv2Content.sId],
                sModelType: lv2Content.sName
              });
            } catch (error) {
              rest.onChangeRouter({
                routerPath: [item.id],
                sModelsId: null,
                sModelType: null
              });
            }
          }}
        >
          <div className="icon">
            <img
              src={
                item.id === currentContent || item.id === hoverState
                  ? item.c_icon
                  : item.icon
              }
              alt={item.title}
            />
          </div>
          <div className="title">{item.title}</div>
        </div>
      ))}
      <SystemFunComponent />
    </div>
  );
};

// 系统功能
const SystemFunComponent = () => {
  const [popoverVisible, setPopoverVisible] = useState(false);
  const [popoverVisible1, setPopoverVisible1] = useState(false);
  const { props, dispatch } = useContext(myContext);

  const stopRef = useRef(false);
  const stopClose = useRef(false);
  const { logout } = useContext(myContext);
  useEffect(() => {
    const closePopoverVisible = () => {
      if (!stopRef.current) {
        setPopoverVisible(false);
      }
      if (!stopClose.current) {
        setPopoverVisible1(false);
      }
      stopRef.current = false;
      stopClose.current = false;
    };
    window.addEventListener("click", closePopoverVisible);
    return () => {
      window.removeEventListener("click", closePopoverVisible);
    };
  }, []);

  const handleGetMsg = str => {
    const msgArr = commonUtils.isNotEmptyObject(str) ? str.split("xpm") : "";
    const divStr = [];
    if (commonUtils.isNotEmptyArr(msgArr)) {
      for (let i = 0; i < msgArr.length; i++) {
        divStr.push(<p>{msgArr[i]}</p>);
      }
    }
    return divStr;
  };

  // 调用通用过程
  const handleProcedureCall = async (params, iFlag) => {
    const { onSuccess } = params;
    const { app } = props;

    const { sMachineNameSId, sTeamNameSId, sShift, token, sModelsId } = app;

    const value = {
      sBtnName: "restDailyReport",
      sProName: "sp_ResetDailyReport",
      sProInParam: JSON.stringify({
        changeValue: {},
        sButtonParam: {
          sproName: "sp_ResetDailyReport",
          inMap: "userinfo.sMachineGuid,userinfo.sTeamId"
        },
        params: [
          {
            key: "userinfo",
            value: [
              {
                sMachineGuid: sMachineNameSId,
                sTeamGuid: sTeamNameSId,
                sShift,
                sTeamId: sTeamNameSId,
                iFlag: iFlag
              }
            ]
          }
        ]
      })
    };

    if (iFlag !== undefined) {
      value.iFlag = iFlag;
    }

    const url = `${
      commonConfig.server_host
    }procedureCall/doGenericProcedureCall?sModelsId=${sModelsId}`;
    const returnData = (await commonServices.postValueService(
      token,
      value,
      url
    )).data;
    const { code, msg } = returnData;
    if (code === 1) {
      message.success(msg);
      onSuccess && onSuccess();
    } else if (code === -7) {
      Modal.confirm({
        title: "温馨提示:",
        content: <div>{handleGetMsg(msg)}</div>,
        okText: "确认",
        cancelText: "取消",
        onOk() {
          handleProcedureCall(params, 1);
        },
        onCancel() {}
      });
    } else if (code === -8) {
      Modal.info({
        title: "温馨提示:",
        content: <div>{handleGetMsg(msg)}</div>,
        okText: "确认",
        onOk() {
          onSuccess && onSuccess();
        }
      });
    } else {
      message.destroy();
      message.error(returnData.msg, 5);
    }
  };

  // 切换手动/切换自动
  const handleProcedureCall1 = async (params = {}, iFlag) => {
    const { onSuccess } = params;
    const { app } = props;

    const { sMachineNameSId, sTeamNameSId, sShift, token, sModelsId } = app;
    const userinfo = commonUtils.getAppData("userinfo");

    const value = {
      sBtnName: "switchReportType",
      sProName: "sp_SwitchReportType",
      sProInParam: JSON.stringify({
        changeValue: {},
        sButtonParam: {
          sproName: "sp_SwitchReportType",
          inMap: "userinfo.sMachineGuid,userinfo.sTeamId,userinfo.bPlcSd"
        },
        params: [
          {
            key: "userinfo",
            value: [
              {
                sMachineGuid: sMachineNameSId,
                sTeamGuid: sTeamNameSId,
                sShift,
                sTeamId: sTeamNameSId,
                bPlcSd: userinfo.bPlcSd,
                iFlag: iFlag
              }
            ]
          }
        ]
      })
    };

    if (iFlag !== undefined) {
      value.iFlag = iFlag;
    }

    const url = `${
      commonConfig.server_host
    }procedureCall/doGenericProcedureCall?sModelsId=${sModelsId}`;
    const returnData = (await commonServices.postValueService(
      token,
      value,
      url
    )).data;
    const { code, msg } = returnData;
    if (code === 1) {
      message.success(msg);
      onSuccess && onSuccess();
    } else if (code === -7) {
      Modal.confirm({
        title: "温馨提示:",
        content: <div>{handleGetMsg(msg)}</div>,
        okText: "确认",
        cancelText: "取消",
        onOk() {
          handleProcedureCall1(params, 1);
        },
        onCancel() {}
      });
    } else if (code === -8) {
      Modal.info({
        title: "温馨提示:",
        content: <div>{handleGetMsg(msg)}</div>,
        okText: "确认",
        onOk() {
          onSuccess && onSuccess();
        }
      });
    } else {
      message.destroy();
      message.error(returnData.msg, 5);
    }
  };

  const handleSystemFunClick = type => {
    switch (type) {
      case "changePwd":
        dispatch(["saveState", { isEditPwd: true }]);
        break;
      case "logout":
        logout();
        break;
      case "logout":
        break;
      case "shutdown":
        message.info("功能开发中，敬请期待...");
        break;
      case "restDailyReport":
        handleProcedureCall({
          onSuccess: () => {
            location.reload();
          }
        });

        break;
      case "faceCollection":
        dispatch(["saveState", { faceCollectionModalVisible: true }]);
        break;
      case "switchStatus":
        handleProcedureCall1({
          onSuccess: () => {
            const userInfoNew = commonUtils.getAppData("userinfo");
            userInfoNew.bPlcSd = !userInfoNew.bPlcSd;
            commonUtils.setAppData("userinfo", userInfoNew);
            location.reload();
          }
        });
        break;
      default:
        break;
    }
  };

  const getSystemFunContent = () => {
    const userinfo = commonUtils.getAppData("userinfo");
    const { bPlcSd } = userinfo;
    return (
      <div className="systemFunContent">
        <div
          className="restDailyReport"
          onClick={() => {
            handleSystemFunClick("faceCollection");
          }}
        >
          <UserAddOutlined />
          <span>人脸采集</span>
        </div>
        <div
          className="changePwd"
          onClick={() => {
            handleSystemFunClick("changePwd");
          }}
        >
          <span>修改密码</span>
        </div>
        <div
          className="logout"
          onClick={() => {
            handleSystemFunClick("logout");
          }}
        >
          <span>退出登录</span>
        </div>
        <div
          className="shutdown"
          onClick={() => {
            handleSystemFunClick("shutdown");
          }}
        >
          <span>关机</span>
        </div>
        <Popover
          placement="rightBottom"
          visible={popoverVisible1}
          overlayClassName={styles.systemFun}
          content={
            <div className="systemFunContent">
              <div
                className="restDailyReport"
                onClick={() => {
                  handleSystemFunClick("restDailyReport");
                }}
              >
                <UndoOutlined />
                <span>重置日报</span>
              </div>
              <div
                className="restDailyReport"
                onClick={() => {
                  handleSystemFunClick("switchStatus");
                }}
              >
                <SwapOutlined />
                <span>{bPlcSd ? "切换自动" : "切换手动"}</span>
              </div>
            </div>
          }
        >
          <div
            className="restDailyReport"
            onMouseEnter={() => {
              stopRef.current = true;
              stopClose.current = true;
            }}
            onMouseLeave={() => {
              stopRef.current = false;
              stopClose.current = false;
            }}
            onClick={() => {
              setPopoverVisible1(true);
            }}
          >
            <AppstoreOutlined />
            <span>更多功能</span>
          </div>
        </Popover>
      </div>
    );
  };

  let [hoverState, setHoverState] = useState(false);

  return (
    <Popover
      placement="rightBottom"
      visible={popoverVisible}
      overlayClassName={styles.systemFun}
      content={getSystemFunContent()}
    >
      <div
        className={`menu ${popoverVisible ? "checked" : ""}`}
        onMouseEnter={() => setHoverState(true)}
        onMouseLeave={() => setHoverState(false)}
        onClick={() => {
          stopRef.current = true;
          if (!stopClose.current) {
            setPopoverVisible(!popoverVisible);
          }
        }}
      >
        <div className="icon">
          <img src={popoverVisible || hoverState ? c_systemIcon : systemIcon} />
        </div>
        <div className="title">系统功能</div>
      </div>
    </Popover>
  );
};

// 中间内容区域
const ContentComponent = () => {
  const { props, hooksProps, dispatch, ...rest } = useContext(myContext);
  const { currentContent } = hooksProps;

  const handleOpenModal = params => {
    const { sModelsId, sModelType, title } = params;
    dispatch([
      "saveState",
      {
        commonModalVisible: true,
        commonModalTitle: title,
        sModalModelsId: sModelsId,
        sModalModelType: sModelType
      }
    ]);
  };

  const handleOpenfilePreviewModal = params => {
    console.log("=====666666");
  };

  const routerProps = {
    ...props,
    ...hooksProps,
    onChangeRouter: rest.onChangeRouter,
    onOpenModal: handleOpenModal,
    onOpenFilePreviewModal: handleOpenfilePreviewModal,
    onOpenCommonModal: rest.onOpenCommonModal
  };

  let viewComponent = {
    // 班组信息
    teamInfo: () => <TeamInfo {...routerProps} />,
    // 计划任务
    scheduledTasks: () => <ScheduledTasks {...routerProps} />,
    // 生产执行
    productionExec: () => <ProductionExec {...routerProps} />,
    // 维修保养
    serviceUpkeep: () => <ServiceUpkeep {...routerProps} />,
    // 查询追踪
    queryTracking: () => <QueryTracking {...routerProps} />,
    // 操作指南
    operationGuide: () => <OperationGuid {...routerProps} />
  };

  return (
    <>
      {currentContent ? (
        <div className="content" id="xlyMesContent">
          {viewComponent[currentContent]()}
        </div>
      ) : (
        ""
      )}
    </>
  );
};

// 弹窗事件
const CommonModal = () => {
  const { props, hooksProps, dispatch, ...rest } = useContext(myContext);
  const { sModalModelsId, sModalModelType } = hooksProps;

  const handleGetCommonModalProps = sName => {
    return {
      ...props,
      visible: hooksProps[`${sName}Visible`],
      url: hooksProps[`${sName}Url`] || undefined,
      title: hooksProps[`${sName}Title`],
      width: hooksProps[`${sName}Width`] || undefined,
      height: hooksProps[`${sName}Height`] || undefined,
      style: hooksProps[`${sName}Style`] || {},
      sModelsId: hooksProps[`${sName}sActiveId`] || sModalModelsId,
      sParentConditions: hooksProps[`${sName}sParentConditions`] || {},
      copyTo: hooksProps[`${sName}copyTo`] || "",
      sModelType: sModalModelType,
      onOpenCommonModal: rest.onOpenCommonModal,
      onCancel: () => {
        window.bXingchejiluModal = false;
        window.deviceTargetInfoModal = false;
        dispatch(["saveState", { [`${sName}Visible`]: false }]);
      },
      parentProps: hooksProps[`${sName}parentProps`],
      modalCallback: hooksProps[`${sName}modalCallback`]
    };
  };

  return (
    <>
      {/* 通用弹窗 */}
      <CommonModalComponent {...handleGetCommonModalProps("commonModal")} />
      <CommonModalComponent {...handleGetCommonModalProps("commonModal1")} />
      <CommonModalComponent {...handleGetCommonModalProps("commonModal2")} />
      {/* 附件弹窗 */}
      <CommonFilePreviewComponent
        {...handleGetCommonModalProps("commonFilePreviewModal")}
      />
      {/* 人脸采集弹窗 */}
      <FaceCollectionComponent
        {...handleGetCommonModalProps("faceCollectionModal")}
      />
    </>
  );
};

// 遮罩
const MaskComponent = () => {
  const { hooksProps, dispatch } = useContext(myContext);
  const { maskVisible } = hooksProps;
  if (!maskVisible) return "";

  return (
    <div
      className={styles.mask}
      onClick={() => {
        dispatch(["saveState", { maskVisible: false }]);
      }}
    />
  );
};

export default IndexMes;