import { asyncFunction} from '../public/api/fetch.js';

import ConfigsJs from './config.js';
const Configs = new ConfigsJs();
/*
 * 调用
 * 引入 LazyLoading.js
 * img 绑定类名  jqlazyload
 * img 绑定属性 data-wh=0.69  值根据实质需求定，因为如果图片不设置高度，offsettop 获取的值不准确
 * img dat-original="真实地址"
 * img src="懒加载图片"
 * import LazyLoadingJs from '../class/lozyLoading';
*  const LazyLoading = new LazyLoadingJs();
 * LazyLoading.int()
 */
class LazyLoading {
    constructor() {
        // 初始化配置数据
        this.arrImgDom = document.querySelectorAll('.jqlazyload');
    }

    int() {
        var config = {
            rootMargin: '0px',
            threshold: 0,
        }
        let observer = new IntersectionObserver((entries, self) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    let domImg = entry.target
                    let strImgSrc = domImg.dataset.original
                    if (strImgSrc) {
                        if (strImgSrc.indexOf('encry') >= 0) {
                            asyncFunction(strImgSrc + '?v=' + Configs.get('COVER_VERSION'))
                                .then(result => {
                                    // 异步操作成功时的回调
                                    let base64Content = `data:image/png;base64,${result}`;
                                    domImg.src = base64Content
                                    this.setImgHeightFun(domImg)
                                })
                                .catch(error => {
                                    // 异步操作失败时的回调
                                    console.error(error);
                                });
                        } else {
                            domImg.src = strImgSrc
                            domImg.classList.remove("jqlazyload");
                            this.setImgHeightFun(domImg)
                        }
                    }
                    // 解除观察
                    self.unobserve(entry.target)
                }
            })
        }, config)

        this.arrImgDom.forEach((image) => {
            observer.observe(image)
        })
    }

    setImgHeightFun(element) {
        let imgDataWh = element.getAttribute('data-wh')
        if (imgDataWh) {
            let $height = element.getBoundingClientRect().width * Number(imgDataWh)
            element.style.height = $height + 'px';
        }
        element.classList.remove('jqlazyload');
    }
}

export default LazyLoading;