import React 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 PipelineMaintenanceDetail: React.FC = ({ metaData }: any) => {
  const leftInfoItems = [
    { label: '管廊名称', value: metaData.pipelineName },
    { label: '病害设施设备名称', value: metaData.facilityName },
    { label: '病害发现日期', value: metaData.discoveryDate },
    { label: '完成日期', value: metaData.maintenanceDate },
    { label: '工程量', value: metaData.gcl },
    { label: '计量单位名称', value: metaData.jldwmc },
    { label: '维修消耗材料', value: metaData.wxxhcl },
    {
      label: '备注',
      value: metaData.bz,
    },
  ];

  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 PipelineMaintenanceDetail;
