teach_sys_Demo/src/components/CoursesVideoPlayer/index.jsx

import { Avatar } from "@arco-design/web-react";
import Locked from "@/components/Locked";
import "./index.css";

export default ({ className = "", isLock = false, selectedCourse, teacherData, unitPosters }) => {
  const handleClickBtn = (item) => {
    console.log(item);
  };

  // 获取当前课程的导师信息
  const currentTeacher = selectedCourse && teacherData 
    ? teacherData[selectedCourse.teacherName] 
    : teacherData?.["魏立慧"] || {
        name: "魏立慧",
        introduction: "企业资深一线HR，专注于为求职者提供一对一的个性化指导。通过真实招聘视角，深入剖析个人优势与短板、传授面试技巧、规划职业定位与发展路径，帮助学生快速提升求职竞争力。求职策略以实用落地为核心，注重互动交流与角色定位，让学员在轻松氛围中获得直击痛点的求职策略。",
        specialties: ["深谙用人逻辑", "擅长挖掘优势", "沟通真诚自然", "点评直击要害"],
        avatar: "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp",
        type: "企业资深HR"
      };
  
  // 需要调整头像位置的导师
  const needsAdjustment = ["赵志强", "魏立慧", "郭建辉"].includes(currentTeacher.name);
  
  // 根据导师设置不同的背景色 - 这些颜色提取自实际的PNG图片背景
  const getAvatarBackground = (name) => {
    const backgrounds = {
      "刘杰": "#E3E2E0",      // 浅灰色
      "郭建辉": "#E0D9D3",     // 米灰色
      "赵志强": "#E3E2E0",     // 浅灰色
      "孙应战": "#E3E2E0",     // 浅灰色
      "魏立慧": "#DCD8D4"      // 灰褐色
    };
    return backgrounds[name] || "#E3E2E0";
  };
  
  console.log("当前导师:", currentTeacher.name, "需要调整:", needsAdjustment);

  // 获取当前课程信息
  const courseName = selectedCourse?.courseName || "钢铁是怎样炼成的";
  const courseDate = selectedCourse?.date || "09.01";
  const unitName = selectedCourse?.unitName || "教育体系认知";
  
  // 格式化日期时间
  const formatDateTime = (date) => {
    // 将 "2025-09-02" 格式转换为 "09.02"
    if (date && date.includes('-')) {
      const parts = date.split('-');
      if (parts.length === 3) {
        return `${parts[1]}.${parts[2]}`;
      }
    }
    // 将 "9/1" 格式转换为 "09.01"
    if (date && date.includes('/')) {
      const parts = date.split('/');
      if (parts.length === 2) {
        const month = parts[0].padStart(2, '0');
        const day = parts[1].padStart(2, '0');
        return `${month}.${day}`;
      }
    }
    return date;
  };

  return (
    <div className={`${className} courses-video-player-wrapper`}>
      {/* 直播板块 */}
      <div className="courses-video-player">
        {isLock ? (
          <Locked
            className="video-lock-wrapper"
            text="该板块将于「垂直能力提升」阶段启动后开放届时，请留意教务系统通知，您可在该板块进行线上
        1V1 求职策略定制"
          />
        ) : (
          <>
            <div className="courses-video-player-header">
              <span onClick={() => handleClickBtn(1)}>&lt; 上一集</span>
              <span className="courses-video-player-header-title">
                {courseName}
              </span>
              <span onClick={() => handleClickBtn(2)}>下一集 &gt;</span>
            </div>
            <div className="courses-video-player-video">
              {selectedCourse?.current ? (
                <video src="/live.mp4" autoPlay controls></video>
              ) : (
                <img 
                  src={unitPosters?.[unitName] || unitPosters?.["岗位体系认知"]} 
                  alt={unitName}
                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                />
              )}
            </div>
          </>
        )}
      </div>
      <div className="courses-video-player-info">
        {/* 直播观众信息 */}
        <div className="courses-video-player-audience-info">
          <div className="avatar-wrapper">
            <Avatar 
              className={`teacher-avatar ${needsAdjustment ? 'avatar-adjust' : ''}`}
              style={{ backgroundColor: getAvatarBackground(currentTeacher.name) }}
            >
              <img
                alt="avatar"
                src={currentTeacher.avatar}
              />
            </Avatar>
            {selectedCourse?.current && <div className="living-icon" />}
          </div>
          <span className="teacher-name">{currentTeacher.name}老师</span>
          <span className="teacher-tag">{unitName}</span>
          <div className="living-data">
            <div className="living-data-item">
              <span>开始</span>
              <span>{formatDateTime(courseDate)} - 14:00</span>
            </div>
            <div className="living-data-item">
              <span>时长</span>
              <span>60分钟</span>
            </div>
            <div className="living-data-item">
              <span>观看</span>
              <span>3000人</span>
            </div>
          </div>
        </div>
        {/* 直播教师信息 */}
        <div className="courses-video-player-teacher-info">
          <div className="courses-video-player-teacher-introduce">
            <p className="title icon1">导师介绍</p>
            <p className="teacher-introduce">
              {currentTeacher.introduction}
            </p>
          </div>
          <div className="courses-video-player-teacher-tags">
            <p className="title icon2">教师专长</p>
            <ul className="teacher-tags">
              {currentTeacher.specialties.map((specialty, index) => (
                <li key={index}>{specialty}</li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};