import React from "react";
import { Tooltip } from "antd";
import * as commonFunc from "@/components/Common/commonFunc";
import styles from "../index.less";

const OperationGuide = props => {
  const handleOpenFile = url => {
    props.onOpenCommonModal({
      type: "commonFilePreviewModal",
      url
    });
  };

  const operationGuide = commonFunc.showLocalMessage(props, 'operationGuide', '操作指引');
  const digitalFactoryMES = commonFunc.showLocalMessage(props, 'digitalFactoryMES', '数字工厂MES系统操作指引.pdf');
  const keyOperationMES = commonFunc.showLocalMessage(props, 'keyOperationMES', 'MES关键操作说明.xlsx');
  const MESPrinterSolutions = commonFunc.showLocalMessage(props, 'MESPrinterSolutions', 'MES打印机更换纸张后亮红灯解决方法.pdf');
  const workshopMESPrinters = commonFunc.showLocalMessage(props, 'workshopMESPrinters', '车间MES打印机更换纸张.pdf');
  return (
    <div className={styles.broadsideCardBox}>
      <div className="title1">{operationGuide}</div>
      <div className="part1">
        <Tooltip
          title={
            <div style={{ fontSize: 18 }}>{digitalFactoryMES}</div>
          }
          placement="left"
        >
          <div
            className="image1"
            onClick={() => {
              handleOpenFile("./Digital Factory MES System Operation Guide.pdf");
            }}
          />
        </Tooltip>
        <Tooltip
          title={<div style={{ fontSize: 18 }}>{keyOperationMES}</div>}
          placement="left"
        >
          <div
            className="image2"
            onClick={() => {
              handleOpenFile("./MES Key Operation Description.xlsx");
            }}
          />
        </Tooltip>
      </div>
      <div className="fileName">
        <Tooltip
          placement="left"
          title={
            <div style={{ fontSize: 18 }}>{digitalFactoryMES}</div>
          }
        >
          <div>{digitalFactoryMES}</div>
        </Tooltip>
        <Tooltip
          placement="left"
          title={<div style={{ fontSize: 18 }}>{keyOperationMES}</div>}
        >
          <div>{keyOperationMES}</div>
        </Tooltip>
      </div>
      <div className="part1">
        <Tooltip
          title={
            <div style={{ fontSize: 18 }}>
              {MESPrinterSolutions}
            </div>
          }
          placement="left"
        >
          <div
            className="image3"
            onClick={() => {
              handleOpenFile("./MES Printer Red Light Resolution After Paper Replacement.pdf");
            }}
          />
        </Tooltip>
        <Tooltip
          title={<div style={{ fontSize: 18 }}>{workshopMESPrinters}</div>}
          placement="left"
        >
          <div
            className="image4"
            onClick={() => {
              handleOpenFile("./Workshop MES Printer Paper Replacement.pdf");
            }}
          />
        </Tooltip>
      </div>
      <div className="fileName">
        <Tooltip
          placement="left"
          title={
            <div style={{ fontSize: 18 }}>
              {MESPrinterSolutions }
            </div>
          }
        >
          <div>{MESPrinterSolutions}</div>
        </Tooltip>
        <Tooltip
          placement="left"
          title={<div style={{ fontSize: 18 }}>{workshopMESPrinters}</div>}
        >
          <div>{workshopMESPrinters}</div>
        </Tooltip>
      </div>
    </div>
  );
};

export default OperationGuide;