import ImageLazy from "@/components/ImageLazy";
import { getWallDetailAPI } from "@/store/action/B3Wall";
import { ImgListType } from "@/types";
import { Button, Modal } from "antd";
import React, { useCallback, useEffect, useState } from "react";
import "./index.css";

type Props = {
  id?: number;
  imgList?: ImgListType[];
  closeMoalFu: () => void;
};

function WallLook({ id, imgList, closeMoalFu }: Props) {
  const [imgShowList, setImgShowList] = useState<ImgListType[]>([]);

  const getImgInfo = useCallback(async (id: number) => {
    const res = await getWallDetailAPI(id);
    const imgListRes = res.data.file;
    setImgShowList(imgListRes);
  }, []);

  useEffect(() => {
    if (id) getImgInfo(id);
    else setImgShowList(imgList!);
  }, [getImgInfo, id, imgList]);

  // 动态修改模态框的宽度
  useEffect(() => {
    const dom: any = document.querySelector(".WallLook .ant-modal");
    if (dom && imgShowList && imgShowList.length > 2)
      dom.style.width = imgShowList.length * 200 + "px";
  }, [imgShowList]);

  return (
    <Modal
      wrapClassName="WallLook"
      destroyOnClose
      open={true}
      title="预览效果"
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="main">
        {/* 渲染图片 */}
        <div className="imgListBox">
          {imgShowList.map((v) => (
            <div className="imgListRow" key={v.id}>
              <ImageLazy src={v.filePath!} width="100%" height="100%" />
            </div>
          ))}
        </div>

        <br />
        <div className="button">
          <Button onClick={closeMoalFu}>关闭</Button>
        </div>
      </div>
    </Modal>
  );
}

const MemoWallLook = React.memo(WallLook);

export default MemoWallLook;
