import React from "react";
import { Tooltip } from "antd";
import styles from "../index.less";

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

  return (
    <div className={styles.broadsideCardBox}>
      <div className="title1">操作指引</div>
      <div className="part1">
        <Tooltip
          title={
            <div style={{ fontSize: 18 }}>数字工厂MES系统操作指引.pdf</div>
          }
          placement="left"
        >
          <div
            className="image1"
            onClick={() => {
              handleOpenFile("./数字工厂MES系统操作指引.pdf");
            }}
          />
        </Tooltip>
        <Tooltip
          title={<div style={{ fontSize: 18 }}>MES关键操作说明.xlsx</div>}
          placement="left"
        >
          <div
            className="image2"
            onClick={() => {
              handleOpenFile("./MES关键操作说明.xlsx");
            }}
          />
        </Tooltip>
      </div>
      <div className="fileName">
        <Tooltip
          placement="left"
          title={
            <div style={{ fontSize: 18 }}>数字工厂MES系统操作指引.pdf</div>
          }
        >
          <div>数字工厂MES系统操作指引.pdf</div>
        </Tooltip>
        <Tooltip
          placement="left"
          title={<div style={{ fontSize: 18 }}>MES关键操作说明.xlsx</div>}
        >
          <div>MES关键操作说明.xlsx</div>
        </Tooltip>
      </div>
      <div className="part1">
        <Tooltip
          title={
            <div style={{ fontSize: 18 }}>
              MES打印机更换纸张后亮红灯解决方法.pdf
            </div>
          }
          placement="left"
        >
          <div
            className="image3"
            onClick={() => {
              handleOpenFile("./MES打印机更换纸张后亮红灯解决方法.pdf");
            }}
          />
        </Tooltip>
        <Tooltip
          title={<div style={{ fontSize: 18 }}>车间MES打印机更换纸张.pdf</div>}
          placement="left"
        >
          <div
            className="image4"
            onClick={() => {
              handleOpenFile("./车间MES打印机更换纸张.pdf");
            }}
          />
        </Tooltip>
      </div>
      <div className="fileName">
        <Tooltip
          placement="left"
          title={
            <div style={{ fontSize: 18 }}>
              MES打印机更换纸张后亮红灯解决方法.pdf
            </div>
          }
        >
          <div>MES打印机更换纸张后亮红灯解决方法.pdf</div>
        </Tooltip>
        <Tooltip
          placement="left"
          title={<div style={{ fontSize: 18 }}>车间MES打印机更换纸张.pdf</div>}
        >
          <div>车间MES打印机更换纸张.pdf</div>
        </Tooltip>
      </div>
    </div>
  );
};

export default OperationGuide;