let AllScore = 5; // 评分总个数
let score = 0; // 评分
const starBox = document.getElementById('starBox');
if (starBox instanceof HTMLDivElement) {
    // 待实现功能：
    // 1. 鼠标在其上移动，评分变更
    // 2. 点击评分后，固定评分
    // 3. 鼠标离开后，回显上次评分

    // 处理鼠标移动事件，改变评分。
    const handleMove = (el) => {
        // 通过x轴距离起点待偏移量和x轴总长确定评分
        const { offsetX } = el;
        // console.log({ offsetX });
        const hoverStar = getScore(offsetX);
        starBox.style.setProperty('--activeStar', hoverStar);
    };
    // 鼠标离开后，恢复至上次评分
    const handleLeave = () => {
        starBox.style.setProperty('--activeStar', score);
    };
    // 点击评分后，记录评分
    const handleClick = (el) => {
        const { offsetX } = el;
        score = getScore(offsetX);
        console.log({ score });
        starBox.style.setProperty('--activeStar', score);
    };

    // 获取评分。
    const getScore = (offsetX) => {
        offsetX = offsetX / 26;
        let r = Math.trunc(offsetX);
        if (offsetX < 0) {
            r = 0;
        } else if (offsetX - r < 0.5) {
            r += 0.5;
        } else {
            r += 1;
        }
        return r;
    };

    starBox.addEventListener('mousemove', handleMove);
    starBox.addEventListener('mouseleave', handleLeave);
    starBox.addEventListener('click', handleClick);
}