src/pages/SeedList/SeedDetail/SeedRating.jsx

// import React, { useState, useEffect } from 'react';
// import axios from 'axios';
// import './SeedRating.css';
// import { useUser } from '../../../context/UserContext';

// const SeedRating = ({ seedId }) => {
//   const { user } = useUser();
//   const [score, setScore] = useState(0);
//   const [submitted, setSubmitted] = useState(false);

// const handleRating = async (newScore) => {
//   if (!user || !user.userId) {
//     alert('请先登录再评分');
//     return;
//   }

//   try {
//     const res = await axios.post('/echo/ratings', null, {
//       params: {
//         userId: user.userId,
//         seedId,
//         score: newScore,
//       },
//     });

//     if (res.data && res.data.status === 'success') {
//       setScore(newScore);
//       setSubmitted(true);
//       alert('评分成功');
//     } else {
//       alert('评分失败，请稍后再试');
//     }
//   } catch (error) {
//     console.error('评分出错:', error);
//     alert('评分请求失败');
//   }
// };



//   return (
//     <div className="seed-rating">
//       <span>评分：</span>
//       {[1, 2, 3, 4, 5].map((star) => (
//         <span
//           key={star}
//           className={`star ${star <= score ? 'active' : ''}`}
//         //   onClick={() => !submitted && handleRating(star)}
//           onClick={() => handleRating(star)}

//         >
//           ★
//         </span>
//       ))}
//       {submitted && <span className="thank-you">感谢您的评分！</span>}
//     </div>
//   );
// };

// export default SeedRating;

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './SeedRating.css';
import { useUser } from '../../../context/UserContext';
import AuthButton from '../../../components/AuthButton';

const SeedRating = ({ seedId }) => {
  const { user } = useUser();
  const [score, setScore] = useState(0);           // 最终提交的分数
  const [hoverScore, setHoverScore] = useState(0); // 鼠标悬停显示
  const [submitted, setSubmitted] = useState(false);
  const [loading, setLoading] = useState(false);   // 防止重复点击

  const handleRating = async (newScore) => {
    if (!user || !user.userId) {
      alert('请先登录再评分');
      return;
    }
    if (submitted || loading) return;

    setLoading(true);
    try {
      const res = await axios.post('/echo/ratings', null, {
        params: {
          userId: user.userId,
          seedId,
          score: newScore,
        },
      });

      if (res.data?.status === 'success') {
        setScore(newScore);
        setSubmitted(true);
        alert('评分成功');
      } else {
        alert('评分失败，请稍后再试');
      }
    } catch (error) {
      console.error('评分出错:', error);
      alert('评分请求失败');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="seed-rating">
      <span style={{color: '#333'}}>评分：</span>
      {[1, 2, 3, 4, 5].map((star) => (
      <AuthButton
        key={star}
        roles={["cookie", "chocolate", "ice-cream"]}
        style={{
          backgroundColor: 'inherit',
          margin: 0,
          // color: '#ccc',
          padding: 0,
          outline: 'none',
          border: 'none',
          cursor: 'pointer'
        }}
        className={`star ${(star <= (hoverScore || score) ? 'active' : '')} ${hoverScore >= star ? 'hover' : ''}`}
        onMouseEnter={() => !submitted && setHoverScore(star)}
        onMouseLeave={() => !submitted && setHoverScore(0)}
        onClick={() => handleRating(star)}
      >
        ★
      </AuthButton>

      ))}
      {submitted && <span className="thank-you">感谢您的评分！</span>}
    </div>
  );
};

export default SeedRating;