teach_sys_Demo/src/pages/InterviewSimulationPage/components/InterviewRating/index.jsx

import { useState, useRef, useEffect } from "react";
import ScoreChart from "../ScoreChart";
import RadarChart from "../RadarChart";
import "./index.css";

export default ({ selectedItem = "求职面试初体验" }) => {
  // 根据选中项目获取对应的视频URL
  const getVideoUrl = () => {
    switch(selectedItem) {
      case "求职面试初体验":
        return "https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/video/teach_sys/interview_offline_vedio/recuUpJSOKoqAm.mov";
      case "未来的自己":
        return "https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/video/teach_sys/interview_offline_vedio/recuUpJT02CMM5.mp4";
      case "第一次线下面试模拟":
        return "https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/video/teach_sys/interview_offline_vedio/recuUpJSOKoqAm.mov"; // 使用相同视频作为示例
      case "第二次线下面试模拟":
        return "https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/video/teach_sys/interview_offline_vedio/recuUpJT02CMM5.mp4"; // 使用相同视频作为示例
      case "第三次线下面试模拟":
        return "https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/video/teach_sys/interview_offline_vedio/recuUpJSOKoqAm.mov"; // 使用相同视频作为示例
      default:
        return "";
    }
  };

  // 判断是否是锁定的面试模拟项目
  const isLockedItem = () => {
    return selectedItem === "第一次线下面试模拟" || 
           selectedItem === "第二次线下面试模拟" || 
           selectedItem === "第三次线下面试模拟";
  };

  // 根据选中项目获取评价数据
  const getEvaluationData = () => {
    if (selectedItem === "未来的自己") {
      return {
        totalScore: 92,
        professionalScore: 39.5,
        performanceScore: 55.0,
        radarData: [10, 9, 10, 9],
        title: "优秀表现评价",
        content: `在专业能力方面，候选人对相关专业知识掌握扎实，能够深入且准确地回答与项目经验相关的复杂问题。在描述具体项目时，不仅能清晰说明自己的职责和成果，还能主动分析项目中的技术难点和解决方案，体现出优秀的实践操作能力和技术思维。对行业前沿动态有深入了解，能够结合实际工作提出创新性见解。

沟通表达上，候选人语言表达流畅自然，逻辑思维清晰有条理，能够积极主动地与面试官互动。在面对开放性问题时展现出良好的思维发散能力，回答层次分明，重点突出，表现出强烈的学习意愿和职业发展规划意识。整体表现超出预期，具备优秀的职场素养。`
      };
    } else if (selectedItem === "第一次线下面试模拟") {
      return {
        totalScore: 72,
        professionalScore: 28.0,
        performanceScore: 44.0,
        radarData: [7, 6, 7, 7],
        radarData2: [6, 6, 5, 6],
        title: "初次模拟评价",
        content: `在专业能力方面，候选人对基础知识有一定了解，但在深入问题上表现不够自信。回答问题时思路基本清晰，但缺乏具体案例支撑。对行业动态的了解较为表面，需要加强专业知识的深度学习。在描述项目经验时，表达略显生疏，未能充分展现个人价值。

沟通表达上，候选人表现出一定的紧张情绪，语速较快，有时会出现词不达意的情况。逻辑性有待加强，回答问题时容易偏离主题。肢体语言不够自然，眼神交流不足。建议多进行面试练习，提升表达的流畅度和自信心。整体来看，还有较大的提升空间。`
      };
    } else if (selectedItem === "第二次线下面试模拟") {
      return {
        totalScore: 81,
        professionalScore: 32.5,
        performanceScore: 48.5,
        radarData: [8, 7, 8, 8],
        radarData2: [7, 7, 6, 7],
        title: "进步明显评价",
        content: `在专业能力方面，候选人相比第一次有明显进步，对专业知识的理解更加深入。能够结合实际案例阐述观点，展现出一定的实践经验。对于技术问题的回答更有条理，能够抓住问题的关键点。行业认知有所提升，能够说出一些前沿趋势。

沟通表达上，紧张情绪明显缓解，语速适中，表达更加清晰。逻辑结构有所改善，能够按照"总-分-总"的结构组织答案。肢体语言更加自然，与面试官的互动增多。自信心有所提升，敢于表达自己的观点。但在一些压力问题上仍需加强应对能力。`
      };
    } else if (selectedItem === "第三次线下面试模拟") {
      return {
        totalScore: 89,
        professionalScore: 36.5,
        performanceScore: 52.5,
        radarData: [9, 8, 9, 9],
        radarData2: [8, 8, 7, 8],
        title: "接近优秀评价",
        content: `在专业能力方面，候选人展现出扎实的专业功底，能够深入浅出地解释复杂概念。项目经验描述详实，能够清楚说明技术难点和解决方案。对行业发展有独到见解，能够将理论与实践很好地结合。专业深度和广度都达到了较高水平。

沟通表达上，表现自然从容，完全没有紧张感。语言组织能力强，逻辑清晰，重点突出。能够根据面试官的反应及时调整表达方式，展现出良好的沟通技巧。肢体语言得体，眼神交流充分，整体气场稳定。已经基本具备了通过正式面试的能力，继续保持即可。`
      };
    } else {
      return {
        totalScore: 85,
        professionalScore: 34.0,
        performanceScore: 51.0,
        radarData: [9, 8, 9, 9],
        title: "基础面试评价",
        content: `在专业能力方面，候选人对 [岗位相关专业知识] 有基本掌握，能够清晰回答与过往项目经验相关的问题，例如在描述 [具体项目] 时，能准确说明自己承担的职责和达成的成果，体现出一定的实践操作能力。但在深入探讨 [某一专业难点] 时，表述略显浅显，对行业前沿动态的了解不够全面，专业深度有提升空间。

沟通表达上，候选人语言流畅，逻辑较为清晰，能够主动回应面试官的问题，展现出良好的沟通意愿。不过在面对一些开放性问题时，思维发散性稍弱，回答的层次感不够突出，有时会出现表述重复的情况。`
      };
    }
  };

  // 判断是否应该显示评价内容
  const shouldShowEvaluation = () => {
    return selectedItem === "求职面试初体验" || 
           selectedItem === "未来的自己" ||
           selectedItem === "第一次线下面试模拟" ||
           selectedItem === "第二次线下面试模拟" ||
           selectedItem === "第三次线下面试模拟";
  };

  return (
    <div className="interview-rating-wrapper">
      {/* 视频播放器区域 */}
      <div className="interview-rating-video-section">
        <div className="interview-rating-header">
          <span className="interview-rating-header-title">
            钢铁是怎样炼成的
          </span>
        </div>
        <div className="interview-rating-video">
          {isLockedItem() ? (
            <div className="locked-video-container" style={{
              position: 'relative',
              width: '100%',
              height: '100%',
              overflow: 'hidden'
            }}>
              {/* 背景图片 */}
              <div style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: '100%',
                backgroundImage: `url(${
                  selectedItem === "第一次线下面试模拟" 
                    ? "/src/assets/images/InterviewSimulationPage/第一次线下面试模拟.jpg"
                    : selectedItem === "第二次线下面试模拟"
                    ? "/src/assets/images/InterviewSimulationPage/第二次线下面试模拟.jpg"
                    : "/src/assets/images/InterviewSimulationPage/第三次线下面试模拟.jpg"
                })`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
                filter: 'blur(20px)',
                transform: 'scale(1.1)'
              }} />
              
              {/* 半透明遮罩 */}
              <div style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: '100%',
                backgroundColor: 'rgba(0, 0, 0, 0.4)'
              }} />
              
              {/* 锁图标和文字 */}
              <div style={{
                position: 'absolute',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%)',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                gap: '16px'
              }}>
                <img 
                  src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_icon/recuVOrz2GnJdK.png"
                  alt="lock"
                  style={{ width: '280px', height: '280px' }}
                />
                <span style={{
                  color: '#fff',
                  fontSize: '16px',
                  fontWeight: '500',
                  textAlign: 'center',
                  backgroundColor: 'rgba(0, 0, 0, 0.6)',
                  padding: '8px 16px',
                  borderRadius: '4px'
                }}>
                  DEMO演示，非学员无查看权限
                </span>
              </div>
            </div>
          ) : (
            <video src={getVideoUrl()} controls></video>
          )}
        </div>
      </div>

      {/* 评价内容区域 - 仅在特定项目时显示 */}
      {shouldShowEvaluation() && (
        <>
          {/* 面试评分区域 */}
          <div className="interview-evaluation-charts-wrapper">
            <div className="interview-rating-header">
              <span className="interview-rating-header-title">面试评分</span>
            </div>
            <div className="charts-content">
              <div className="charts-content-top">
                <ScoreChart className="score-chart" value={getEvaluationData().totalScore} />
                <div className="score-info">
                  <div className="score-info-item item1">
                    <span className="score-info-item-title">
                      专业能力评分(40)
                    </span>
                    <span className="score-info-item-value">{getEvaluationData().professionalScore}</span>
                  </div>
                  <div className="score-info-item item2">
                    <span className="score-info-item-title">
                      现场表现评分(60)
                    </span>
                    <span className="score-info-item-value">{getEvaluationData().performanceScore}</span>
                  </div>
                </div>
              </div>
              <div className="charts-content-bottom">
                <RadarChart
                  className="radar-chart"
                  data={getEvaluationData().radarData}
                  indicator={[
                    { name: "核心知识掌握与精准应用", max: 10 },
                    { name: "问题分析方案设计与成果表达", max: 10 },
                    { name: "产业认知与行业趋势洞察", max: 10 },
                    { name: "企业工作流理解与实践", max: 10 },
                  ]}
                />
                <RadarChart 
                  className="radar-chart"
                  data={getEvaluationData().radarData2 || [7, 8, 6, 7]}
                  indicator={[
                    { name: "沟通表达与逻辑思维", max: 10 },
                    { name: "团队协作与责任意识", max: 10 },
                    { name: "学习能力与适应能力", max: 10 },
                    { name: "职业素养与发展潜力", max: 10 },
                  ]}
                  lineClolr="#FFE4D9"
                  areaColor="#FFD4C1"
                  areaBorderColor="#FFB89A"
                />
              </div>
            </div>
          </div>

          {/* 基础面试评价区域 */}
          <div className="interview-evaluation-text-wrapper">
            <div className="interview-rating-header">
              <span className="interview-rating-header-title">{getEvaluationData().title}</span>
            </div>
            <div className="interview-rating-text">
              {getEvaluationData().content}
            </div>
          </div>
        </>
      )}
    </div>
  );
};