/*
 * @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 { useSessionStorage } from '@/hooks/sessionStorage';
import { modelDeploymentInfoKey } from '@/utils/sessionStorage';
import { Tabs, type TabsProps } from 'antd';
import { useState } from 'react';
import BasicInfo from '../components/BasicInfo';
import ServerLog from '../components/ServerLog';
import UserGuide from '../components/UserGuide';
import { ModelDeploymentData } from '../types';
import styles from './index.less';

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

function ModelDeploymentInfo() {
  const [activeTab, setActiveTab] = useState<string>(ModelDeploymentTabKey.Predict);
  const [modelDeployementInfo] = useSessionStorage<ModelDeploymentData | undefined>(
    modelDeploymentInfoKey,
    true,
    undefined,
  );

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

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

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

export default ModelDeploymentInfo;
