import BlueTable from '@/components/BlueTable';
import BaseCard from '@/pages/GlobalModalServices/components/BaseCard';
import services from '@/services';
import { useSetState } from 'ahooks';
import type { ColumnsType } from 'antd/es/table';
import React, { useEffect } from 'react';

const PipelineInfo: React.FC<{
  dataSource: any;
}> = (props) => {
  const { dataSource } = props;

  const [list, setList] = useSetState<{
    list: any[];
    total: number;
    types: number;
  }>({
    list: [],
    total: 0,
    types: 0,
  });

  useEffect(() => {
    services.DataBase.getSjdzInfoData({
      typeCode: 'hyzm-gl-gxxxlb',
      params: {
        glId: dataSource?.id,
      },
    }).then((res: any) => {
      if (res.code === 200) {
        const records = res.data.data.records;
        const types = records.length;
        const total = records.reduce((prev: any, cur: any) => {
          return prev + Number(cur.cd);
        }, 0);

        setList({
          list: records,
          total: total,
          types: types,
        });
      }
    });
  }, [dataSource?.id]);

  const columns: ColumnsType = [
    {
      title: '入廊管线名称',
      dataIndex: 'gxlxmc',
      key: 'gxlxmc',
      width: '40%',
    },
    {
      title: '长度（米）',
      dataIndex: 'cd',
      key: 'cd',
      width: '30%',
    },
    {
      title: '入廊管线单位',
      dataIndex: 'rlgxdw',
      key: 'rlgxdw',
      width: '30%',
    },
  ];

  return (
    <BaseCard
      w={445}
      h={240}
      title={`入廊管线信息 共 ${list.types} 类管线 共 ${
        list.total / 1000
      } 公里`}
    >
      <BlueTable
        columns={columns}
        dataSource={list.list}
        pagination={false}
        size="small"
        scroll={{ y: 120 }}
      />
    </BaseCard>
  );
};

export default PipelineInfo;
