import { Ref } from "vue";
import {getStaticImage} from "@/utils"
export default function () {

  const options = {
    rootMargin: "0px",
    threshold: 0.5,
    once: true
  }

  const callback = (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
    entries.forEach((entry) => {
      if (entry.intersectionRatio <= 0) return
      const img = entry.target as HTMLImageElement;
      // img.src = getStaticImage('base/loading.png')
      const src = img.getAttribute('data-src');
      // img.setAttribute('src', getStaticImage('base/loading.png'));
      img.setAttribute('src', src ?? "");
      img.onload = () => {
        // img.setAttribute('class', "fade-in")
      }
      observer.unobserve(img)
    })
  }
  // 图片处理
  const processImage = (ref: Ref) => {
    const observer = new IntersectionObserver(callback, options)
    Object.keys(ref.value)
      .forEach((e) => observer.observe(ref.value[e]));
  }
  return {
    processImage
  }
}