nicecode-v2/packages/biz/src/BigImage/util/bigImageModalAdapter.tsx

/**
 * 适配老的大屏组件数据格式传入
 */
import React, { } from 'react';
import { AlgorithmVersionStr, HumanProperty, ObjectType, Rect, IScreenshotButtonProp } from '@zhst/types'
import { VideoViewProps, ImgViewProps, VideoViewRef, ImgViewRef } from '@zhst/meta'

export type TAB_TYPE = 'COMPATER' | 'NORMAL' | 'TRACK';
export type MODEL_TYPE = 'VIDEO' | 'IMAGE';

export interface CarouselProps {
  hasPre?: boolean;
  hasNext?: boolean;
  selectIndex: number;
  setSelectIndex: React.Dispatch<React.SetStateAction<number>>;
  dataSource: Array<{
    key: string;
    url: string;
  }>;
}

export type ISelectItem = Partial<Omit<ImgViewProps, 'screenshotButtonRender'>> &
  Partial<Omit<VideoViewProps, 'screenshotButtonRender'>>;

/**
 * 描述列表 description
 */
export interface HeaderProps {
  value: TAB_TYPE;
  onChange: (type: TAB_TYPE) => void;
  tabsFilter: TAB_TYPE[];
}

export interface ParamProps {
  tab: string;
  selectItem: ISelectItem;
  imgViewRef: React.MutableRefObject<ImgViewRef>;
  VideoViewRef: React.MutableRefObject<VideoViewRef>;
  model: MODEL_TYPE;
  setModel: React.Dispatch<React.SetStateAction<MODEL_TYPE>>;
  /* 可观测值 */
  scale$: number;
  showCrop$: boolean;
}

/**
 * 工具栏
 */
export interface ToolProps {
  renderRight?: (props: ParamProps) => React.ReactNode;
  renderLeft?: (props: ParamProps) => React.ReactNode;
  renderVideoBtn?: boolean;
  param: ParamProps;
  disableVideo: boolean;
}


export interface BigImageData {
  //imageKey 小图
  extendRectList: (Rect & { algorithmVersion: AlgorithmVersionStr; imageKey: string })[];
  rectList: (Rect & { algorithmVersion: AlgorithmVersionStr; imageKey: string })[];
  attachImg: { url: string; label: '形体' | '人脸' }[];
  odRect: Rect;
  compaterImages: string[]  // 目标图列表
  constractKey: string;   // 当前比较中的目标图
  frameImageKey: string;  // 场景图
  imageKey?: string; // 大图
  imgSummary: string; // 摘要图
  objectExtImageKey: string; //比对到的目标图扩展图 === imgSummary

  attributeList: { label: string; list: any[] }[];
  archiveImages?: any;
  spaceName: string;

  objectIndex?: {
    deviceId: string;
    fragmentId: string;
    objectId: string;
    solutionId: string;
  }

  objectType: ObjectType;
  objectId: string; //这张摘要本身的Id
  bodyObjectId?: string;
  faceObjectId?: string; //这张摘要下的人脸Id(如果有)
  sourceObjectId?: string; //这张摘要上游的形体Id(如果有)
  cameraId: string;
  cameraName: string;
  selectIndex: number;
  humanProperty: HumanProperty;
  qualityScore?: number;    //人脸质量分
  score: number;     //  相似度
  timestamp: string;
  bodyImageUrl: string;
  faceImageUrl: string;
  algorithmVersion: AlgorithmVersionStr;

  bodySpaceName: string;
  faceSpaceName: string;
  position: {
    lat: number
    lng: number
  }

  solutionId?: string;
  [index: string]: any;
}


interface IOldImageData {
  visible?: boolean;    // 显示隐藏弹框
  defaultModel?: MODEL_TYPE;    //  视频模式 | 图片模式
  onClose?: () => void;  // 关闭弹框
  isLoading?: boolean;  // 是否加载中
  hasPre?: boolean;  // 向前翻页
  hasNext?: boolean;   // 向后翻页
  selectIndex?: number;   // 选中的数据（dataSource为数组情况下）
  onSelectIndexChange?: (i: number) => void;   // 修改当前下标
  dataSource: BigImageData[];    // 数据1
  dataSources: BigImageData[];   // 数据2
  relatedData?: BigImageData[];  // 数据3
  transformPropFunc: (item: any) => ISelectItem;  // 格式化数据方法
  transformVideoPropFunc: (
    item: ISelectItem
  ) => Promise<Omit<VideoViewProps, 'screenshotButtonRender'>>;   // 视频模式格式化数据方法
  screenshotButtonRender?: (screenshotButtonProp: IScreenshotButtonProp) => React.ReactElement;
  showTool?: boolean;    // 是否显示底部菜单
  showCarousel?: boolean;   //
  imgViewProp?: Partial<ImgViewProps>;   // 图片模式的配置
  videoViewProp?: Partial<VideoViewProps>;  // 视频模式的配置
  ToolProps?: Partial<ToolProps>;    // 底部菜单的配置
  nullDialogProp?: {
    emptyText?: string;
  };    // 暂无数据的配置
  showHeader?: boolean;    // 是否显示 description
  tabsFilter?: TAB_TYPE[];  // tabs 过滤
  useVirtual?: boolean;    // 是否显示虚拟
  loadNext?: (i: number) => Promise<void>;   // 下一个
  loadPre?: (i: number) => Promise<void>;   // 前一个
  children: React.ReactNode;   // 子元素
  title?: string;   // 标题
  specialTitle?: string;   // 对比图模式下标题
  isRelated?: boolean;
  carouselProp?: Partial<CarouselProps>;
}


export interface ImageModalDataProps {
  targetData: BigImageData[]
  compactData: BigImageData[]
}

export interface ModalAdapterConfigProps {
  oldMode?: boolean; // 是否是老模式
}

/**
 * 兼容老数据格式
 * @param _data 老数据格式
 * @returns newData
 */
const translateOldImageData = (_data: IOldImageData) => {
  return {
    ..._data,
    open: _data.visible,
    onCancel: _data.onClose
  }
}

/**
 * 大图组件适配器，兼容老接口
 * @param Cmp 大图组件
 * @param config 额外配置
 * @returns 大图组件
 */
const adapter = (Cmp: any, config: ModalAdapterConfigProps): any => {
  const { oldMode = false } = config

  return (props: IOldImageData) => {
    const newProps = oldMode ? translateOldImageData(props) : props
    console.log('adapter----适配数据', props, newProps)

    // 该属性已经废弃
    delete newProps.visible

    return (
      <Cmp
        {...newProps}
      />
    )
  }
}


export default adapter