import ImageLazy from "@/components/ImageLazy";
import { Button, Modal, Radio } from "antd";
import React, { useCallback, useEffect, useState } from "react";
import { CheckOutlined } from "@ant-design/icons";
import classNames from "classnames";
import { baseURL } from "@/utils/http";
import { getDownImgAPI, getGoodsInfoByIdAPI } from "@/store/action/B2Goods";
import { FileListType } from "@/types";
import { MessageFu } from "@/utils/message";
import styles from "./index.module.scss";

type Props = {
  id: number;
  closeMoalFu: () => void;
};

function GoogsDown({ id, closeMoalFu }: Props) {
  // 通过id发送请求拿数据
  const getInfoFu = useCallback(async (id: number) => {
    const res = await getGoodsInfoByIdAPI(id);
    const dataRes: FileListType[] = res.data.file;
    const data: FileListType[] = [];
    dataRes.forEach((v) => {
      if (v.type === "img") data.push({ ...v, done: true });
    });
    setImgList(data);
  }, []);

  useEffect(() => {
    getInfoFu(id);
  }, [getInfoFu, id]);

  // 模拟请求数据图片列表

  const [imgList, setImgList] = useState<FileListType[]>([]);

  // 选中图片
  const selectImgFu = useCallback(
    (id: number) => {
      const newData = imgList.map((v) => {
        return {
          ...v,
          done: v.id === id ? !v.done : v.done,
        };
      });
      setImgList(newData);
    },
    [imgList]
  );

  // 分辨率
  const [isScale, setIsScale] = useState(0);

  // 水印
  const [isMark, setIsMark] = useState(0);

  // 点击下载
  const downImgFu = useCallback(async () => {
    const fileIds = imgList
      .filter((v) => v.done)
      .map((v) => v.id)
      .join(",");

    const res = await getDownImgAPI({ fileIds, isMark, isScale });
    if (res.code === 0) {
      const data: FileListType[] = res.data;
      data.forEach((v) => {
        const a = document.createElement("a"); // 创建一个a标签
        a.href = baseURL + v.filePath + "?t=" + Date.now(); //a标签的src属性赋值
        a.target = "_blank";
        a.download = v.fileName!; // a标签的download属性赋值
        document.body.appendChild(a); // 添加a标签到body下
        a.style.display = "none";
        a.click(); // 触发a标签点击事件
        document.body.removeChild(a); //  完成后删除a标签
      });
      MessageFu.success('下载成功!')
      closeMoalFu()
    }
  }, [closeMoalFu, imgList, isMark, isScale]);

  return (
    <Modal
      wrapClassName={styles.GoogsDown}
      destroyOnClose
      open={true}
      title="清“乾隆”款珐琅蓝彩十三行通景画瓷碗"
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="main">
        {/* 图片盒子 */}
        <div className="imgRowBox">
          {imgList.map((v) => (
            <div className="imgRow" key={v.id}>
              {/* 是否选中 */}
              <div
                onClick={() => selectImgFu(v.id!)}
                className={classNames(
                  "incoSelect",
                  v.done ? "incoSelectActive" : ""
                )}
              >
                <div>
                  <CheckOutlined />
                </div>
              </div>
              <ImageLazy src={v.filePath!} width="100%" height={130} />
            </div>
          ))}
        </div>
        {/* 分辨率和水印选择 */}
        <div className="radioBox">
          <div>
            分辨率：
            <Radio.Group
              onChange={(e) => setIsScale(e.target.value)}
              value={isScale}
            >
              <Radio value={0}>原图</Radio>
              <Radio value={1}>压缩</Radio>
            </Radio.Group>
          </div>
          <div>
            水印：
            <Radio.Group
              onChange={(e) => setIsMark(e.target.value)}
              value={isMark}
            >
              <Radio value={0}>无</Radio>
              <Radio value={1}>有</Radio>
            </Radio.Group>
          </div>
        </div>

        <div className="button">
          <Button
            type="primary"
            onClick={downImgFu}
            disabled={imgList.every((v) => !v.done)}
          >
            下载
          </Button>
          &emsp;
          <Button onClick={closeMoalFu}>取消</Button>
        </div>
      </div>
    </Modal>
  );
}

const MemoGoogsDown = React.memo(GoogsDown);

export default MemoGoogsDown;
