import BaseCard from '@/pages/GlobalModalServices/components/BaseCard';
import { Col, Row } from 'antd';
import dayjs from 'dayjs';
import React, { useMemo } from 'react';
import styles from './index.less';

const GalleryInfo: React.FC<{
  dataSource: any;
}> = (props) => {
  const { dataSource } = props;
  const infoItems = useMemo(() => {
    return [
      { label: '管廊名称', value: dataSource?.name },
      { label: '管廊类型', value: dataSource?.lx },
      { label: '所属区域', value: dataSource?.region_name },
      { label: '管廊长度', value: dataSource?.cd + '千米' },
      { label: '舱室数量', value: dataSource?.cs },
      { label: '舱室类别', value: dataSource?.cslb },
      { label: '运营管理单位', value: dataSource?.gldw },
      {
        label: '移交/运营时间',
        value: dayjs(dataSource?.yjsj).format('YYYY-MM-DD'),
      },
      { label: '起点位置', value: dataSource?.qd },
      { label: '终点位置', value: dataSource?.zd },
    ];
  }, [dataSource]);

  return (
    <BaseCard w={445} h={468} title={'管廊信息'}>
      <Row gutter={[32, 0]}>
        {infoItems.map((item, index) => (
          <Col span={24} key={index}>
            <div className={styles.infoItem}>
              <span className={styles.label}>{item.label}：</span>
              <span className={styles.value} title={item.value}>
                {item.value}
              </span>
            </div>
          </Col>
        ))}
      </Row>
    </BaseCard>
  );
};

export default GalleryInfo;
