import React, { useState, useEffect, useRef, useCallback } from 'react';
import styled from 'styled-components';
import { apiGet } from '../../utils/request';
import { getDefaultDate } from '../../App';
import { PanelContainer } from '../styled/DashboardStyles';
import ReactECharts from 'echarts-for-react';
import useGlobalRefresh from '../../hooks/useGlobalRefresh';

// 组件容器样式
const Container = styled.div`
  width: 92%;
  margin: 0 auto;
  position: relative;
  margin-bottom: 1vw;
`;

// 标题样式
const Title = styled.div`
  color: #CCE6FF;
  font-size: 1vw;
  text-align: center;
  margin-bottom: 0.5vw;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('/zhongjianbiaotizhuangshi_bg.png') no-repeat;
  background-size: contain;
  background-position: center;
  height: 1.8vw;
  font-family: 'DingTalk JinBuTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  
  &::before,
  &::after {
    display: none;
  }
`;

// 保养记录容器
const MaintenanceContainer = styled.div`
  display: flex;
  justify-content:space-between;
  align-items: stretch;
`;

// 保养记录卡片
const MaintenanceCard = styled.div<{ status: 'completed' | 'pending' }>`
  display: flex;
  flex-direction: column;
  background: url('/shebeibaoyang_bg.png') no-repeat;
  background-size: 100% 100%;
  width: 24%;
  padding: 0.5vw;
  position: relative;

`;

// 保养序号
const NumberTag = styled.div`
  text-align: left;
  color: #4D9EFF;
  font-size: 1vw;
  font-family:'DingTalk JinBuTi' ;
  font-weight: bold;
  margin-bottom: 0.3vw;
`;

// 保养状态文本
const Status = styled.div`
  text-align: left;
  color: #FFFFFF;
  font-size: 0.8vw;
  margin-bottom: 0.5vw;
`;

// 保养日期
const Date = styled.div`
  color: #7E9BCC;
  font-size: 0.7vw;
  margin-top: auto;
  text-align: left;
`;

// 图标容器
const IconContainer = styled.div`
  position: absolute;
  top: 1vw;
  right: 0.5vw;
  width: 3.5vw;
  height: 3.5vw;
`;

// 图标
const Icon = styled.img`
  width: 100%;
  height: 100%;
  object-fit: contain;
`;

interface MaintenanceRecord {
  equipCode: string;
  equipName: string;
  maintainPlanDate: string;
  maintainPlanName: string;
  seqNo: number;
  maintainFlag: boolean;
  maintainDate: string | null;
  maintainUser: string | null;
  remark: string | null;
}

interface DeviceMaintenanceChartProps {
  selectedEquipCode: string;
}

const DeviceMaintenanceChart: React.FC<DeviceMaintenanceChartProps> = ({ selectedEquipCode }) => {
  const [records, setRecords] = useState<MaintenanceRecord[]>([]);
  
  const fetchData = useCallback(async () => {
    try {
      // 获取默认日期
      const defaultDate = getDefaultDate();
      
      // 直接使用选中的设备代码
      const equipCode = selectedEquipCode;
      
      // 调用新的设备保养接口
      const response = await apiGet('/equipMana/equipmentMaintenance', {
        params: { 
          dateTime: defaultDate,
          equipCode: equipCode
        }
      });
      
      if (response.data && response.data.data && Array.isArray(response.data.data)) {
        setRecords(response.data.data);
      }
    } catch (error) {
      console.error('获取设备保养数据失败:', error);
      // 使用模拟数据
      setRecords([
        {
          equipCode: "2",
          equipName: "Rowa",
          maintainPlanDate: "2025-04-01",
          maintainPlanName: "2季度",
          seqNo: 2,
          maintainFlag: true,
          maintainDate: "2024-04-01",
          maintainUser: "张晓静",
          remark: null
        },
        {
          equipCode: "2",
          equipName: "Rowa",
          maintainPlanDate: "2025-07-01",
          maintainPlanName: "3季度",
          seqNo: 3,
          maintainFlag: false,
          maintainDate: null,
          maintainUser: null,
          remark: null
        },
        {
          equipCode: "2",
          equipName: "Rowa",
          maintainPlanDate: "2025-10-01",
          maintainPlanName: "4季度",
          seqNo: 4,
          maintainFlag: false,
          maintainDate: null,
          maintainUser: null,
          remark: null
        }
      ]);
    }
  }, [selectedEquipCode]);

  // 组件挂载时获取数据
  useEffect(() => {
    fetchData();
  }, [fetchData]);

  // 使用全局刷新钩子，指定模块代码'28'
  useGlobalRefresh(fetchData, '28');

  // 当选中的设备代码变化时重新获取数据
  useEffect(() => {
    fetchData();
  }, [selectedEquipCode]);

  return (
    <Container>
      <Title>设备保养</Title>
      <MaintenanceContainer>
        {records.map(record => (
          <MaintenanceCard key={record.seqNo} status={record.maintainFlag ? 'completed' : 'pending'}>
            <NumberTag style={{color:record.maintainFlag?'#66B3FF':'#6B8299'}}>{record.maintainPlanName}</NumberTag>
            <Status style={{color:record.maintainFlag?'#FFFFFF':'#6B8299'}}>
              {record.maintainFlag ? '保养已完成' : '保养未开始'}
            </Status>
            <Date style={{color:record.maintainFlag?'#CCE6FF':'#6B8299'}}>{record.maintainFlag ? (record.maintainDate ? record.maintainDate.replace(/-/g, '/') : '') : `预计 ${record.maintainPlanDate.replace(/-/g, '/')}`}</Date>
            <IconContainer>
              <Icon src={record.maintainFlag ? '/baoyangwanchengicon.png' : '/baoyangweiwanchengicon.png'} alt={record.maintainFlag ? '保养已完成' : '保养未完成'} />
            </IconContainer>
          </MaintenanceCard>
        ))}
      </MaintenanceContainer>
    </Container>
  );
};

export default DeviceMaintenanceChart; 