let id = null;
let interval = null;
let start = 0;
const maxMove = 224;
let latestIndex = 0; // 用来记录最近一段时间的那个高亮列号
const moveProgressLine = (ele, finishCallback) => {
  if (!ele) return;
  const move = () => {
    start = start + 1;
    if (start <= maxMove) {
      $(ele).css("width", `${start}px`);
      id = window.requestAnimationFrame(move);
    } else {
      start = 0;
      window.cancelAnimationFrame(id);
      finishCallback && finishCallback();
    }
  };
  id = window.requestAnimationFrame(move);
};

const setActiveInServiceScape = (activeIndex, isOnHover = false) => {
  latestIndex = activeIndex;
  $(".serviceScape ul li").each((i, item) => {
    $(item).removeClass("active");
    if (activeIndex === i) {
      $(item).addClass("active");
      const targetEle = $(item).find(".progress-back-line .progress-line");
      if (targetEle.length) {
        moveProgressLine(targetEle, () => {
          !isOnHover && setActiveInServiceScape((activeIndex + 1) % 5);
        });
      }
    }
  });
};

const loop = () => {
  // 开启自动轮动
  setActiveInServiceScape(0);
  // 给每一个卡片添加hover事件
  $(".serviceScape ul li").each((i, item) => {
    $(item).on("mouseenter", () => {
      window.clearTimeout(interval);
      window.cancelAnimationFrame(id);
      if (latestIndex !== i) {
        start = 0;
      }
      setActiveInServiceScape(i, true);
    });
    $(item).on("mouseleave", () => {
      window.cancelAnimationFrame(id);
      if (start === 0) {
        setActiveInServiceScape((i + 1) % 5);
      } else {
        setActiveInServiceScape(i);
      }
    });
  });
};

if (window.innerWidth > 767) {
  loop();
}