outline-mobile/src/components/MeasureItem.tsx

import icon_check_s from '../assets/icon_check_s_s.svg';
import icon_check_u from '../assets/icon_check_s_u.svg';
import icon_arr from '../assets/icon_arr_p_r.svg';
import icon_pending from '../assets/icon_upload_0.svg';
import icon_uploading from '../assets/icon_upload_1.svg';
import icon_uploaded from '../assets/icon_upload_2.svg';

/*
name: '测量名称1',
time: '03-02 10:20',
line: '京沪线',
segment: 'A段',
direction: '上行',
railType: '60轨',
*/

export type UpdateState = 'idle' | 'pending' | 'uploading' | 'uploaded';

export default function MeasureItem(props: {
  name: string;
  time: string;
  line: string;
  segment: string;
  direction: string;
  railType: string;
  uploadState: UpdateState;
  onDetail?: () => void;
}) {
  return (
    <div className="flex mx-2 gap-3">
      <main className="flex-1">
        <header className="flex items-center gap-2">
          {props.uploadState === 'uploaded' && <img src={icon_uploaded} alt="icon" />}
          <h1 className="text-[15px] font-medium ">{props.name}</h1>
        </header>
        <main className="flex my-2">
          <p className="flex-1 text-sm ">{`${props.line}`}</p>
          <p className="flex-1 text-sm ">{`${props.segment}`}</p>
          <p className="flex-1 text-sm ">{`${props.direction}方向`}</p>
        </main>
        <footer>
          <span className="text-sm text-[#b7b7b7]">{props.time}</span>
        </footer>
      </main>
      <aside className="flex items-center" onClick={props.onDetail}>
        <span className="mr-2 text-sm text-primary font-medium">查看</span>
        <img src={icon_arr} alt="arr" className="h-[10px]" />
      </aside>
    </div>
  );
}

export function MeasureItemEx(props: {
  name: string;
  time: string;
  line: string;
  segment: string;
  direction: string;
  railType: string;
  selected: boolean;
  uploadState: UpdateState;
  onSelected?: () => void;
  onDetail?: () => void;
}) {
  const stateImg = () => {
    if (props.uploadState === 'idle') {
      if (props.selected) {
        return <img src={icon_check_s} alt="icon" />;
      } else {
        return <img src={icon_check_u} alt="icon" />;
      }
    } else if (props.uploadState === 'pending') {
      return <img src={icon_pending} alt="icon" />;
    } else if (props.uploadState === 'uploading') {
      return <img src={icon_uploading} alt="icon" />;
    } else if (props.uploadState === 'uploaded') {
      return <img src={icon_uploaded} alt="icon" />;
    }
    return null;
  };
  const stateText = () => {
    if (props.uploadState === 'pending') {
      return <span className="text-[#A3ACC0] text-xs">等待中</span>;
    } else if (props.uploadState === 'uploading') {
      return <span className="text-primary text-xs">上传中</span>;
    } else if (props.uploadState === 'uploaded') {
      return <span className="text-[#04CA17] text-xs">上传完成</span>;
    }
    return null;
  };
  return (
    <div
      className="relative flex mx-2 gap-3"
      onClick={props.uploadState === 'idle' ? props.onSelected : undefined}>
      <main className="flex-1">
        <header className="flex items-center gap-2">
          {stateImg()}
          <h1 className="text-[15px] font-medium ">{props.name}</h1>
        </header>
        <main className="flex my-2">
          <p className="flex-1 text-sm ">{`${props.line}`}</p>
          <p className="flex-1 text-sm ">{`${props.segment}`}</p>
          <p className="flex-1 text-sm ">{`${props.direction}方向`}</p>
        </main>
        <footer>
          <span className="text-sm text-[#b7b7b7]">{props.time}</span>
        </footer>
      </main>
      <aside className="flex items-center" onClick={props.onDetail}>
        <span className="mr-2 text-sm text-primary font-medium">查看</span>
        <img src={icon_arr} alt="arr" className="h-[10px]" />
      </aside>
      <div className="absolute right-0 bottom-0">{stateText()}</div>
    </div>
  );
}