import React, { useState, useEffect, useRef } from 'react';
import styles from './styles.less';
import { Modal, Button, Icon, message } from 'antd';
import ShowItem, { dragEventList, zipImage } from './ShowItem';
import { apiRequest } from '../../utils/request';
import { deepCopy } from '@/webPublic/one_stop_public/utils/myutils';

let fakeFileInfo = {
  path: '/u/202112/25143111x0ki.jpg', // 超大的图片
  name: '摇摇后摇.jpg',
};

const getContent = (signConfig = [], ratioX) => {
  let data = deepCopy(signConfig);
  return JSON.stringify({
    objs: data.map(g => {
      // 1200 的 x => 1500的 x
      //
      g.x = Math.ceil(g.x * ratioX);
      g.y = Math.ceil(g.y * ratioX);

      if (g.type === 'text') {
        g.fontSize = Math.ceil(g.fontSize * ratioX);
        g.y = g.y + (g.offsetY || 0);
        g.x = g.x + (g.offsetX || 0);
      }
      if (g.type === 'image') {
        g.w = Math.ceil(g.w * ratioX);
        g.h = Math.ceil(g.h * ratioX);
      }
      // console.log(g);
      return g;
    }),
  });
};

export default function PictureSignature({
  json,
  disabled,
  basicUrl,
  onChangeFile,
  imageIndex,
  form,
  // fileInfo,
  ...others
}) {
  let imageRef = useRef();
  const [fileInfo, setFileInfo] = useState({ ...others?.fileInfo });
  // const [fileInfo, setFileInfo] = useState(fakeFileInfo);
  const [openEdit, setOpenEdit] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const [otherProps, setOtherProps] = useState({});
  const [imageInfo, setImageInfo] = useState(null);
  const changeShowModal = () => {
    if (!showModal) {
      if (!imageInfo && !disabled) {
        zipImage(fileInfo.path, fileInfo.name, otherProps?.backgroundImageWidth).then(res => {
          let image = new Image(); //新建一个img标签（还没嵌入DOM节点)
          image.src = basicUrl + res;
          image.onload = () => {
            // alert(image.width);
            setImageInfo({
              width: image.width,
              height: image.height,
            });
          };
          setFileInfo({
            path: res,
            name: fileInfo.name,
            originPath: res,
          });
        });
      }
    }
    setShowModal(!showModal);
  };
  // console.log(json);

  useEffect(() => {
    if (otherProps?.signConfig && !imageRef?.current) {
      imageRef.current = true;
      dragEventList(setOtherProps, otherProps);
    }
  }, [otherProps]);

  useEffect(() => {
    if (json.otherProps) {
      try {
        let func = new Function(json.otherProps);
        let otherPropsX = func();
        setOtherProps(otherPropsX);
        console.log(otherPropsX);
      } catch (e) {
        console.log('签章组件 其余配置项出错,没有返回一个正确的值');
        return false;
      }
    }
  }, [json.otherProps]);

  const {
    ModalProps,
    signConfig,
    footerButtons,
    originButtons,
    backgroundImageWidth,
    saveSignConfigValue = '',
    showImageWidth = 1200,
  } = otherProps;

  const handleClickButton = clickType => {
    switch (clickType) {
      case 'startEdit': // 开始签章
        // console.log(imageInfo);
        setOpenEdit(true);
        break;
      case 'confirm': // 确定
        onChangeFile({ ...fileInfo }, imageIndex);
        changeShowModal();
        break;
      case 'save': // 保存签章
        let ratioX = backgroundImageWidth / showImageWidth; // 本来是 1500 的 图片 宽度变成了 1200 高度变成了 1200/1500 * imageInfo.height;
        // let ratioY = 1200 / backgroundImageWidth * imageInfo.height;
        // console.log(ratioX);
        // return ;
        let content = getContent(otherProps.signConfig, ratioX);
        apiRequest('/ImageLibApi/merge', {
          background: fileInfo?.path,
          content,
        }).then(res => {
          if (form && saveSignConfigValue) {
            form.setFieldsValue({
              [saveSignConfigValue]: content,
            });
          }
          if (res && res.path) {
            message.success('操作成功');
            let newPath = res.path;
            fileInfo.originPath = fileInfo.path;
            fileInfo.path = newPath;
            setFileInfo({ ...fileInfo });
            setOpenEdit(false);
          }
        });
        break;
      case 'restore': // 还原图片
        if (fileInfo.originPath) {
          fileInfo.path = fileInfo.originPath;
          setFileInfo({ ...fileInfo });
          setOpenEdit(false);
        }
        break;
      default:
        return true;
    }
  };

  const Footer = () => {
    if (disabled) {
      return null;
    }
    if (openEdit) {
      return footerButtons.map(g => {
        return (
          <Button
            type={g.type}
            key={g.key}
            onClick={() => {
              handleClickButton(g.clickType);
            }}
          >
            {g.name}
          </Button>
        );
      });
    } else {
      return originButtons.map(g => {
        return (
          <Button
            type={g.type}
            key={g.key}
            onClick={() => {
              handleClickButton(g.clickType);
            }}
          >
            {g.name}
          </Button>
        );
      });
    }
  };
  if (!fileInfo) {
    return null;
  }
  // console.log(imageInfo, fileInfo);
  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}
          getContainer={false}
          className={styles.ModalClass}
          footer={<Footer />}
          title={'图片签章'}
          width={showImageWidth + 50 + 'px'}
          bodyStyle={{
            minHeight: '700px',
            overflow: 'auto',
            padding: '5px',
            maxWidth: '99%',
            maxHeight: '99%',
          }}
          {...ModalProps}
        >
          <div className={styles.modalParentDiv}>
            {openEdit && ( // 开启签章功能
              <div
                className={styles.modalDiv}
                style={{
                  backgroundImage: `url(${basicUrl + fileInfo?.path})`,
                  width: showImageWidth,
                  height: imageInfo.height / (imageInfo.width / showImageWidth),
                }}
                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} data-mes={g.key} draggable={true}>
                          <Icon type="scissor" />
                        </div>
                        <ShowItem {...g} basicUrl={basicUrl} />
                      </div>
                    );
                  })}
              </div>
            )}
            {!openEdit && ( // 不开启签章功能 只是预览图片
              <div className={styles.readOnlyImage}>
                <img
                  src={basicUrl + fileInfo?.path + `?v=${Math.random()}`}
                  alt={fileInfo.name}
                  style={{
                    width: `${showImageWidth}px`,
                  }}
                />
              </div>
            )}
          </div>
        </Modal>
      )}
    </div>
  );
}

export function SignArray(props) {
  const { value, onChange, basicUrl, json, form } = props;
  let files = value?.files || [];
  const onChangeFile = (newFielInfo, imageIndex) => {
    if (newFielInfo && newFielInfo.path) {
      files[imageIndex] = newFielInfo;
      value.files = files;
      onChange(value);
    }
  };
  // console.log(value, '222222222222222')
  return (
    <div>
      {files.map((g, index) => {
        return (
          <PictureSignature
            json={json}
            basicUrl={basicUrl}
            fileInfo={g}
            form={form}
            imageIndex={index}
            onChangeFile={onChangeFile}
          />
        );
      })}
    </div>
  );
}
