/*
 * @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,
  Button
} from "antd";
import {
  UndoOutlined,
  UserAddOutlined,
  SwapOutlined,
  AppstoreOutlined
} from "@ant-design/icons";
import * as commonFunc from "@/components/Common/commonFunc";
import zhCN from "antd/lib/locale-provider/zh_CN";
import enUS from 'antd/lib/locale-provider/en_US'; // 导入英文语言包
import zhTW from 'antd/lib/locale-provider/zh_TW'; // 导入繁体中文语言包
import Draggable from 'react-draggable';


// 内容展示组件
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);
  const [pwdForm, setPwdForm] = useState({
    sOldPwd: "",
    sUserPwd: "",
    sUserPwdAgain: "",
    sId: props.app.userinfo.sId
  });
  const oldPassword = commonFunc.showLocalMessage(props, 'oldPassword', '请输入原密码');
  const newPassword = commonFunc.showLocalMessage(props, 'newPassword', '请输入新密码');
  const passswordAgain = commonFunc.showLocalMessage(props, 'passswordAgain', '请再次输入密码');
  const ModifyPassword = commonFunc.showLocalMessage(props, 'ModifyPassword','修改密码');/* 修改 */
  // 确认修改密码
  const handleOk = () => {
    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={ModifyPassword}
      open={hooksProps.isEditPwd}
      onOk={handleOk}
      onCancel={() => dispatch(["saveState", { isEditPwd: false }])}
    >
      <Input
        style={{ ...inputStyle, marginTop: 0 }}
        placeholder={oldPassword}
        onChange={e => setPwdForm({ ...pwdForm, sOldPwd: e.target.value })}
      />
      <Input
        style={inputStyle}
        placeholder={newPassword}
        onChange={e => setPwdForm({ ...pwdForm, sUserPwd: e.target.value })}
      />
      <Input
        style={inputStyle}
        placeholder={passswordAgain}
        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;
  }, []);

  useEffect(() => {
    const { userinfo } = props.app;
    const { sLanguage } = userinfo;
    document.querySelector('html').setAttribute('lang', sLanguage);
  }, []);

  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 });
  };
  const currentLanguage = props?.app?.userinfo?.sLanguage || 'zhCN'; // 默认为中文
  const getLocale = () => {
    switch(currentLanguage) {
      case 'sEnglish':
        return enUS;
      case 'sBig5':
        return zhTW;
      default:
      {
        moment.locale('zh-cn');
        return zhCN;
      }
    }
  };
  const bExsitLogin = commonFunc.showLocalMessage(props, 'bExsitLogin', '是否退出登录');
  const FriendlyReminder = commonFunc.showLocalMessage(props, 'FriendlyReminder', '温馨提示');
  return (
    <ConfigProvider locale={getLocale()}>
      <myContext.Provider
        value={{
          props,
          ...rest,

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

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

// 头部
const HeaderConponent = () => {
  const { props } = useContext(myContext);
  const { app } = props;
  const { userinfo, sMachineNameStr, sTeamNameSName } = app;
  const { sUserNameBak: sUserName, sShift } = userinfo;

  const sLanguage = userinfo.sLanguage;
  let weekday = ["日", "一", "二", "三", "四", "五", "六"];
  const sunTitle = sLanguage ==='sChinese' ? '星期' : '';
  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}${" "}${" "}${sunTitle}${weekday[currentWeek]}`);
    };

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

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


  const logoTitle = commonFunc.showLocalMessage(props, 'EBC-MES', '小羚羊生产执行系统');
  const account= commonFunc.showLocalMessage(props, 'account', '账号');
  const machine= commonFunc.showLocalMessage(props, 'machine', '机台');
  const classGroup = commonFunc.showLocalMessage(props, 'classGroup', '班组');
  const dayShift = commonFunc.showLocalMessage(props, 'dayShift', '白班');
  const nightShift = commonFunc.showLocalMessage(props, 'nightShift', '夜班');
  const delayedOvertime = commonFunc.showLocalMessage(props, 'delayedOvertime', '延迟加班');

  function translateWeekdays() {
    // 中文星期数组
    let weekday = ["日", "一", "二", "三", "四", "五", "六"];

    // 定义中英文和繁体中文星期的映射关系
    const translations = {
      sEnglish: {
        "日": "Sunday",
        "一": "Monday",
        "二": "Tuesday",
        "三": "Wednesday",
        "四": "Thursday",
        "五": "Friday",
        "六": "Saturday"
      },
      sBig5: {
        "日": "日",
        "一": "一",
        "二": "二",
        "三": "三",
        "四": "四",
        "五": "五",
        "六": "六"
      }
    };

    // 根据用户语言设置进行转换（默认为中文）
    if (userinfo.sLanguage === 'sEnglish' || userinfo.sLanguage === 'sBig5') {
      return weekday.map(day => translations[userinfo.sLanguage][day] || day);
    }

    return weekday;
  }
  weekday = translateWeekdays(sLanguage);




    const [ isModalOpen, setIsModalOpen ] = useState(false);
    const objRef = useRef({});
    const handleCancel = () => setIsModalOpen(false);
    window.$wkcFullStatus = (item , is) =>{
        objRef.current = {
            ...objRef.current,
            ...item
        }
        setIsModalOpen(is);
    }




  return (
    <div className="header">
      <div className="logo">
        <img src={logo} alt="logo" />
      </div>
      <div className="title">
        <span>{logoTitle}</span>
      </div>
      <div className="userInfo">
        <Space size={30}>
          <div>
            <span>{account}：</span>
            <span>{sUserName}</span>
          </div>
          <div>
            <span>{machine}：</span>
            <span>{sMachineNameStr}</span>
          </div>
          <div>
            <span>{classGroup}：</span>
            <span>{sTeamNameSName}</span>
            <span>({sShift == 1 ? dayShift : nightShift})</span>
          </div>
          <div>
            <span>{userinfo.bDelayedOvertime ? delayedOvertime : ""}</span>
          </div>
        </Space>
      </div>
      <div className="funBar">
        <Divider type="vertical" />
        <div className="timeInfo">{time}</div>
        <Divider type="vertical" />
        <div className="logout" onClick={logout} />
      </div>

        <Modal
            title="Basic Modal"
            open={isModalOpen}
            width={'100vw'}
            height={'100vh'}
            onCancel={handleCancel}
            footer={null}
            mask={false}
            closable={false}
            destroyOnClose={true}
            maskClosable={false}
            wrapClassName={ styles.ztwwwww }>
            <MachineMessageComponent e={objRef.current} shutDown={handleCancel} props ={props} />
        </Modal>

    </div>
  );
};


// 停机状态栏
const MachineMessageComponent = ({ e  , shutDown, props }) => {
    const value = e.item?.props?.value || {};
    const { current: startTime } = useRef(moment().format("YYYY-MM-DD HH:mm:ss"));
    const { backgroundColor, conent2, fontSize } = value;
    const [currentTime, setCurrentTime] = useState("");
    const [diffHours, setDiffHours] = useState(0);
    const [diffMins, setDiffMins] = useState(0);
    const [diffSecs, setDiffSecs] = useState(0);
    useEffect(() => {
      const getTime = () => {
        const currentTimeNew = moment().format("YYYY-MM-DD HH:mm:ss");
        setCurrentTime(currentTimeNew);

        const duration = moment.duration(
          moment(currentTimeNew).diff(moment(startTime))
        );
        const hours = duration.asHours().toString().split(".")[0];
        const minutes = (duration.asMinutes() % 60).toString().split(".")[0];
        const seconds = duration.asSeconds() % 60;

        setDiffHours(hours<=9? `0${hours}`: hours);
        setDiffMins(minutes<=9? `0${minutes}`: minutes );
        setDiffSecs(seconds<=9? `0${seconds}`: seconds);
      };

      getTime();
      const timer = setInterval(() => {
        console.log('定时器状态')
        getTime();
      }, 1000);

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

  const FriendlyReminder = commonFunc.showLocalMessage(props, 'FriendlyReminder', '温馨提示');
  const BtnSure = commonFunc.showLocalMessage(props, 'BtnSure', '确认');
  const BtnCancel = commonFunc.showLocalMessage(props, 'BtnCancel', '取消');
  const confirmState = commonFunc.showLocalMessage(props, 'confirmState', '确认退出该状态？');

    const handleMenuClose = () => {
      Modal.confirm({
        title: FriendlyReminder,
        content: <div>{confirmState}</div>,
        okText: BtnSure,
        cancelText: BtnCancel,
        zIndex: 2000,
        onOk() {
          shutDown()
        },
        onCancel() {}
      });
    };


    const isMinMax = useRef('max');
    const draggleRef = useRef(null);
    const [bounds, setBounds] = useState({ left: 0, top: 0, bottom: 0, right: 0 });
    const onStart = (_event, uiData) => {
        const { clientWidth, clientHeight } = window.document.documentElement;
        const targetRect = draggleRef.current?.getBoundingClientRect();
        if (!targetRect) {
          return;
        }
        setBounds({
          left: -targetRect.left + uiData.x,
          right: clientWidth - (targetRect.right - uiData.x),
          top: -targetRect.top + uiData.y,
          bottom: clientHeight - (targetRect.bottom - uiData.y),
        });
    };


    return (
        <div className={`${styles.modalBoxStyle} ${isMinMax.current}`}>

            {
                isMinMax.current == 'min'?
                <Draggable defaultPosition={{ x: document.body.clientWidth-400-30, y: 70 }} bounds={bounds}  onStart={(event, uiData) => onStart(event, uiData)}>
                    <div ref={draggleRef} className={styles.maxBoxViews} style={{ '--bgColor' : backgroundColor }}>
                        <div className="mixbox" onDoubleClick={()=>isMinMax.current = 'max'}>
                            <h2>{conent2}</h2>
                            <div className="p">开始时间 {startTime}</div>
                            <div className="p">停机耗时：{diffHours}时 {diffMins}分 {diffSecs}秒</div>
                            <div className="btn">
                                <Button size="large" type="primary" className={styles.btnWg} onClick={()=>isMinMax.current = 'max'} > 最大化 </Button>
                                <Button size="large" type="primary" className={styles.btnWg} onClick={handleMenuClose} > 退出 </Button>
                            </div>
                        </div>
                    </div>
                </Draggable>
                :
                <div className={styles.machineStatusContent} style={{ backgroundColor }}>
                    <div className="conent1">设备停机状态告知</div>
                    <div className="conent2" style={fontSize ? { fontSize } : {}}>
                    {conent2}
                    </div>
                    <div className="conent3">
                    停机开始时间：
                    {startTime}
                    </div>
                    <div className="conent4">
                    系统当前时间：
                    {currentTime}
                    </div>
                    <div className="conent5">
                    此次停机耗时：
                    <span className="conent6">
                        约：
                        {diffHours}时 {diffMins}分 {diffSecs}秒
                    </span>
                    </div>
                    <div className="conent7">
                        <Button size="large" type="primary" className={styles.btnWg} onClick={()=>isMinMax.current = 'min'} > 最小化 </Button>
                        <Button size="large" type="primary" className={styles.btnWg} onClick={handleMenuClose} > 退出 </Button>
                    </div>
                </div>
            }

        </div>
    );
};




  // 左侧侧边栏
const SiderComponent = () => {
  const { dispatch, hooksProps, props, ...rest } = useContext(myContext);
  const { currentContent, menuMap } = hooksProps;

  const teamInformation= commonFunc.showLocalMessage(props, 'teamInformation', '班组信息');


  const scheduledTask= commonFunc.showLocalMessage(props, 'scheduledTask', '计划任务');

  const productionExecution= commonFunc.showLocalMessage(props, 'productionExecution', '生产执行');

  const maintenanceRepair= commonFunc.showLocalMessage(props, 'maintenanceRepair', '维修保养');

  const queryTracing= commonFunc.showLocalMessage(props, 'queryTracing', '查询追踪');

  const operationGuide= commonFunc.showLocalMessage(props, 'teamInformation', '操作指南');

  const menuList = [
    {
      id: "teamInfo",
      title: teamInformation,
      path: "/indexMes/teamInfo",
      icon: teamIcon,
      c_icon: c_teamIcon
    },
    {
      id: "scheduledTasks",
      title: scheduledTask,
      path: "/indexMes/scheduledTasks",
      icon: planTaskIcon,
      c_icon: c_planTaskIcon
    },
    {
      id: "productionExec",
      title: productionExecution,
      path: "/indexMes/productionExec",
      icon: proExeIcon,
      c_icon: c_proExeIcon
    },
    {
      id: "serviceUpkeep",
      title: maintenanceRepair,
      path: "/indexMes/serviceUpkeep",
      icon: serviceIcon,
      c_icon: c_serviceIcon
    },
    {
      id: "queryTracking",
      title: queryTracing,
      path: "/indexMes/queryTracking",
      icon: queryTraceIcon,
      c_icon: c_queryTraceIcon
    },
    {
      id: "operationGuide",
      title: operationGuide,
      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 systemFunctions = commonFunc.showLocalMessage(props, 'systemFunctions', '系统功能');

  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 FriendlyReminder = commonFunc.showLocalMessage(props, 'FriendlyReminder', '温馨提示');
    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: FriendlyReminder,
        content: <div>{handleGetMsg(msg)}</div>,
        onOk() {
          handleProcedureCall(params, 1);
        },
        onCancel() {}
      });
    } else if (code === -8) {
      Modal.info({
        title: FriendlyReminder,
        content: <div>{handleGetMsg(msg)}</div>,
        onOk() {
          onSuccess && onSuccess();
        }
      });
    } else {
      message.destroy();
      message.error(returnData.msg, 5);
    }
  };

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

    const FriendlyReminder = commonFunc.showLocalMessage(props, 'FriendlyReminder', '温馨提示');

    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: FriendlyReminder,
        content: <div>{handleGetMsg(msg)}</div>,
        onOk() {
          handleProcedureCall1(params, 1);
        },
        onCancel() {}
      });
    } else if (code === -8) {
      Modal.info({
        title: FriendlyReminder,
        content: <div>{handleGetMsg(msg)}</div>,
        onOk() {
          onSuccess && onSuccess();
        }
      });
    } else {
      message.destroy();
      message.error(returnData.msg, 5);
    }
  };

  const handleSystemFunClick = type => {
    const underDevelop = commonFunc.showLocalMessage(props, 'underDevelop', '功能开发中，敬请期待！');
    switch (type) {
      case "changePwd":
        dispatch(["saveState", { isEditPwd: true }]);
        break;
      case "logout":
        logout();
        break;
      case "logout":
        break;
      case "shutdown":
        message.info(underDevelop);
        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 ModifyPassword = commonFunc.showLocalMessage(props, 'ModifyPassword','修改密码');/* 修改密码 */
    const faceCollection = commonFunc.showLocalMessage(props, 'faceCollection', '人脸采集');
    const moreFunctions = commonFunc.showLocalMessage(props, 'moreFunctions', '更多功能');
    const Logout = commonFunc.showLocalMessage(props, 'Logout', '退出登录');
    const shutDown= commonFunc.showLocalMessage(props, 'shutDown', '关机');
    const resetDailyReport= commonFunc.showLocalMessage(props, 'resetDailyReport', '关机');
    const switchToManual= commonFunc.showLocalMessage(props, 'switchToManual', '切换手动');
    const SwitchAuto= commonFunc.showLocalMessage(props, 'SwitchAuto', '切换自动');


    const { bPlcSd } = userinfo;
    return (
      <div className="systemFunContent">
        <div
          className="restDailyReport"
          onClick={() => {
            handleSystemFunClick("faceCollection");
          }}
        >
          <UserAddOutlined />
          <span>{faceCollection}</span>
        </div>
        <div
          className="changePwd"
          onClick={() => {
            handleSystemFunClick("changePwd");
          }}
        >
          <span>{ModifyPassword}</span>
        </div>
        <div
          className="logout"
          onClick={() => {
            handleSystemFunClick("logout");
          }}
        >
          <span>{Logout}</span>
        </div>
        <div
          className="shutdown"
          onClick={() => {
            handleSystemFunClick("shutdown");
          }}
        >
          <span>{shutDown}</span>
        </div>
        <Popover
          placement="rightBottom"
          visible={popoverVisible1}
          overlayClassName={styles.systemFun}
          content={
            <div className="systemFunContent">
              {/*<div*/}
              {/*  className="restDailyReport"*/}
              {/*  onClick={() => {*/}
              {/*    handleSystemFunClick("restDailyReport");*/}
              {/*  }}*/}
              {/*>*/}
              {/*  <UndoOutlined />*/}
              {/*  <span>{resetDailyReport}</span>*/}
              {/*</div>*/}
              <div
                className="restDailyReport"
                onClick={() => {
                  handleSystemFunClick("switchStatus");
                }}
              >
                <SwapOutlined />
                <span>{bPlcSd ? SwitchAuto : switchToManual}</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>{moreFunctions}</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">{systemFunctions}</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;