import React, { useCallback, useState } from "react";
import styles from "./index.module.scss";
import { baseURL } from "@/utils/http";
import imgLoding from "@/assets/img/login/loading.gif";
import imgErr from "@/assets/img/login/IMGerror.png";
import { EyeOutlined } from "@ant-design/icons";
import { useDispatch } from "react-redux";
import { Image } from "antd-mobile";

type Props = {
  width?: number;
  height?: number;
  src: string;
  noLook?: boolean;
};

function ImageLazy({ width = 100, height = 100, src, noLook }: Props) {
  const dispatch = useDispatch();

  // 默认不能预览图片，加载成功之后能预览
  const [lookImg, setLookImg] = useState(false);

  // 图片加载完成
  const onLoad = useCallback(() => {
    setLookImg(true);
  }, []);

  // 点击预览图片
  const lookBigImg = useCallback(() => {
    dispatch({
      type: "login/lookBigImg",
      payload: { url: baseURL + src, show: true },
    });
  }, [dispatch, src]);

  return (
    <div className={styles.ImageLazy} style={{ width: width, height: height }}>
      <div className="lazyBox">
        <Image
          lazy
          onLoad={onLoad}
          src={src ? baseURL + src : ""}
          placeholder={<img src={imgLoding} alt="" />}
          fallback={<img src={imgErr} alt="" />}
          fit="cover"
        />

        {/* 图片预览 */}
        {noLook || !lookImg ? null : (
          <div className="lookImg" onClick={lookBigImg}>
            <EyeOutlined />
            &nbsp;
            <div>预览</div>
          </div>
        )}
      </div>
    </div>
  );
}

const MemoImageLazy = React.memo(ImageLazy);

export default MemoImageLazy;
