import { ModelDeploymentData } from '@/pages/ModelDeployment/types';
import { getModelDeploymentDocsReq } from '@/services/modelDeployment';
import { to } from '@/utils/promise';
import { pick } from 'lodash';
import { useEffect, useState } from 'react';
import styles from './index.less';

type UserGuideProps = {
  info?: ModelDeploymentData;
};

function UserGuide({ info }: UserGuideProps) {
  const [docs, setDocs] = useState('');
  useEffect(() => {
    getModelDeploymentDocs();
  }, [info]);

  // 获取模型部署文档
  const getModelDeploymentDocs = async () => {
    if (info) {
      const params = pick(info, ['service_id', 'service_ins_id']);
      const [res] = await to(getModelDeploymentDocsReq(params));
      if (res && res.data && res.data.docs) {
        setDocs(JSON.stringify(res.data.docs, null, 2));
      }
    }
  };

  return <div className={styles['user-guide']}>{docs}</div>;
}

export default UserGuide;
