/* eslint-disable */
import React, { useEffect, useState } from "react";
import { Form, Col, Upload, Image as ImageNew, message } from "antd";
import * as commonConfig from "@/utils/config";

// 判断图片是否存在
const checkImgExists = (imgUrl, success, error) => {
  const ImgObj = new Image();
  ImgObj.src = imgUrl;
  ImgObj.onload = () => {
    ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)
      ? success()
      : error();
  };
  ImgObj.onerror = () => {
    error();
  };
};

const TabSysParamIcon = props => {
  const { enabled, dispatch } = props;
  // 刷新页面
  const [, setRefresher] = useState(0);
  const refresh = () => {
    setRefresher(pre => pre + 1);
  };

  const [iconData, setIconData] = useState([
    { title: "标签页icon", imageUrl: "" },
    { title: "登录页logo", imageUrl: "" },
    { title: "主页logo", imageUrl: "" },
    { title: "版权logo", imageUrl: "" },
    { title: "后台登陆logo", imageUrl: "" },
    { title: "后台导航logo", imageUrl: "" }
  ]);

  // 获取默认数据
  useEffect(() => {
    for (let index = 0; index < 6; index++) {
      const imgUrl = `${
        commonConfig.server_host
      }file/downloadLogo?sLogoName=logo${index +
        1}&date=${new Date().getTime()}`;
      if (
        checkImgExists(
          imgUrl,
          () => {
            setIconData(pre => {
              pre[index].imageUrl = imgUrl;
              return pre;
            });
            refresh();
          },
          () => {
            refresh();
          }
        )
      ) {
      }
    }
  }, []);

  return (
    <>
      {iconData.map(({ title, imageUrl, bPreview = !enabled }, index) => {
        const uploadProps = {
          listType: "picture-card",
          className: "avatar-uploader",
          action: `${
            commonConfig.server_host
          }file/uploadLogo?sLogoName=logo${index + 1}`,
          disabled: bPreview,
          onChange: info => {
            const { fileList } = info;
            const file = fileList[fileList.length - 1];
            const { status, response } = file;
            if (status === "done") {
              if (response && response.code === 1) {
                const imageUrlNew = `${
                  commonConfig.server_host
                }file/downloadLogo?sLogoName=logo${index +
                  1}&date=${new Date().getTime()}`;
                const iconDataNew = [...iconData];
                iconDataNew[index].imageUrl = imageUrlNew;
                setIconData(iconDataNew);

                const logoImageInfo = [];
                iconDataNew.forEach(({ imageUrl }, index) => {
                  if (index < 4) {
                    logoImageInfo.push(imageUrl);
                  }
                });
                dispatch({
                  type: "content/saveLogoImageInfo",
                  payload: {
                    logoImageInfo
                  }
                });
              } else if (response && response.code === -1) {
                message.error(response.msg);
              }
            }
          },
          accept: "image/*",
          showUploadList: false,
          openFileDialogOnClick: !bPreview
        };
        return (
          <Col span={8} key={index}>
            <Form.Item
              label={title}
              labelCol={{ span: 12 }}
              wrapperCol={{ span: 12 }}
            >
              <Upload {...uploadProps}>
                {imageUrl ? (
                  <ImageNew
                    key={imageUrl}
                    src={imageUrl}
                    alt="avatar"
                    style={{
                      width: "100%"
                    }}
                    preview={bPreview}
                    // onMouseMove={e => {
                    //   if (e && e.target) {
                    //     const { clientX, clientY } = e;
                    //     const { right, top } = e.target.getBoundingClientRect();
                    //     console.log("=====", clientX, clientY, right, top);
                    //     if (
                    //       right > clientX &&
                    //       right - clientX < 20 &&
                    //       top < clientY &&
                    //       clientY - top < 20
                    //     ) {
                    //       if (!bPreview) {
                    //         console.log("=====true");
                    //         // setIconData(pre => {
                    //         //   pre[index].bPreview = true;
                    //         //   return pre;
                    //         // });
                    //       }
                    //     } else if (bPreview) {
                    //       console.log("=====false");
                    //       // setIconData(pre => {
                    //       //   pre[index].bPreview = false;
                    //       //   return pre;
                    //       // });
                    //     }
                    //   }
                    // }}
                  />
                ) : (
                  <div>
                    <div
                      style={{
                        marginTop: 8
                      }}
                    >
                      上传
                    </div>
                  </div>
                )}
              </Upload>
            </Form.Item>
          </Col>
        );
      })}
    </>
  );
};

export default TabSysParamIcon;