import React, { useState } from 'react';
import { Flex, DatePicker } from 'antd';
import dayjs from 'dayjs';
import styles from './index.less';
import classNames from 'classnames';

interface DefectRecord {
  planName: string;
  deviceCode: string;
  deviceName: string;
  inspectionType: string;
  defectDesc: string;
  location: string;
  status: string;
  discoveryDate: string;
  treatment: string;
  remark: string;
}

const PipelineDefectList: React.FC = () => {
  const [dateRange, setDateRange] = useState<[dayjs.Dayjs, dayjs.Dayjs]>([
    dayjs().startOf('month'),
    dayjs().endOf('month')
  ]);
  let isUsingValue = true;

  const mockData: DefectRecord[] = isUsingValue
    ? Array.from({ length: 10 }, () => ({
        planName: '2024年1月综合管廊日常巡检计划',
        deviceCode: 'SBDM202401001',
        deviceName: '1号舱排水泵',
        inspectionType: '日常巡检',
        defectDesc: '设备运行时有异常噪音，需要进行检查维修。可能是轴承磨损或叶轮损坏导致，建议尽快安排专业人员进行检查维修，以免影响正常运行。设备运行时有异常噪音，需要进行检查维修。可能是轴承磨损或叶轮损坏导致，建议尽快安排专业人员进行检查维修，以免影响正常运行。',
        location: '成都市武侯区火车南站片区1号线综合管廊A段1号舱',
        status: Math.random() > 0.5 ? '重大病害' : '紧急病害',
        discoveryDate: '2024-01-15',
        treatment: '已安排专业维修人员进行检查，更换了损坏的轴承和密封圈，并进行了试运行，目前设备运行正常，无异常噪音。已安排专业维修人员进行检查，更换了损坏的轴承和密封圈，并进行了试运行，目前设备运行正常，无异常噪音。',
        remark: '建议加强日常巡检频率，定期检查轴承磨损情况。建议加强日常巡检频率，定期检查轴承磨损情况。'
      }))
    : [];

  const renderDefectRecord = (record: DefectRecord) => {
    return (
      <div className={styles.recordItem}>
        <div className={styles.recordHeader}>
          <span className={styles.planName}>{record.planName}</span>
          <span className={classNames(styles.tag, {
            [styles.tagUrgent]: record.status === '紧急病害',
            [styles.tagSerious]: record.status === '重大病害'
          })}>{record.status}</span>
        </div>
        <div className={styles.recordContent}>
          <div className={styles.infoRow}>
            <div className={styles.infoItem}>
              <span className={styles.label}>病害设施设备编码：</span>
              <span className={styles.value}>{record.deviceCode}</span>
            </div>
            <div className={styles.infoItemFixed}>
              <span className={styles.label}>病害发现日期：</span>
              <span className={styles.value}>{record.discoveryDate}</span>
            </div>
          </div>
          <div className={styles.infoRow}>
            <div className={styles.infoItem}>
              <span className={styles.label}>病害设施设备名称：</span>
              <span className={styles.value}>{record.deviceName}</span>
            </div>
            <div className={styles.infoItemFixed}>
              <span className={styles.label}>巡检对象类别：</span>
              <span className={styles.value}>{record.inspectionType}</span>
            </div>
          </div>
          <div className={styles.infoItem}>
            <span className={styles.label}>病害描述：</span>
            <span className={styles.value}>{record.defectDesc}</span>
          </div>
          <div className={styles.infoItem}>
            <span className={styles.label}>位置描述：</span>
            <span className={styles.value}>{record.location}</span>
          </div>
          <div className={styles.infoItem}>
            <span className={styles.label}>处理情况：</span>
            <span className={styles.value}>{record.treatment}</span>
          </div>
          <div className={styles.infoItem}>
            <span className={styles.label}>备注：</span>
            <span className={styles.value}>{record.remark}</span>
          </div>
        </div>
      </div>
    );
  };

  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>

      {/* 记录列表区域 */}
      <div className={styles.recordList}>
        {mockData.map((record, index) => (
          <div key={index}>
            {renderDefectRecord(record)}
          </div>
        ))}
      </div>
    </div>
  );
};

export default PipelineDefectList; 