/*
 * @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,
  Form,
  DatePicker,
  Select,
} from "antd";
import {
  CloseOutlined,
  UserAddOutlined,
  SwapOutlined,
  AppstoreOutlined
} from "@ant-design/icons";
import zhCN from "antd/lib/locale-provider/zh_CN";
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 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="修改密码"
      open={hooksProps.isEditPwd}
      onOk={handleOk}
      onCancel={() => dispatch(["saveState", { isEditPwd: false }])}
    >
      <Input
        style={{ ...inputStyle, marginTop: 0 }}
        placeholder="请输入原密码"
        onChange={e => setPwdForm({ ...pwdForm, sOldPwd: e.target.value })}
      />
      <Input
        style={inputStyle}
        placeholder="请输入新密码"
        onChange={e => setPwdForm({ ...pwdForm, sUserPwd: e.target.value })}
      />
      <Input
        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]
  );

  const { webSocket: ws, userinfo } = props.app;
  const { url } = ws || {};
  const wsRef = useRef(ws);
  useEffect(() => {
    if (url) {
      wsRef.current = ws;
    }
  }, [url]);

  useEffect(() => {
    const connectWs = () => {
      if (!wsRef.current || wsRef.current.readyState === WebSocket.CLOSED || wsRef.current.readyState === WebSocket.CLOSING) {
        console.log("================webSocket不存在或已关闭,创建webSocket连接======================");
        props.dispatch({
          type: "app/createWebSocket",
          payload: { reStart: true, dispatch: props.dispatch }
        });
        return;
      }
      if (wsRef.current.readyState !== WebSocket.OPEN) return;
      const message = { flag: "connectTest", sId: "test", sendFrom: userinfo.sId };
      wsRef.current.send(JSON.stringify(message));
      window.wsTimer = setTimeout(() => {
        console.log("================未收到Test返回消息,webSocket重新连接======================");
        props.dispatch({
          type: "app/createWebSocket",
          payload: { reStart: true, dispatch: props.dispatch }
        });
      }, 3000);
    };

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

    return () => {
      clearInterval(timer);
      clearTimeout(window.wsTimer);
    }
  }, []);

  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;



  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>劲嘉生产执行系统（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>

      <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} />
      </Modal>

    </div>
  );
};


// 停机状态栏
const MachineMessageComponent = ({ e, shutDown }) => {
  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 handleMenuClose = () => {
    Modal.confirm({
      title: "温馨提示:",
      content: <div>确认退出该状态？</div>,
      okText: "确认",
      cancelText: "取消",
      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 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: "维修保养",
      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 [form] = Form.useForm();
  const handleProcedureCall = async (params, iFlag) => {
    const shiftValue = String(props.app.sShift || '1');
    const extraValues = await new Promise(resolve => {
      form.setFieldsValue({
        tReportDate: moment(),
        sTeamType: {
          value: shiftValue, // 统一为字符串类型
          label: shiftValue === '1' ? '白班' : '夜班'
        }
      });
      Modal.confirm({
        title: "切换手动",
        content: (
          <ConfigProvider locale={zhCN}>
            <Form layout="vertical" size="large" form={form}>
              <Form.Item label="报工日期" name="tReportDate">
                <DatePicker
                  style={{ width: "100%" }}
                  placeholder="请选择"
                  format="YYYY-MM-DD"
                />
              </Form.Item>
              <Form.Item label="班次" name="sTeamType">
                <Select
                  placeholder="请选择"
                  labelInValue
                >
                  <Select.Option value="1">白班</Select.Option>
                  <Select.Option value="2">夜班</Select.Option>
                </Select>
              </Form.Item>
            </Form>
          </ConfigProvider>
        ),
        wrapClassName: "mesCommonModal mesLoginForm",
        cancelText: "取消",
        okText: "确定",
        onOk() {
          const values = form.getFieldsValue();
          const tReportDate = values?.tReportDate.format("YYYY-MM-DD") || "";
          const sTeamType =  values.sTeamType?.value || '';
          resolve({ tReportDate, sTeamType });
        },
        onCancel() {
          resolve(false);
        }
      });
    });

    if (!extraValues) return;

    const { onSuccess } = params;
    const { app } = props;

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

    const value = {
      sBtnName: "BtnEventAuto",
      sProName: "sp_ResetDailyReport",
      sProInParam: JSON.stringify({
        changeValue: {},
        sButtonParam: {
          sproName: "sp_ResetDailyReport",
          inMap: "userinfo.sMachineGuid,userinfo.sTeamId,userinfo.tReportDate,userinfo.sTeamType"
        },
        params: [
          {
            key: "userinfo",
            value: [
              {
                ...extraValues,
                sMachineGuid: sMachineNameSId,
                sTeamGuid: sTeamNameSId,
                tOperationDate: moment().format("YYYY-MM-DD HH:mm:ss"),
                sShift,
                sTeamId: sTeamNameSId,
                iFlag: iFlag
              }
            ]
          }
        ]
      })
    };

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

    const url = `${commonConfig.server_host
      }procedureCall/doGenericProcedureCall?sModelsId=17211911815017669769986370`;
    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 extraValues = await new Promise(resolve => {
      const shiftValue = String(props.app.sShift || '1');
      form.setFieldsValue({
        tReportDate: moment(),
        sTeamType: {
          value: shiftValue, // 统一为字符串类型
          label: shiftValue === '1' ? '白班' : '夜班'
        }
      });
      Modal.confirm({
        title: "取消手动",
        content: (
          <ConfigProvider locale={zhCN}>
            <Form layout="vertical" size="large" form={form}>
              <Form.Item label="报工日期" name="tReportDate">
                <DatePicker
                  style={{ width: "100%" }}
                  placeholder="请选择"
                  format="YYYY-MM-DD"
                />
              </Form.Item>
              <Form.Item label="班次" name="sTeamType">
                <Select placeholder="请选择">
                  <Select.Option value="1">白班</Select.Option>
                  <Select.Option value="2">夜班</Select.Option>
                </Select>
              </Form.Item>
            </Form>
          </ConfigProvider>
        ),
        wrapClassName: "mesCommonModal mesLoginForm",
        cancelText: "取消",
        okText: "确定",
        onOk() {
          const values = form.getFieldsValue();
          const tReportDate = values?.tReportDate.format("YYYY-MM-DD") || "";
          const sTeamType =  values.sTeamType?.value || '';
          resolve({ tReportDate, sTeamType });
        },
        onCancel() {
          resolve(false);
        }
      });
    });

    if (!extraValues) return;

    const { onSuccess } = params;
    const { app } = props;

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

    const value = {
      sBtnName: "switchReportType",
      sProName: "sp_SwitchReportType",
      sProInParam: JSON.stringify({
        changeValue: {},
        sButtonParam: {
          sproName: "sp_SwitchReportType",
          inMap: "userinfo.sMachineGuid,userinfo.sTeamId,userinfo.tReportDate,userinfo.sTeamType"
        },
        params: [
          {
            key: "userinfo",
            value: [
              {
                ...extraValues,
                sMachineGuid: sMachineNameSId,
                sTeamGuid: sTeamNameSId,
                tOperationDate: moment().format("YYYY-MM-DD HH:mm:ss"),
                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 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: () => {
            message.success("操作成功, 请等待页面刷新", 2);
            setTimeout(() => {
              location.reload();
            }, 1500);
          }
        });
        break;
      case "faceCollection":
        dispatch(["saveState", { faceCollectionModalVisible: true }]);
        break;
      case "switchStatus":
        handleProcedureCall1({
          onSuccess: () => {
            message.success("操作成功, 请等待页面刷新", 2);
            setTimeout(() => {
              location.reload();
            }, 1500);
          }
        });
        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");
                }}
              >
                <SwapOutlined />
                <span>切换手动</span>
              </div>
              <div
                className="restDailyReport"
                onClick={() => {
                  handleSystemFunClick("switchStatus");
                }}
              >
                <CloseOutlined />
                <span>取消手动</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;