import React, { useEffect, useState } from "react";
import { Card, Dropdown, Modal, Input, message } from "antd";
import defaultImg from "@/assets/image/default.png"
import { GetFile, DeleteDataModel, SaveDataModel } from "@/api";

export default function ProjectCard({
  record,
  onFresh,
  onDelete,
  onChangeLocation,
  hideRemove,
}: {
  record: any;
  onFresh: () => void;
  onDelete: () => void;
  onChangeLocation: (id: string) => void;
  hideRemove?: boolean;
}) {
  const [showMenu, setShowMenu] = useState(false);
  const handleToEdit = () => {
    const { origin, pathname } = window.location;
    const enterpriseCode = sessionStorage.getItem("enterpriseCode");
    window.open(
      `${origin}${pathname}#/detail/${record.id}?enterpriseCode=${enterpriseCode}`
    );
  };

  const { confirm } = Modal;

  const [coverImg, setCoverImg] = useState<string>("");
  useEffect(() => {
    if (record.coverImage) {
      GetFile({ fileId: record.coverImage }).then((res) => {
       const blob = new Blob([res], { type: "image/png" });
       const url = URL.createObjectURL(blob);
       setCoverImg(url);
      });
    }
  }, []);

  return (
    <Card
      hoverable
      cover={
        <img
          style={{
            height: 120,
            objectFit: "cover",
            border: "solid 1px #f5f5f5",
          }}
          src={
            coverImg || defaultImg
          }
        />
      }
      onClick={() => handleToEdit()}
      onMouseOver={() => setShowMenu(true)}
      onMouseOut={() => setShowMenu(false)}
    >
      {showMenu && (
        <Dropdown
          menu={{
            items: [
              {
                key: "1",
                label: "重命名",
                onClick: () => {
                  let name = record.name;
                  confirm({
                    title: "重命名",
                    centered: true,
                    icon: <></>,
                    content: (
                      <Input
                        defaultValue={name}
                        onChange={(e) => {
                          name = e.target.value;
                        }}
                      />
                    ),
                    onOk: async () => {
                      await SaveDataModel({
                        ...record,
                        name
                      });
                      message.success('更新成功');
                      onFresh();
                    },
                  });
                },
              },
              !hideRemove
                ? {
                    key: "2",
                    label: "移动/复制",
                    onClick: () => {
                      onChangeLocation?.(record.id);
                    },
                  }
                : null,
              {
                key: "3",
                label: "删除",
                danger: true,
                onClick: () => {
                  confirm({
                    title: "删除",
                    content: "确定删除该模型？",
                    centered: true,
                    onOk: async () => {
                      await DeleteDataModel({
                        id: record.id,
                      });
                      onDelete?.();
                      message.success("删除成功");
                    },
                  });
                },
              },
            ],
            onClick: (e) => {
              e.domEvent.stopPropagation();
            },
          }}
        >
          <div
            className="absolute right-8px top-8px cursor-pointer bg-#adadad99 px-12px rounded-4px text-12px line-height-16px color-#fff"
            onClick={(e) => {
              e.stopPropagation();
            }}
          >
            <i className="iconfont icon-a-zu10687" />
          </div>
        </Dropdown>
      )}
      <Card.Meta
        title={
          <span className="flex items-center justify-between">
            <span className="flex-1 tru ">{record.name}</span>
            <span className="text-12px font-normal color-#999">更新于：{record.updateTime}</span>
          </span>
        }
        description={<span className="block truncate">{record.description || '暂无描述'}</span>}
      />
    </Card>
  );
}
