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

interface PipelineAssessmentProps {
  facilityType?: string;
}

interface MainAssessmentType {
  pipelineName: string;
  assessmentType: string;
  startDate: string;
  endDate: string;
  mainContent: string;
  result: string;
  operation: string;
}

interface AuxiliaryAssessmentType {
  pipelineName: string;
  facilityType: string;
  startDate: string;
  endDate: string;
  mainIssues: string;
  suggestion: string;
}

const PipelineAssessment: React.FC<PipelineAssessmentProps> = ({ facilityType: defaultFacilityType }) => {
  const [year, setYear] = useState<dayjs.Dayjs>(dayjs());
  const [facilityType, setFacilityType] = useState(defaultFacilityType || 'main');
  const { dispatch } = useGlobalModalServices();

  // 当外部传入的facilityType变化时更新内部状态
  useEffect(() => {
    if (defaultFacilityType) {
      setFacilityType(defaultFacilityType);
    }
  }, [defaultFacilityType]);

  let isUsingValue = true;

  // 管廊本体检测评估信息表格列配置
  const columnsMain: ColumnsType<MainAssessmentType> = [
    {
      title: '管廊名称',
      dataIndex: 'pipelineName',
      key: 'pipelineName',
      width: 200,
      className: styles.tableCell
    },
    {
      title: '检测评估类别名称',
      dataIndex: 'assessmentType',
      key: 'assessmentType',
      width: 200,
      className: styles.tableCell
    },
    {
      title: '开始日期',
      dataIndex: 'startDate',
      key: 'startDate',
      width: 200,
      className: styles.tableCell
    },
    {
      title: '完成日期',
      dataIndex: 'endDate',
      key: 'endDate',
      width: 200,
      className: styles.tableCell
    },
    {
      title: '主要内容',
      dataIndex: 'mainContent',
      key: 'mainContent',
      width: 250,
      className: styles.tableCell
    },
    {
      title: '结果',
      dataIndex: 'result',
      key: 'result',
      width: 150,
      className: styles.tableCell
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      width: 120,
      render: () => (
        <span className={styles.operation} onClick={() => {
          if (true) {
            dispatch.push('PipelineAssessmentDetail', {
            });
          }
        }}>详情</span>
      )
    }
  ];

  // 附属设施检测评估基础信息表格列配置
  const columnsAuxiliary: ColumnsType<AuxiliaryAssessmentType> = [
    {
      title: '管廊名称',
      dataIndex: 'pipelineName',
      key: 'pipelineName',
      width: 200,
      className: styles.tableCell
    },
    {
      title: '附属设施所属类别',
      dataIndex: 'facilityType',
      key: 'facilityType',
      width: 200,
      className: styles.tableCell
    },
    {
      title: '开始日期',
      dataIndex: 'startDate',
      key: 'startDate',
      width: 200,
      className: styles.tableCell
    },
    {
      title: '完成日期',
      dataIndex: 'endDate',
      key: 'endDate',
      width: 200,
      className: styles.tableCell
    },
    {
      title: '主要问题',
      dataIndex: 'mainIssues',
      key: 'mainIssues',
      width: 300,
      className: styles.tableCell
    },
    {
      title: '维护建议',
      dataIndex: 'suggestion',
      key: 'suggestion',
      width: 300,
      className: styles.tableCell
    }
  ];

  // 生成模拟数据
  const mockMainData: MainAssessmentType[] = isUsingValue
    ? Array.from({ length: 10 }, () => ({
        pipelineName: 'XXXXXXXX',
        assessmentType: 'XXXXXXXXX',
        startDate: 'XXXXXXXXX',
        endDate: 'XXXXXXXX',
        mainContent: 'XXXXXXXX',
        result: 'XXXXXXXX',
        operation: '查看'
      }))
    : [];

  const mockAuxiliaryData: AuxiliaryAssessmentType[] = isUsingValue
    ? Array.from({ length: 10 }, () => ({
        pipelineName: 'XXXXXXXX',
        facilityType: 'XXXXXXXXX',
        startDate: 'XXXXXXXXX',
        endDate: 'XXXXXXXX',
        mainIssues: 'XXXXXXXX',
        suggestion: 'XXXXXXXX'
      }))
    : [];

  return (
    <div className={styles.container}>
      {/* 筛选条件区域 */}
      <div className={styles.filters}>
        <Flex gap={20} align="center">
          {/* <span className={styles.label}>评估时间</span> */}
          <DatePicker
            value={year}
            onChange={(date) => {
              if (date) {
                setYear(date);
              }
            }}
            picker="year"
            format="YYYY年"
            className={styles.datePicker}
          />
          {/* <span className={styles.label} style={{marginLeft: '40px'}}>评估类型</span> */}
          <div className={styles.facilityTabs}>
            <div 
              className={`${styles.facilityTab} ${facilityType === 'main' ? styles.active : ''}`}
              onClick={() => setFacilityType('main')}
            >
              管廊本体检测评估信息
            </div>
            <div 
              className={`${styles.facilityTab} ${facilityType === 'auxiliary' ? styles.active : ''}`}
              onClick={() => setFacilityType('auxiliary')}
            >
              附属设施检测评估基础信息
            </div>
          </div>
        </Flex>
      </div>

      {/* 表格区域 */}
      <BlueTable
        columns={facilityType === 'main' ? columnsMain : columnsAuxiliary}
        dataSource={facilityType === 'main' ? mockMainData : mockAuxiliaryData}
        scroll={{ y: 520 }}
        pagination={{
          total: 30,
          pageSize: 10,
        }}
      />
    </div>
  );
};

export default PipelineAssessment; 