const $ = require('jquery');
const lazyload = require('../plugins/lazyload');

window.jQuery = $;

let moreObj = {
    domInit: function() {
        this.el = {
            $listContainer: $('#list-container')
        };
    },
    init: function() {
        this.domInit();
        this.page = 1;
        this.loading = false;
        this.end = false;
        this.scroll();
    },
    scroll: function() {
        $(window).scroll(() => {
            if (($(window).scrollTop() + $(window).height() >= $(document).height() * 0.8)) {
                this.doMore();
            }
        });
    },
    doMore: function() {
        if (!this.loading && !this.end) {
            this.page++;
            this.getMore();
        }
    },
    getMore: function() {
        this.loading = true;
        let ajaxData = {
            page: this.page,
            row: 10
        };

        if ($('#cityId').val()) {
            Object.assign(ajaxData, {cityId: $('#cityId').val()});
        }
        $.ajax({
            method: 'GET',
            url: window.$ajaxPath,
            data: ajaxData,
            success: (result) => {
                if ($(result).length > 0) {
                    let $result = $(result);
                    let $lazyImg = $result.find('img.lazy');

                    this.el.$listContainer.append($result);
                    lazyload($lazyImg, {
                        threshold: 1000,
                        q: 80
                    });
                    this.loading = false;
                } else {
                    this.end = true;
                }
            }
        });
    }
};

$(
    function() {
        moreObj.init();
    }
);