import React, { useEffect, useState } from "react";
import PreviewTree from "./PreviewTree";
import { Modal, Spin } from "antd";
import { dispatchLatest } from "@/model";

const Overview = ({ visible, customItem, onCancel }) => {
  const [previewTreeData, setPreviewTreeData] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    if (visible) {
      let url = "assetmanage.previewTreeByCustomElements";
      let payload = {
        data: customItem?.elementIds,
      };
      setLoading(true)
      dispatchLatest({
        type: url,
        payload,
        callback: (data) => {
          setPreviewTreeData((data || []).length > 0 ? data[0] : {});
          setLoading(false)
        },
      });
    }
  }, [visible, customItem]);
  return (
    <Modal
      width={1000}
      title="预览"
      visible={visible}
      onCancel={onCancel}
      footer={null}
    >
      <div style={{ height: 800, width: "100%" }}>
        {loading ? <Spin style={{ height: "100%", width: "100%" }} /> : <PreviewTree data={previewTreeData} />}
      </div>
    </Modal>
  );
};

export default Overview;
