import React, { useState, useEffect, useRef } from 'react';
import styles from './styles.less';
import { Modal, Button, Icon } from 'antd';
import ShowItem, { dragEventList } from './ShowItem';
import { apiRequest } from "../../utils/request";

let fakeFileInfo = {
  path: '/u/202112/09145847wsz2.jpg',
  name: '摇摇后摇',
};



export default function PictureSignature({
  json,
  // fileInfo,
  basicUrl,
  openEdit = true,
}) {
  let fileInfo = fakeFileInfo;
  const [showModal, setShowModal] = useState(false);
  const [otherProps, setOtherProps] = useState({});
  const [imageInfo, setImageInfo] = useState({
    width: 100,
    height: 100,
  });
  const changeShowModal = () => {
    setShowModal(!showModal);
  };

  useEffect(() => {
    if (json.otherProps) {
      try {
        let func = new Function(json.otherProps);
        let otherPropsX = func();
        setOtherProps(otherPropsX);
        dragEventList(setOtherProps, otherPropsX);
        let image = new Image(); //新建一个img标签（还没嵌入DOM节点)
        image.src = basicUrl + fileInfo?.path;
        image.onload = () => {
          setImageInfo({
            width: image.width,
            height: image.height,
          });
        };
        console.log(otherPropsX);
      } catch (e) {
        console.log('签章组件 其余配置项出错,没有返回一个正确的值');
        return false;
      }
    }
  }, [json.otherProps]);

  const { ModalProps, signConfig, footerButtons } = otherProps;

  const handleClickButton = (clickType) => {
    switch (clickType){
      case 'save':
        apiRequest('/ImageLibApi/merge', {
          background: fileInfo?.path,
          content: JSON.stringify({
            objs: otherProps.signConfig,
          }),
        })
        break;
      case 'restore':
        let func = new Function(json.otherProps);
        let otherPropsX = func();
        setOtherProps(otherPropsX);
        break;
      default:
        return true;
    }
  }

  const Footer = () => {
    if (openEdit) {
      return footerButtons.map(g => {
        return (
          <Button type={g.type}
                  key={g.key}
                  onClick={()=>{handleClickButton(g.clickType)}}
          >
            {g.name}
          </Button>
        );
      });
    }else{
      return null;
    }
  };
  return (
    <div className={styles.outSideDiv}>
      {fileInfo && fileInfo?.path && (
        <img
          className={styles.onePic}
          src={basicUrl + fileInfo?.path}
          alt={fileInfo.name}
          onClick={changeShowModal}
        />
      )}
      {showModal && (
        <Modal
          visible={true}
          destroyOnClose={true}
          maskClosable={false}
          onCancel={changeShowModal}
          className={styles.ModalClass}
          footer={<Footer />}
          title={'图片签章'}
          width={'90vw'}
          bodyStyle={{
            minHeight: '80vh',
            overflow: 'auto',
          }}
          {...ModalProps}
        >
          <div className={styles.modalParentDiv}>
            {openEdit && ( // 开启签章功能
              <div
                className={styles.modalDiv}
                style={{
                  backgroundImage: `url(${basicUrl + fileInfo?.path})`,
                  width: imageInfo.width,
                  height: imageInfo.height,
                }}
                alt={'拖拽区域'}
                draggable={false}
                id={'dropZone'}
              >
                  {Array.isArray(signConfig) &&
                    signConfig.map(g => {
                      return (
                        <div
                          key={g.key}
                          data-mes={g.key}
                          draggable={false}
                          className={styles.oneSetItem}
                          style={{
                            top: g.y,
                            left: g.x,
                          }}
                        >
                          <div className={styles.draggableIcon} draggable={true}>
                            <Icon type="edit" />
                          </div>
                          <ShowItem {...g}
                                    basicUrl={basicUrl}
                                    />
                        </div>
                      );
                    })}
              </div>
            )}
            {!openEdit && ( // 不开启签章功能 只是预览图片
              <div className={styles.readOnlyImage}>
                <img
                  src={basicUrl + fileInfo?.path}
                  alt={fileInfo.name}
                  style={{ maxWidth: '95vw' }}
                />
              </div>
            )}
          </div>
        </Modal>
      )}
    </div>
  );
}
