jiaowu-test/src/pages/CompanyJobsPage/components/InterviewStatusAnimation/index.jsx

import React, { useState, useEffect, useRef } from 'react';
import lottie from 'lottie-web';
import './index.css';

// 状态到lottie动画文件的映射
const statusLottieMap = {
  'Offer已拒绝，岗位内推结束': '/lottie/interview-status/4-off_拒绝Offer.json',
  'Offer已接收，岗位内推结束': '/lottie/interview-status/4-on_收到Offer.json',
  'Offer已接受，岗位内推结束': '/lottie/interview-status/4-on_收到Offer.json',
  '已收到Offer，请于2天内答复': '/lottie/interview-status/4-on_收到Offer.json',
  '面试日期已确定，等待面试': '/lottie/interview-status/4-on_收到Offer.json',
  '简历未通过，岗位内推结束': '/lottie/interview-status/1-off_初筛未通过.json',
  '未参与面试，岗位内推结束': '/lottie/interview-status/3-off_未参与面试.json',
  '面试未通过，岗位内推结束': '/lottie/interview-status/2-off_面试未通过.json',
  // 兼容其他可能的状态文本
  '岗位内推结束': '/lottie/interview-status/1-off_初筛未通过.json', // 默认动画
};

export default ({ statusText, isOpen, stageDate }) => {
  const [isVisible, setIsVisible] = useState(false);
  const [animationClass, setAnimationClass] = useState('');
  const lottieContainer = useRef(null);
  const lottieInstance = useRef(null);

  useEffect(() => {
    if (isOpen) {
      setIsVisible(true);
      setAnimationClass('expanding');
    } else if (isVisible) {
      setAnimationClass('collapsing');
      const timer = setTimeout(() => {
        setIsVisible(false);
        setAnimationClass('');
      }, 300); // 等待收起动画完成
      return () => clearTimeout(timer);
    }
  }, [isOpen, isVisible]);

  // 获取对应的lottie动画路径
  const getLottiePath = (status, stageDate) => {
    // 首先尝试精确匹配
    if (statusLottieMap[status]) {
      return statusLottieMap[status];
    }

    // 如果精确匹配失败，尝试模糊匹配
    if (status && status.includes('简历未通过')) {
      return statusLottieMap['简历未通过，岗位内推结束'];
    }
    if (status && status.includes('未参与面试')) {
      return statusLottieMap['未参与面试，岗位内推结束'];
    }
    if (status && status.includes('面试未通过')) {
      return statusLottieMap['面试未通过，岗位内推结束'];
    }
    if (status && status.includes('Offer已拒绝')) {
      return statusLottieMap['Offer已拒绝，岗位内推结束'];
    }
    if (status && (status.includes('Offer已接受') || status.includes('Offer已接收'))) {
      return statusLottieMap['Offer已接收，岗位内推结束'];
    }
    if (status && status.includes('面试日期已确定')) {
      return statusLottieMap['面试日期已确定，等待面试'];
    }
    if (status && status.includes('已收到Offer')) {
      return statusLottieMap['已收到Offer，请于2天内答复'];
    }

    // 对于通用的"岗位内推结束"状态，根据阶段日期判断具体原因
    if (status === '岗位内推结束' && stageDate) {
      if (stageDate.includes('简历未通过')) {
        return statusLottieMap['简历未通过，岗位内推结束'];
      }
      if (stageDate.includes('未参与面试')) {
        return statusLottieMap['未参与面试，岗位内推结束'];
      }
      if (stageDate.includes('面试未通过')) {
        return statusLottieMap['面试未通过，岗位内推结束'];
      }
    }

    // 默认返回通用动画
    return statusLottieMap['岗位内推结束'];
  };

  // 加载lottie动画
  useEffect(() => {
    if (isVisible && lottieContainer.current) {
      // 清理之前的动画实例
      if (lottieInstance.current) {
        lottieInstance.current.destroy();
      }

      const lottiePath = getLottiePath(statusText, stageDate);

      // 加载新的lottie动画
      lottieInstance.current = lottie.loadAnimation({
        container: lottieContainer.current,
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: lottiePath
      });
    }

    // 清理函数
    return () => {
      if (lottieInstance.current) {
        lottieInstance.current.destroy();
        lottieInstance.current = null;
      }
    };
  }, [isVisible, statusText, stageDate]);

  if (!isVisible) return null;

  return (
    <div className={`interview-status-animation-wrapper ${animationClass}`}>
      <div className="lottie-container" ref={lottieContainer} />
    </div>
  );
};