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 PipelineMonitorDetail: React.FC = () => {
  const leftInfoItems = [
    { label: '监控中心名称', value: 'XXXXXXXXXXXXXXX' },
    { label: '运营管理单位', value: 'XXXXXXXXXXXXXXX' },
    { label: '设防烈度', value: 'XXXXXXXXXXXXXXX' },
    { label: '值班电话', value: 'XXXXXXXXXXXXXXX' },
    { label: '位置描述', value: 'XXXXXXXXXXXXXXX' },
    { label: '相对地面位置', value: 'XXXXXXXXXXXXXXXXXXXXXXX' },
    { label: '层数', value: 'XXXXXXXXXXXXXXX' },
    { label: '建筑面积（平方米）', value: '20020412.24' },
    { label: '管廊名称', value: 'XXXXXXXXXXXXXXXXXXXXXXX' },
    { label: '备注', value: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' },
  ];

//   const rightInfoItems = [
//     { label: '值班电话', value: 'XXXXXXXXXXXXXXXXXXXXXXX' },
//     { label: '位置描述', value: 'XXXXXXXXXXXXXXX' },
//     { label: '相对地面位置', value: '2024-12-24' },
//     { label: '层数', value: 'XXXXXXXXXXXXXXX' },
//     { label: '建筑面积(平方米)', value: 'XXXXXXXXXXXXXXX' },
//     { label: '管廊名称', value: 'XXXXXXXXXXXXXXXXXXXXXXX' },
//   ];

  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 className={styles.rightInfo}>
            {rightInfoItems.map((item, index) => (
              <InfoItem key={index} {...item} />
            ))}
          </div> */}
        </div>
      </div>
    </div>
  );
};

export default PipelineMonitorDetail; 