teach_sys_Demo/src/pages/CalendarPage/components/EventDetailModal.jsx

import { useEffect } from "react";
import Portal from "@/components/Portal";
import { IconCalendarClock, IconCheck, IconClockCircle } from "@arco-design/web-react/icon";

const EventDetailModal = ({ isOpen, event, onClose }) => {
  // ESC键关闭模态框
  useEffect(() => {
    const handleEscKey = (e) => {
      if (e.key === "Escape" && isOpen) {
        onClose();
      }
    };

    if (isOpen) {
      document.addEventListener("keydown", handleEscKey);
    }

    return () => {
      document.removeEventListener("keydown", handleEscKey);
    };
  }, [isOpen, onClose]);

  // 如果未打开或无事件数据，不渲染
  if (!isOpen || !event) {
    return null;
  }

  // 事件类型映射
  const eventTypeMap = {
    'compound-skill': '复合技能课',
    'vertical-skill': '垂直技能课',
    'public-course': '公开课',
    'one-on-one': '1v1规划',
    'interview': '线下面试模拟',
    'class': '课程',
    'meeting': '会议',
    'lab': '实验',
    'exam': '考试',
  };

  // 事件类型颜色映射
  const eventTypeColorMap = {
    'compound-skill': { bg: '#667eea', light: '#e0e7ff' },
    'vertical-skill': { bg: '#22c55e', light: '#dcfce7' },
    'public-course': { bg: '#f59e0b', light: '#fef3c7' },
    'one-on-one': { bg: '#ec4899', light: '#fce7f3' },
    'interview': { bg: '#3b82f6', light: '#dbeafe' },
    'class': { bg: '#667eea', light: '#e0e7ff' },
    'meeting': { bg: '#f093fb', light: '#fae8ff' },
    'lab': { bg: '#fa709a', light: '#fce7f3' },
    'exam': { bg: '#ff6b6b', light: '#fee2e2' },
  };

  // 处理遮罩层点击
  const handleOverlayClick = (e) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };

  // 处理关闭按钮点击
  const handleCloseClick = () => {
    onClose();
  };

  // 格式化时间显示
  const formatTime = (timeStr) => {
    if (!timeStr) return '';
    
    // 处理多种格式: "2024-09-18 09:00:00" 或 "2024-09-18 09:00" 或 "09:00:00" 或 "09:00"
    const parts = timeStr.toString().split(' ');
    let time = '';
    
    if (parts.length > 1) {
      // 格式如 "2024-09-18 09:00:00" 或 "2024-09-18 09:00"
      time = parts[1];
    } else {
      // 格式如 "09:00:00" 或 "09:00"
      time = parts[0];
    }
    
    // 确保时间存在且格式正确
    if (!time || time === 'undefined') {
      return '00:00';
    }
    
    // 只显示小时和分钟 (前5个字符)
    return time.substring(0, 5);
  };

  // 格式化日期
  const formatDate = (date) => {
    if (!date) return '';
    const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
    return date.toLocaleDateString('zh-CN', options);
  };

  // 判断是否为多事件模式（点击日期时显示当天所有事件）
  const isMultiEventMode = event.events && Array.isArray(event.events);
  const events = isMultiEventMode ? event.events : [event];
  const displayDate = isMultiEventMode ? formatDate(event.date) : '';

  // 获取事件状态 - 所有事项都显示为已完成
  const getEventStatus = (eventItem) => {
    return { text: '已完成', icon: <IconCheck />, color: '#52c41a' };
  };

  return (
    <Portal className="event-detail-portal">
      <div className="event-detail-overlay" onClick={handleOverlayClick}>
        <div className="event-detail-modal-new">
          {/* 模态框头部 */}
          <div className="event-detail-header-new">
            <h3 className="event-detail-title-new">
              {isMultiEventMode ? '日程详情' : '事件详情'}
            </h3>
            <button
              className="event-detail-close-new"
              onClick={handleCloseClick}
              type="button"
              aria-label="关闭"
            >
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
              </svg>
            </button>
          </div>

          {/* 日期显示（多事件模式） */}
          {isMultiEventMode && (
            <div className="event-detail-date-header">
              <IconCalendarClock style={{ fontSize: 20, color: '#3b82f6' }} />
              <span>{displayDate}</span>
            </div>
          )}

          {/* 模态框内容 */}
          <div className="event-detail-content-new">
            {events.length === 0 ? (
              <div className="event-empty-state">
                <IconCalendarClock style={{ fontSize: 48, color: '#c3c5c9', marginBottom: 16 }} />
                <p style={{ fontSize: 16, color: '#86909c', margin: 0 }}>当日无事项</p>
              </div>
            ) : (
            <div className="event-list-container">
              {events.map((eventItem, index) => {
                const status = getEventStatus(eventItem);
                const typeColor = eventTypeColorMap[eventItem.type] || { bg: '#667eea', light: '#e0e7ff' };
                
                return (
                  <div key={eventItem.id || index} className="event-card-new">
                    <div className="event-card-header">
                      <div className="event-type-indicator" style={{ backgroundColor: typeColor.bg }}></div>
                      <div className="event-card-title">
                        <h4>{eventItem.title}</h4>
                        <span className="event-type-tag" style={{ 
                          backgroundColor: typeColor.light,
                          color: typeColor.bg
                        }}>
                          {eventTypeMap[eventItem.type] || eventItem.type}
                        </span>
                      </div>
                    </div>
                    
                    <div className="event-card-body">
                      <div className="event-info-row">
                        <IconClockCircle style={{ fontSize: 16, color: '#8c8c8c' }} />
                        <span className="event-time">
                          {formatTime(eventItem.startTime)} - {formatTime(eventItem.endTime)}
                        </span>
                      </div>
                      
                      <div className="event-info-row">
                        <div className="event-status" style={{ color: status.color }}>
                          {status.icon}
                          <span>{status.text}</span>
                        </div>
                      </div>
                      
                      {eventItem.description && (
                        <div className="event-description">
                          {eventItem.description}
                        </div>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
            )}
          </div>
        </div>
      </div>
    </Portal>
  );
};

export default EventDetailModal;