// 首页js文件
$(function () {
  /**
   * 
   * @param {HTMLLIElement} e1 点击切换的元素
   * @param {HTMLLIElement} e2 被切换时的元素
   * @param {string} c1 点击后被点击的样式
   * @param {string} c2 点击后被切换后的样式
   */
  function cut(e1, e2, c1, c2) {
    $(`${e1}`).each((i, e) => {
      $(e).click(() => {
        $(e).addClass(`${c1}`).siblings().removeClass(`${c1}`);
        $(`${e2}`).eq(i).addClass(`${c2}`).siblings().removeClass(`${c2}`);
      })
    })
  }
  //#region 轮播图
  new Swiper('.swiper', {
    loop: true, // 循环模式选项
    autoplay: true,
    delay: 3000,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
      clickable: true,
    },
  })
  //#endregion
  //#region 滚动条

  /**
   * 
   * @param {HTMLLIElement} ui 要滚动的最外层元素
   * @param {HTMLLIElement} item 滚动的元素
   */
  function scrollBehavior(ui, item) {
    let clone_li = $(`${ui} li`);
    // 克隆一一组li
    let li;
    for (let i = 0; i < clone_li.length; i++) {
      li = clone_li[i].cloneNode(true);
      // 把li添加到父元素中
      $(`${ui} ul`).append(li);
    }
    // 获取列表中所有的li相加之后的宽度
    let dWidth = 0, lis = document.querySelectorAll(`${ui} li`);
    for (let i = 0; i < lis.length; i++) {
      dWidth += lis[i].offsetWidth + 20;
    }
    $(item).css("width", `${dWidth}px`);
    let cz = $(item)[0].offsetWidth - $(ui)[0].offsetWidth - 60;
    let index = 0;
    let flag = true;
    setInterval(() => {
      if (flag) {
        index++;
        if (index >= cz) {
          index = 0;
        }
        $(item).css("transform", `translate(-${index}px,-50%)`)
      }
    }, 30)
    $(ui).mouseenter(() => {
      flag = false;
    })
    $(ui).mouseleave(() => {
      flag = true;
    })
  }
  scrollBehavior(".w > .scrol .scrol_more", ".w > .scrol .scrol_more ul");
  scrollBehavior(".hospital_main .scrol_more", ".hospital_main .scrol_more ul");
  scrollBehavior(".doctor_main .scrol_more", ".doctor_main .scrol_more ul");
  //#endregion
  //#region 整形医院医生的切换
  cut("#show li", ".hospital_main .hospital_list", "on", "list_show");
  cut("#doc li", ".doctor_list", "on", "list_show");
  cut("#an li", ".answer_main ul", "on", "flex");
  cut("#zx li", ".reshap_main ul", "on", "flex");
  //#endregion

  //#region 图片懒加载
  /**
   * 实现图片切换懒加载
   * @param {HTMLLIElement} uls 被切换的元素
   * @param {HTMLLIElement} lis 点击切换的元素
   */
  function loadImg(uls, lis) {
    $(lis).each((index, el) => {
      el.addEventListener("click", () => {
        $(uls).eq(index).find("img").each((i, img) => {
          if (img.getAttribute('src')) {
            img.src = img.getAttribute('src');
            img.removeAttribute('src');
          }
        })
      })
    })
  }
  // 初始化图片
  function initImg(ul) {
    $(ul).eq(0).find("img").each((i, img) => {
      if (img.getAttribute('src')) {
        img.src = img.getAttribute('src');
        img.removeAttribute('src');
      }
    })
    ob.unobserve(ul);
  }

  const jq_dom = {
    h: {
      ul: $(".hospital_main .hospital_list"),
      li: $("#show li")
    },
    d: {
      ul: $(".doctor_main .doctor_list"),
      li: $("#doc li"),
    },
    q: {
      ul: $(".answer_main ul"),
      li: $("#an li")
    },
    n: {
      ul: $(".reshap_main ul"),
      li: $("#zx li"),
    }
  }

  const ob = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return;
    initImg(entries[0].target)
  },
  {
    rootMargin: "100px 0px 100px"
  })

  for (let i in jq_dom) {
    ob.observe(jq_dom[i].ul[0]);
    loadImg(jq_dom[i].ul, jq_dom[i].li);
    initImg(jq_dom[i].ul[0]);
  }
  //#endregion

})