import React, { useMemo } from 'react';
import styles from './index.less';

interface InfoItemProps {
  label: string;
  value: string;
  style?: React.CSSProperties;
}

const InfoItem: React.FC<InfoItemProps> = ({ label, value, style }) => (
  <div className={styles.infoItem} style={style}>
    <span className={styles.label}>{label}：</span>
    <span className={styles.value}>{value}</span>
  </div>
);

const PipelineInspectionDetail: React.FC<{ metaData: any }> = (props) => {
  const { metaData } = props;
  const leftInfoItems = useMemo(
    () => [
      { label: '巡检计划名称', value: metaData?.planName },
      { label: '开始日期', value: metaData?.startDate },
      { label: '结束日期', value: metaData?.endDate },
      { label: '联系电话', value: metaData?.lxdh },
      { label: '联系人', value: metaData?.lxr },
      { label: '管廊名称', value: metaData?.glmc },
      { label: '巡检周期', value: metaData?.xjzq },
      { label: '巡检范围', value: metaData?.xjfw },
      { label: '巡检结果', value: metaData?.xjjg },
      {
        label: '备注',
        value: metaData?.bz,
      },
    ],
    [metaData],
  );

  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <div className={styles.infoWrapper}>
          <div className={styles.leftInfo}>
            {leftInfoItems.map((item, index) => (
              <InfoItem key={index} {...item} />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default PipelineInspectionDetail;
