/*
 * @Author: 赵伟
 * @Date: 2024-04-16 13:58:08
 * @Description: 服务版本详情
 */
import KFIcon from '@/components/KFIcon';
import PageTitle from '@/components/PageTitle';
import SubAreaTitle from '@/components/SubAreaTitle';
import { getServiceVersionInfoReq } from '@/services/modelDeployment';
import { to } from '@/utils/promise';
import { useParams } from '@umijs/max';
import { Tabs, type TabsProps } from 'antd';
import { useEffect, useState } from 'react';
import VersionBasicInfo from '../components/VersionBasicInfo';
import ServerLog from '../components/ServerLog';
import UserGuide from '../components/UserGuide';
import { ServiceVersionData } from '../types';
import styles from './index.less';

export enum ModelDeploymentTabKey {
  Predict = 'Predict', // 预测
  Guide = 'Guide', // 调用指南
  Log = 'Log', // 服务日志
}

function ServiceVersionInfo() {
  const [activeTab, setActiveTab] = useState<string>(ModelDeploymentTabKey.Predict);
  const [versionInfo, setVersionInfo] = useState<ServiceVersionData | undefined>(undefined);
  const params = useParams();
  const id = params.id;

  useEffect(() => {
    getServiceVersionInfo();
  }, []);

  // 获取服务版本详情
  const getServiceVersionInfo = async () => {
    const [res] = await to(getServiceVersionInfoReq(id));
    if (res && res.data) {
      setVersionInfo(res.data);
    }
  };

  const tabItems = [
    {
      key: ModelDeploymentTabKey.Predict,
      label: '预测',
      icon: <KFIcon type="icon-yuce" />,
    },
    {
      key: ModelDeploymentTabKey.Guide,
      label: '调用指南',
      icon: <KFIcon type="icon-tiaoyongzhinan" />,
      children: <UserGuide info={versionInfo}></UserGuide>,
    },
    {
      key: ModelDeploymentTabKey.Log,
      label: '服务日志',
      icon: <KFIcon type="icon-fuwurizhi" />,
      children: <ServerLog info={versionInfo}></ServerLog>,
    },
  ];

  // 切换 Tab，重置数据
  const hanleTabChange: TabsProps['onChange'] = (value) => {
    setActiveTab(value);
  };

  return (
    <div className={styles['service-version-info']}>
      <PageTitle title="服务版本详情"></PageTitle>
      <div className={styles['service-version-info__content']}>
        <SubAreaTitle
          title="基本信息"
          image={require('@/assets/img/mirror-basic.png')}
          style={{ marginBottom: '26px' }}
        ></SubAreaTitle>
        <VersionBasicInfo info={versionInfo} />
        <div className={styles['service-version-info__content__tabs']}>
          <Tabs activeKey={activeTab} items={tabItems} onChange={hanleTabChange} />
        </div>
      </div>
    </div>
  );
}

export default ServiceVersionInfo;
