/*
	* @Author: Sakura
 * @LastEditors: Sakura
	* @Date: 2024-02-28 9:55:04
	* @Description: 计划任务 ---- 机台任务
	*/
import React, { useEffect, useRef, useState } from "react";
import moment from "moment";
import {
  Carousel,
  Col,
  Row,
  Button,
  Input,
  Modal,
  Space,
  Dropdown,
  message,
  Tooltip
} from "antd";
import { SettingTwoTone } from "@ant-design/icons";
import * as commonFunc from "@/components/Common/commonFunc";
import * as commonUtils from "@/utils/utils";
import * as commonConfig from "@/utils/config";
import * as commonBusiness from "@/components/Common/commonBusiness";
import * as commonServices from "@/services/services";
import useCommonBase from "@/components/Common/CommonHooks/useCommonBase";
import StaticEditTable from "@/components/Common/CommonTable";
import styles from "./index.less";
import taskInfoIcon from "../assets/taskInfo2.png";
import statusIcon from "../assets/status.png";
import taskIcon from "../assets/task.png";
import timeIcon from "../assets/time.png";
import { handleOeeBtnEent } from "./common/handlePause";
import { operationFetch } from "../../productionExec/productionExecMain/operationFetch";

// 业务层
const useInfoEvent = props => {
  const { formData } = props;
  const [refreshCount, setRefreshCount] = useState(0);

  useEffect(
    async () => {
      if (commonUtils.isNotEmptyArr(formData)) {
        const colunmData = handleGetColumnData(formData, true);
        const result = await handleGetData(formData, true);
        const addState = {
          ...colunmData,
          ...result
        };
        props.onSaveState(addState);
      }
    },
    [formData, refreshCount]
  );

  // 获取表头数据
  const handleGetColumnData = (formData = [], isWait) => {
    let addState = {};
    for (let i = 0; i < formData.length; i++) {
      const config = formData[i];
      const column = commonFunc.getHeaderConfig(config);
      addState = {
        ...addState,
        [`slave${i}Column`]: column,
        [`slave${i}Config`]: config
      };
    }
    if (isWait) {
      return addState;
    } else {
      props.onSaveState(addState);
    }
  };

  // 获取数据集
  const handleGetData = async (formData = [], isWait, filter) => {
    let addState = {};
    for (let i = 0; i < formData.length; i++) {
      const config = formData[i];
      if (!config) continue;

      const conditonValues = props.onGetSqlConditionValues(config);

      if (config.sSqlStr === "Sp_OEE_ProductionReport") {
        conditonValues.sMachineId_s_pro = props.app.sMachineNameSId;
      }

      // 前期生产或反馈问题表必须有非空过滤条件
      if (
        (i === 1 && Object.values(conditonValues).includes("")) ||
        Object.values(conditonValues).includes(undefined)
      ) {
        continue;
      }

      const bFilter = [];
      if (filter) {
        Object.keys(filter).forEach(key => {
          bFilter.push({
            bFilterName: key,
            bFilterCondition: "like",
            bFilterValue: filter[key]
          });
        });
      }

      const result =
        (await props.onGetDataSet({
          name: `slave${i}`,
          configData: config,
          condition: {
            bFilter,
            sSqlCondition: { ...conditonValues }
          },
          isWait: true
        })) || {};
      props.setTempRef(result);
      addState = { ...addState, ...result };
    }
    props.setTempRef({}, true);
    if (isWait) {
      return addState;
    } else {
      props.onSaveState(addState);
    }
  };

  // 查询
  const handleSearch = sWorkOrderNo => {
    handleGetData([formData[0]], false, {
      sWorkOrderNo
    });
  };

  // 开工事件
  const handleStartWork = async params => {
    const { sModelsId, token, app } = props;
    const { name, record, config, tableData, iFlag } = params;
    const { sMachineId, sId, sSlaveId } = record;

    // /* 若设置了禁止跳单 选择数据不是第一条时进行提示 */
    // const iIndex = app.systemData.findIndex(item => item.sName === "CkxNoSkip");
    // if (iIndex > -1) {
    //   const sValue = app.systemData[iIndex].sValue;
    //   if (sValue === "1") {
    //     /* 如果设置了进制跳单 */
    //     const indexFirst = tableData.findIndex(
    //       item => sId === item.sId || sSlaveId === item.sSlaveId
    //     );
    //     if (indexFirst > 0) {
    //       message.warn("禁止跳单!");
    //       return;
    //     }
    //   }
    // }
    // // 验证是否单据是否被使用
    // const dataUrl = `${
    //   commonConfig.server_host
    // }bill/billCopyToCheckWork?sModelsId=${sModelsId}`;
    // const values = { sMachineId };
    // const dataReturn = (await commonServices.postValueService(
    //   token,
    //   values,
    //   dataUrl
    // )).data;
    // if (dataReturn.code !== 1) {
    //   props.getServiceError(dataReturn);
    //   return;
    // }

    // 单据可以使用
    const { startWorkConfig = {} } = config;
    const { sAssignField } = startWorkConfig;
    const allTableData = {
      [name]: record
    };
    let rowData = commonFunc.getDefaultData(config, allTableData); // 取默认值
    rowData = {
      ...rowData,
      ...commonFunc.getAssignFieldValue(sAssignField, record, allTableData),
      handleType: "add",
      sId: commonUtils.createSid(),
      sTeamId: app.sTeamNameSId,
      sMachineId: app.sMachineNameSId,
      sParentId: record.sId,
      tCreateDate: new Date()
    };

    const valuesNew = {};
    valuesNew.data = [];
    valuesNew.data.push(
      commonBusiness.mergeData(name, "plc_machinedata", [rowData], [])
    );

    if ((iFlag || Object.is(iFlag, 0)) && valuesNew.data[0]) {
      valuesNew.data[0].iFlag = iFlag;
    }

    const BtnSave = commonFunc.showMessage(
      app.commonConst,
      "BtnSave"
    ); /* 保存 */
    params.optName = BtnSave;
    params.sClientType = "1";
    const returnData = await commonBusiness.saveData({
      token,
      value: valuesNew,
      sModelsId,
      bMachineTask: true
    });

    return returnData;
    // if (commonUtils.isEmptyObject(returnData)) return;

    // props.onSaveState(
    //   {
    //     [`${name}SelectedRowKeys`]: [record.sId]
    //   },
    //   () => {
    //     props.dispatch({
    //       type: "app/saveGlobalData",
    //       payload: {
    //         currentStartWorkMachineTaskDataRow: rowData
    //       }
    //     });
    //     handleRefresh();
    //     setTimeout(() => {
    //       props.onChangeRouter({
    //         type: "name",
    //         path: ["生产执行", "生产执行"]
    //       });
    //     }, 500);
    //   }
    // );
    // this.props.onSaveCurrentState(slaveData, true, undefined, undefined, 1);
  };

  // 更新工单状态
  const handleUpdateStatus = async params => {
    const { doWorkState, record } = params;

    const { sModelsId, app } = props;

    const value = {
      plcMachinedata: record
    };

    const url = `${
      commonConfig.server_host
    }oee/doUpdateStatus/${doWorkState}?sModelsId=${sModelsId}&sMachineId=${
      record.sMachineId
    }`;
    const returnData = (await commonServices.postValueService(
      app.token,
      value,
      url
    )).data;

    if (returnData.code !== 1) {
      props.getServiceError(returnData);
      return false;
    }

    return true;
  };

  // 监听机台任务选中行变化
  const { slave0SelectedRowKeys = [], slave0Data = [], sModelsId } = props;
  useEffect(
    () => {
      if (!slave0Data.length) return;

      const globalData = commonUtils.convertStrToObj(
        localStorage.xlybusinessglobalData
      );
      const { currentSelectedMachineTaskDataRow = {} } = globalData;

      // 当前选中行sId,默认取缓存数据
      let currentSelectedRowKey = slave0SelectedRowKeys[0];
      if (
        !currentSelectedRowKey &&
        sModelsId === currentSelectedMachineTaskDataRow?.sModelsId
      ) {
        currentSelectedRowKey = currentSelectedMachineTaskDataRow.sId;
      }
      if (!currentSelectedRowKey) {
        currentSelectedRowKey = slave0Data[0].sId;
      }

      // 默认选中第一行
      if (!slave0SelectedRowKeys.length) {
        props.onSaveState({
          slave0SelectedRowKeys: [currentSelectedRowKey]
        });
      }

      // 将当前选中行保存到全局
      props.dispatch({
        type: "app/saveGlobalData",
        payload: {
          currentSelectedMachineTaskDataRow: {
            ...(slave0Data.find(item => item.sId === currentSelectedRowKey) ||
              {}),
            sModelsId
          }
        }
      });

      // 前期生产或反馈问题数据根据机台任务选中行变化
      handleGetData(["", formData[1]], false);
    },
    [slave0SelectedRowKeys[0], slave0Data.length]
  );

  // 监听开工任务变化
  useEffect(
    () => {
      if (commonUtils.isEmptyObject(props.slave0Data)) return;
      const startRowData = props.slave0Data.find(item => item.iStar === 1);
      if (!startRowData) return;
      props.dispatch({
        type: "app/saveGlobalData",
        payload: {
          currentStartWorkMachineTaskDataRow: startRowData
        }
      });
    },
    [JSON.stringify(props.slave0Data)]
  );

  // 刷新页面
  const handleRefresh = () => {
    setRefreshCount(refreshCount + 1);
  };

  const itemClickRef = useRef();

  // 开工、暂停事件
  const handleTableBtnClick = async item => {
    const { tableName, index, record, tableData, config, iFlag } = item;
    const { showName } = config;
    if (showName === "完工") {
      Modal.confirm({
        title: "温馨提示:",
        content: <div>确认完工？</div>,
        okText: "确认",
        cancelText: "取消",
        onOk() {
          handleUpdateProductionplan({ item, iFlag: 4 });
        }
      });
      return;
    }
    // const iStar = index === 0 ? 1 : 2;
    const { iStar } = record;

    if (iStar === 1) {
      // 如果只剩一条数据，询问是暂停还是完工
      if (tableData.length === 1) {
        const result = await new Promise(resolve => {
          Modal.confirm({
            title: "温馨提示:",
            content: <div>请选择要变更的状态</div>,
            okText: "完工",
            cancelText: "暂停",
            onOk() {
              resolve(true);
            },
            onCancel() {
              resolve(false);
            }
          });
        });
        if (result) {
          // 走完工接口
          handleUpdateProductionplan({ item, iFlag: 4 });
          return;
        }
      }

      // 开工中，走暂停接口
      handleUpdateProductionplan({ item, iFlag: 3 });
    } else if (iStar === 2 || iStar === 3) {
      // 暂停中，走开工接口
      const dataReturn = await handleStartWork(item);
      const { code, msg } = dataReturn;
      if (code === 1) {
        // 成功开工
        itemClickRef.current = null;
        message.success(dataReturn.msg);
        if (props.taskConfirmModalVisible) {
          props.onSaveState({
            taskConfirmModalVisible: false,
            taskConfirmModalMsg: "",
            tempTaskId: ""
          });
        }
        props.onChangeRouter({
          type: "name",
          path: ["生产执行", "生产执行"]
        });
      } else if (code === -7) {
        // 如果有开工中的任务，即接口返回-7，弹出确认窗体
        itemClickRef.current = { data: item };
        props.onSaveState({
          taskConfirmModalVisible: true,
          taskConfirmModalMsg: msg,
          tempTaskId: record.sId
        });
      } else {
        // 报错
        message.error(msg);
      }
    }
  };

  // 更新机台状态
  const handleUpdateProductionplan = async ({ item, iFlag }) => {
    const { app } = props;
    const { sId } = item.record;
    const { token } = app;
    const url = `${
      commonConfig.server_host
    }oee/updateProductionplan/${sId}/${iFlag}`;
    const dataReturn = (await commonServices.getService(token, url)).data;
    if (dataReturn.code === 1) {
      handleRefresh();
    } else {
      message.error(dataReturn.msg);
    }
  };

  return {
    ...props,
    // 其他对象
    itemClickRef,
    onSearch: handleSearch,
    onStartWork: handleStartWork, // 开工事件
    onRefresh: handleRefresh, // 刷新页面
    onTableBtnClick: handleTableBtnClick, // 开工、暂停事件
    onUpdateProductionplan: handleUpdateProductionplan // 更新机台状态
  };
};

/**
 * 暂停按钮
 * @param {*} params
 */
const handlePause = async params => {
  const { item, props } = params;
  const { record, config } = item;
  await operationFetch(
    { ...props, workOrderInfoData: [record] },
    config,
    config.sName || "fileError"
  );
  await handleOeeBtnEent({ props, item });
};

const MachineTasks = baseProps => {
  const props = useInfoEvent(useCommonBase({ ...baseProps }));
  const {
    app,
    slave0Config,
    slave1Column,
    slave1Data = [],
    slave2Column,
    slave2Data = []
  } = props;

  const bStartWork = commonUtils.getAppData("userinfo", "bStartWork");

  const [isTableLoading, setTableLoading] = useState(false);

  // const BtnTableCopyTo.startWork
  // 开工按钮配置
  const startWorkConfig =
    slave0Config?.gdsconfigformslave?.find(
      item => item.sControlName === "BtnTableCopyTo.startWork"
    ) || {};
  const pauseWorkConfig =
    slave0Config?.gdsconfigformslave?.find(
      item => item.sControlName === "BtnTableCopyTo.pauseWork"
    ) || {};

  // 表格业务
  const [sSrcNo, setSSrcNo] = useState("");
  // 顶部表格配置
  const tableProps = {
    ...commonBusiness.getTableTypes("slave0", props),
    tableProps: {
      onChange: () => {},
      loading: isTableLoading
    },
    tableBtnsConfig: params => {
      const { record, index } = params;
      const { iStar } = record;
      // const iStar = index === 0 ? 1 : 2;

      // const bStart = iStar === 1;
      // const bPause = iStar === 2;

      // 1 ：开工状态(显示暂停)   2: 暂停状态(显示开工)  3: 完工状态(显示完工，灰色)
      //  开工：开工接口（现在）1：正常， -7：有开工，要有提示， -1: 错误提示
      // -7 ：完工： iFlag:3 (完工上一条) 暂停：iFlag:2 (暂停上一条)
      // 暂停：新接口

      let showName, btnBgColor, sDefault;
      if (iStar === 1) {
        showName = "暂停";
        btnBgColor = "#FAAD14";
      } else if (iStar === 2 || iStar === 3) {
        showName = "开工";
        btnBgColor = "#1890FF";
      } else {
        showName = "完工";
        btnBgColor = "#AAA";
        sDefault = "${false}";
      }

      if (!bStartWork) {
        sDefault = "${false}";
      }

      return [
        { showName, btnBgColor, sDefault, startWorkConfig, pauseWorkConfig },
        { showName: "完工", btnBgColor: "#1890FF", sDefault }
      ];

      // return [
      //   {
      //     ...startWorkConfig,
      //     showName: "开工",
      //     btnBgColor: bStart ? "#1890FF" : "#AAA"
      //   },
      //   {
      //     ...pauseWorkConfig,
      //     showName: "暂停",
      //     btnBgColor: bPause ? "#FAAD14" : "#AAA"
      //   }
      // ];
    },
    onTableBtnClick: item => {
      props.onTableBtnClick(item);
      return;
      // 通用按钮操作
      // props.onTableBtnClick(item);
      const { tableName, index, record, tableData, config } = item;
      const { iStar } = record;
      const { showName } = config;
      if (iStar === 1 && showName === "开工") {
        setTableLoading(true);
        props.onStartWork(item).finally(() => {
          setTableLoading(false);
        });
      } else if (iStar === 2 && showName === "暂停") {
        setTableLoading(true);
        handlePause({ item, props }).finally(() => {
          setTableLoading(false);
          props.onRefresh();
        });
      }
    },
    tableBtnsWidth: "190px",
    // fixedHeight: "535px"
    fixedHeight: "calc(100vh - 460px)"
  };
  // 全部按钮事件
  const tableAll = () => {
    setSSrcNo("");
    props.onSearch();
  };
  // 查询按钮事件
  const tableQuery = () => {
    props.onSearch(sSrcNo);
  };

  // 前期生产或反馈问题业务
  const [issueType, setIssueType] = useState(4);
  const issueObj = slave1Column?.reduce((acc, item) => {
    const chineseKey = item.title.replace(/[0-9]/g, "");
    if (acc[chineseKey]) {
      acc[chineseKey].push(item);
    } else {
      acc[chineseKey] = [item];
    }
    return acc;
  }, {});

  let issue = [];

  if (issueObj) {
    issue = Object.keys(issueObj)?.map((key, i) => {
      return { name: key, items: issueObj[key], id: i };
    });
  }

  const component = id => {
    if (issue?.length > 0) {
      return (
        <div className="marginTop componentBox">
          {issue[id].items.map(item => (
            <p>
              <span>{item.title}：</span>
              {slave1Data[0] ? (
                <Tooltip
                  placement="topLeft"
                  title={
                    <span style={{ fontSize: 20 }}>
                      {slave1Data[0][item.dataIndex]}
                    </span>
                  }
                >
                  <span>{slave1Data[0][item.dataIndex]}</span>
                </Tooltip>
              ) : (
                ""
              )}
            </p>
          ))}
        </div>
      );
    }
  };

  const [carouselData, setCarouselData] = useState([
    {
      title: "暂无通告",
      content: "暂无通告",
      id: 999
    }
  ]);

  const { slave3Data = [] } = props;

  useEffect(
    () => {
      if (!slave3Data.length) return;

      const tempData = slave3Data.map((item, index) => ({
        title: `车间通告${index + 1}`,
        content: item.sNoticeMemo,
        id: index
      }));

      setCarouselData(tempData);
    },
    [slave3Data.length]
  );

  // 设备信息业务
  const slave2OneData = slave2Data[0] || {};
  const { countMapJsON } = slave2OneData;
  const countMap = commonUtils.convertStrToObj(countMapJsON);

  const taskInfoData = {};
  slave2Column?.forEach(obj => {
    taskInfoData[`${obj.dataIndex}Title`] = obj.title;
    taskInfoData[`${obj.dataIndex}Conent`] = countMap[obj.dataIndex];
  });

  return (
    <div className={styles.tasksBox}>
      <Row className={`tasksBg tasksTable`}>
        <Col span={24}>
          <div className="table">
            <StaticEditTable {...tableProps} />
          </div>
          <div className="tableSearch">
            <Button type="primary" size="large" onClick={tableAll}>
              {" "}
              全部{" "}
            </Button>
            <Input
              allowClear
              placeholder="工单编号"
              value={sSrcNo}
              onChange={e => setSSrcNo(e.target.value)}
            />
            <Button type="primary" size="large" onClick={tableQuery}>
              {" "}
              查询{" "}
            </Button>
          </div>
        </Col>
      </Row>
      {/* <Row gutter={[15, 0]} className={`marginTop`}>
        <Col span={18}>
          <div className={`tasksBg taskIssue`}>
            <h2>前期生产或反馈问题</h2>
            {issue?.map(item => (
              <Button
                className="taskBtn"
                key={item.id}
                type={issueType === item.id ? "primary" : ""}
                ghost={issueType === item.id ? false : true}
                onClick={() => setIssueType(item.id)}
              >
                {item.name}
              </Button>
            ))}
            {component(issueType)}
          </div>
        </Col>
        <Col span={6}>
          <div className={`tasksBg taskIssue`} style={{ maxWidth: "434px" }}>
            <Carousel autoplay>
              {carouselData.map(item => (
                <div key={item.id} className={`tasksCarousel`}>
                  <h2>{item.title}</h2>
                  <p>{item.content}</p>
                </div>
              ))}
            </Carousel>
          </div>
        </Col>
      </Row> */}
      <Row gutter={[15, 0]} className={`tasksBg marginTop taskInfo`}>
        <h2>设备信息</h2>
        <Col span={4} className="taskInfoBox">
          <div className={"leftBox"}>
            <img src={taskInfoIcon} alt={taskInfoData.sMachineNameTitle} />
            <div>
              <h3>{taskInfoData.sMachineNameTitle}：</h3>
              <p>{taskInfoData.sMachineNameConent}</p>
            </div>
          </div>
        </Col>
        <Col span={4} className="taskInfoBox">
          <div className={"leftBox"}>
            <img src={statusIcon} alt={taskInfoData.sStatusNameTitle} />
            <div>
              <h3>{taskInfoData.sStatusNameTitle}：</h3>
              <p>{taskInfoData.sStatusNameConent}</p>
            </div>
            <StatusBtnComponent />
          </div>
        </Col>
        <Col span={10} className="taskInfoBox">
          <div className={"centerBox"}>
            <img src={timeIcon} alt={taskInfoData.tStartingUpTimeTitle} />
            <div className="timeBox">
              <h3>{taskInfoData.tStartingUpTimeTitle}：</h3>
              <p>{taskInfoData.tStartingUpTimeConent}</p>
            </div>
            <div className="timeBox">
              <div className="bothEndsAlign">
                <p>{taskInfoData.tNorRunTimeTitle}：</p>
                <span>{taskInfoData.tNorRunTimeConent}</span>
              </div>
              <div className="bothEndsAlign">
                <p>{taskInfoData.tExeWaitTimeTitle}：</p>
                <span>{taskInfoData.tExeWaitTimeConent}</span>
              </div>
            </div>
            <div className="timeBox">
              <div className="bothEndsAlign">
                <p>{taskInfoData.tNorWaitTimeTitle}：</p>
                <span>{taskInfoData.tNorWaitTimeConent}</span>
              </div>
              <div className="bothEndsAlign">
                <p>{taskInfoData.tMaintenceTimeTitle}：</p>
                <span>{taskInfoData.tMaintenceTimeConent}</span>
              </div>
            </div>
          </div>
        </Col>
        <Col span={6} className="taskInfoBox">
          <div className={"leftBox"}>
            <img src={taskIcon} alt={taskInfoData.tStartingUpTimeTitle} />
            <div>
              <h3>今日完成任务批次/产量(个)：</h3>
              <p>
                {taskInfoData.iFinishTaskBatchConent} /{" "}
                {taskInfoData.iFinishProductionNumConent}
              </p>
            </div>
          </div>
        </Col>
      </Row>
      <TaskConfirmModal {...props} />
    </div>
  );
};

const TaskConfirmModal = props => {
  const { taskConfirmModalVisible, taskConfirmModalMsg } = props;
  if (!taskConfirmModalVisible) return "";

  const handleClose = () => {
    props.itemClickRef.current = null;
    props.onSaveState({ taskConfirmModalVisible: false });
  };

  return (
    <Modal
      title={<span style={{ fontSize: 22 }}>提示！</span>}
      open={taskConfirmModalVisible}
      width={500}
      height={250}
      className="mesCommonModal"
      footer={
        <Space>
          <Button
            size="large"
            type="primary"
            className={styles.btnWg}
            onClick={() => {
              if (props.itemClickRef.current?.data)
                props.onTableBtnClick({
                  ...(props.itemClickRef.current?.data || {}),
                  iFlag: 4
                });
              // handleClose();
            }}
          >
            完工
          </Button>
          <Button
            size="large"
            type="primary"
            className={styles.btnZt}
            onClick={() => {
              if (props.itemClickRef.current?.data)
                props.onTableBtnClick({
                  ...(props.itemClickRef.current?.data || {}),
                  iFlag: 3
                });
              // handleClose();
            }}
          >
            暂停
          </Button>
        </Space>
      }
      onCancel={handleClose}
    >
      <div className={styles.taskConfirmModal}>{taskConfirmModalMsg}</div>
    </Modal>
  );
};

// 全屏状态
const StatusBtnComponent = () => {
  const items = [
    {
      key: "4",
      label: <span className={styles.statusDropdown}>转产</span>,
      value: {
        conent2: "转产",
        backgroundColor: "#752AFE"
      }
    },
    {
      key: "1",
      label: <span className={styles.statusDropdown}>测试</span>,
      value: {
        conent2: "转产",
        backgroundColor: "#21C9FE"
      },
      children: [
        {
          key: "1-1",
          label: <span className={styles.statusDropdown}>产品打样</span>,
          value: {
            conent2: "产品打样",
            backgroundColor: "#21C9FE"
          }
        },
        {
          key: "1-2",
          label: <span className={styles.statusDropdown}>工艺测试</span>,
          value: {
            conent2: "工艺测试",
            backgroundColor: "#21C9FE"
          }
        }
      ]
    },
    {
      key: "2",
      label: <span className={styles.statusDropdown}>保养</span>,
      value: {
        conent2: "保养",
        backgroundColor: "#FF6600"
      },
      children: [
        {
          key: "2-1",
          label: <span className={styles.statusDropdown}>日常保养</span>,
          value: {
            conent2: "日常保养",
            backgroundColor: "#FF6600"
          }
        },
        {
          key: "2-2",
          label: <span className={styles.statusDropdown}>一级保养</span>,
          value: {
            conent2: "一级保养",
            backgroundColor: "#FF6600"
          }
        },
        {
          key: "2-3",
          label: <span className={styles.statusDropdown}>二级保养</span>,
          value: {
            conent2: "二级保养",
            backgroundColor: "#FF6600"
          }
        },
        {
          key: "2-4",
          label: <span className={styles.statusDropdown}>一级+二级保养</span>,
          value: {
            conent2: "一级+二级保养",
            backgroundColor: "#FF6600",
            fontSize: 130
          }
        },
        {
          key: "2-5",
          label: <span className={styles.statusDropdown}>年度保养</span>,
          value: {
            conent2: "年度保养",
            backgroundColor: "#FF6600"
          }
        }
      ]
    }
  ];

  const handleMenuClick = e => {
    message.success({
      top: 0,
      duration: 0,
      className: styles.machineStatus,
      content: <MachineMessageComponent e={e} />
    });
  };

  return (
    <div className={styles.statusBtn}>
      <Dropdown
        menu={{ items, onClick: handleMenuClick }}
        trigger={["click"]}
        placement="top"
        overlayClassName={styles.statusDropdown}
      >
        <Button type="link" size="large" style={{ fontSize: 26 }}>
          <SettingTwoTone />
        </Button>
      </Dropdown>
    </div>
  );
};

const MachineMessageComponent = ({ e }) => {
  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);
  const flagRef = useRef(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);
      setDiffMins(minutes);
      setDiffSecs(seconds);
    };

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

    const handleMenuClose = () => {
      if (flagRef.current) return;
      flagRef.current++;
      Modal.confirm({
        title: "温馨提示:",
        content: <div>确认退出该页面？</div>,
        okText: "确认",
        cancelText: "取消",
        zIndex: 2000,
        onOk() {
          message.destroy();
        },
        onCancel() {
          setTimeout(() => {
            flagRef.current = 0;
          }, 500);
        }
      });
    };

    setInterval(() => {
      document.addEventListener("click", handleMenuClose);
    }, 1000);

    return () => {
      clearInterval(timer);
      document.removeEventListener("click", handleMenuClose);
    };
  }, []);

  return (
    <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>
  );
};

export default MachineTasks;