const papersListingApp = Vue.createApp({
    data() {
        return {
            topic: window.currentTopic,
            search: '',
            papers: window.papersList,
            topics: window.topicsList,
            brand: window.brandName,
            papers_url: window.papersUrl,
        }
    },
    methods: {
        filterTopic(topicId) {
            this.topic = topicId;
        },
        filterSearch(searchText) {
            this.search = searchText;
        }
    },
    computed: {
        filteredPapers() {
            let filtered = [];
            for(const property in this.papers) {
                if((
                        this.papers[property].display_title.toLowerCase().includes(this.search.toLowerCase()) ||
                        this.papers[property].client_name && this.papers[property].client_name.toLowerCase().includes(this.search.toLowerCase())
                    ) && 
                    this.papers[property].class_list.includes(this.topic)) {
                        filtered.push(this.papers[property]);
                }
            }

            filtered.sort((objectA, objectB) => {
                let aOrder = objectA.qorder, bOrder = objectB.qorder,
                    aStart = objectA.start_date, bStart = objectB.start_date,
                    aCreate = objectA.create_date, bCreate = objectB.create_date;

                if(aOrder == bOrder) {
                    if(aStart == bStart) {
                        return (aCreate < bCreate) ? 1 : 
                            (aCreate > bCreate) ? -1 : 0; 
                    } else {
                        return (aStart < bStart) ? 1 : -1;
                    }
                } else { 
                    return aOrder - bOrder; 
                } 
            });

            return filtered;
        }
    }
});