import BlueTable from '@/components/BlueTable';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import services from '@/services';
import { DatePicker, Flex, Popover } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';
import React, { useEffect, useRef, useState } from 'react';
import styles from './index.less';

interface DataType {
  planName: string;
  startDate: string;
  endDate: string;
  pipelineName: string;
  inspectionResult: string;
  operation: string;
}

const PipelineInspection: React.FC<{ metaData: any }> = ({ metaData }) => {
  const { dispatch } = useGlobalModalServices();
  const [dataSource, setDataSource] = useState<any[]>([]);
  const pageInfo = useRef({
    page: 0,
    pageSize: 10,
    total: 0,
  });
  const [dateRange, setDateRange] = useState<[dayjs.Dayjs, dayjs.Dayjs]>([
    dayjs().startOf('month'),
    dayjs().endOf('month'),
  ]);

  const getData = (page: number) => {
    services.DataBase.getSjdzInfoData({
      typeCode: 'hyzm-gl-rcxjjhtj',
      params: {
        startTime: dateRange[0].format('YYYY-MM-DD'),
        endTime: dateRange[1].format('YYYY-MM-DD'),
        glId: metaData?.id,
        pageSize: 10,
        pageNo: page,
      },
    }).then((res) => {
      if (res.code === 200) {
        const { list, page } = res.data?.data?.records[0];

        const newList = list.map((v: any) => {
          return {
            planName: v.xjjhmc,
            startDate: v.ksrq,
            endDate: v.jsrq,
            pipelineName: v.glmc,
            inspectionResult: v.xjjg,
            ...v,
          };
        });
        setDataSource(newList);
        pageInfo.current = {
          page: page.currentPage,
          pageSize: page.pageSize,
          total: page.total,
        };
      }
    });
  };

  useEffect(() => {
    getData(0);
  }, [dateRange]);

  const columns: ColumnsType<DataType> = [
    {
      title: '巡检计划名称',
      dataIndex: 'planName',
      key: 'planName',

      render: (text) => {
        return (
          <Popover className={styles.planName} content={text}>
            {text}
          </Popover>
        );
      },

      className: styles.tableCell,
    },
    {
      title: '开始日期',
      dataIndex: 'startDate',
      key: 'startDate',

      className: styles.tableCell,
    },
    {
      title: '结束日期',
      dataIndex: 'endDate',
      key: 'endDate',

      className: styles.tableCell,
    },
    {
      title: '管廊名称',
      dataIndex: 'pipelineName',
      key: 'pipelineName',

      className: styles.tableCell,
    },
    {
      title: '巡检结果',
      dataIndex: 'inspectionResult',
      key: 'inspectionResult',

      className: styles.tableCell,
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',

      render: (_: any, record: any) => (
        <span
          className={styles.operation}
          onClick={() => {
            dispatch.push(
              'PipelineInspectionDetail',
              {
                props: {
                  metaData: record,
                },
              },
              3,
            );
          }}
        >
          详情
        </span>
      ),
    },
  ];

  return (
    <div className={styles.container}>
      {/* 筛选条件区域 */}
      <div className={styles.filters}>
        <Flex gap={20} align="center">
          <span className={styles.label}>巡检时间</span>
          <DatePicker.RangePicker
            value={dateRange}
            onChange={(dates) => {
              if (dates && dates[0] && dates[1]) {
                setDateRange([dates[0], dates[1]]);
              }
            }}
            format="YYYY年MM月DD日"
            className={styles.datePicker}
          />
        </Flex>
      </div>

      {/* 表格区域 */}
      <BlueTable
        columns={columns}
        dataSource={dataSource}
        scroll={{ y: 520 }}
        pagination={{
          total: pageInfo.current.total,
          current: pageInfo.current.page + 1,
          onChange(page) {
            getData(page - 1);
          },
          pageSize: 10,
          showSizeChanger: false,
        }}
      />
    </div>
  );
};

export default PipelineInspection;
