import React, { useEffect, useState } from "react";
import { Button, Modal, Space } from "antd";
import RouterComponent from "@/routes/mes/routerComponent";

// 通用方法
import * as commonUtils from "@/utils/utils";

const CommonModalComponent = props => {
  const bSmall = props?.sModelsId ==='17211911815017669983448000';
  const {
    visible,
    title,
    width = bSmall? "calc(75vw - 110px)" : "calc(100vw - 110px)",
    height =  bSmall? "calc(80vh - 60px)" :  "calc(100vh - 60px)",
    onCancel
  } = props;

  if (!visible) return "";

  let { style } = props;
  if (commonUtils.isEmptyObject(style)) {
    style = {
      padding: 0,
      margin: 0,
      top: 60,
      left: bSmall? 216: 110
    };
  }

  const [extraBtns, setExtraBtns] = useState([]);

  let titleNew =
    props.sModelsId === "12710101117087374661080"
      ? props.parentProps.btnConfig.showName
      : title;

  if (props.copyTo?.table0?.[0]?.sPrompt) {
    titleNew = (
      <div
        style={{
          width: "calc(100vw - 230px)",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center"
        }}
      >
        <span>
          {titleNew} - {props.copyTo.table0[0].sPrompt}
        </span>
        <span>{props.copyTo.table0[0].sRightPrompt}</span>
      </div>
    );
  }

  const closable = !props.copyTo?.table0?.[0]?.deviceTargetInfoModalAutoShow;
  useEffect(() => {
    return () => {
      window.deviceTargetInfoModalAutoShow = false;
    };
  }, []);

  return (
    <Modal
      title={titleNew}
      open={visible}
      width={width}
      height={height}
      style={style}
      className="mesCommonModal"
      closable={closable}
      keyboard={closable}
      maskClosable={closable}
      footer={
        <Space>
          {extraBtns}
          <Button
            size="large"
            disabled={!closable}
            onClick={() => {
              props.onCancel && props.onCancel();
            }}
          >
            取消
          </Button>
        </Space>
      }
      onCancel={onCancel}
    >
      <div
        style={{
          width: "100%",
          height: "100%"
        }}
      >
        <RouterComponent {...props} setExtraBtns={setExtraBtns} />
      </div>
    </Modal>
  );
};

export default CommonModalComponent;