General-AI-Platform-Web/src/pages/Business/BusinessModel/components/detailCard.tsx

/*
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2024-06-11 13:33:07
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2024-06-12 16:30:51
 * @FilePath: \general-ai-platform-web\src\pages\Business\BusinessModel\components\detailCard.tsx
 * @Description: 业务模型详情
 */

import { isArrayAndNotEmpty } from '@/utils/is';
import { ProCard } from '@ant-design/pro-components';
import { Modal } from 'antd';
import { useEffect, useState } from 'react';
import { proFormSmallModelWidth } from '../../../../../config/defaultForm';
type DetailCardProps = {
  info: Record<string, any>;
  detailModalOpen: boolean;
  handleModal: () => void;
};

const DetailCard: React.FC<DetailCardProps> = (props) => {
  /**state */
  // const intl = useIntl();
  const [setForceRender] = useState<boolean>(false);

  useEffect(() => {
    setForceRender(props.detailModalOpen);
  }, [props.detailModalOpen]);

  return (
    <Modal
      width={proFormSmallModelWidth}
      title={props.info?.name}
      open={props.detailModalOpen}
      onCancel={props.handleModal}
      footer={null}
      afterVisibleChange={(isVisible) => {
        if (!isVisible) {
          setForceRender(false); // Modal 关闭时重置状态
        }
      }}
    >
      <ProCard className="gn_card_wrap" bodyStyle={{ padding: 0 }}>
        <ul className="p1">
          <li className="pt-[16px]">
            <span className="text2">业务名称：</span>
            <span>{props.info?.name}</span>
          </li>
          <li className="pt-[16px]">
            <span className="text2">简介: </span>
            <span>{props.info?.comment}</span>
          </li>
          <li className="pt-[16px] flex">
            <span className="text2">关联基础模型: </span>
            <ul className="flex flex-wrap flex-1">
              {isArrayAndNotEmpty(props.info?.basemodel_list) &&
                props.info?.basemodel_list.map((item) => {
                  return (
                    <li key={item?.id} className="ml-[8px] mb-[8px] active_tag">
                      {item?.name}
                    </li>
                  );
                })}
            </ul>
          </li>
          <li className="pt-[8px] flex">
            <span className="text2">模型关联节点: </span>
            <ul className="flex flex-wrap flex-1">
              {isArrayAndNotEmpty(props.info?.link_node_list) &&
                props.info?.link_node_list.map((item) => {
                  return (
                    <li key={item?.node_id} className="ml-[8px] mb-[8px] active_tag">
                      {item?.node_name}
                    </li>
                  );
                })}
            </ul>
          </li>
        </ul>
      </ProCard>
    </Modal>
  );
};

export default DetailCard;