const Vue = require('yoho-vue');
const lazyload = require('yoho-vue-lazyload');
const infinitScroll = require('yoho-vue-infinite-scroll');
const bus = require('common/vue-bus');
const sort = require('product/sort.vue');
const list = require('product/list.vue');
const drawer = require('product/drawer.vue');
const filter = require('product/filter.vue');

Vue.use(lazyload);
Vue.use(infinitScroll);

require('common/vue-filter');

const app = new Vue({
    el: '#product-list',
    data: function() {
        return {
            sortConfig: global.sortConfig,
            filterConfig: [],

            // query
            url: 'list',
            sort: 3,
            filter: [],
            page: 0, // page= 0 未搜索, 1 并且productList.length =0 没有数据, page = page_total 全部加载完
            totalPage: 0,

            // 产品列表
            productList: [],

            // state:
            inSearching: false
        };
    },
    components: {
        list,
        sort,
        filter,
        drawer
    },
    methods: {
        search: function() {
            if (this.inSearching) {
                return;
            }
            const self = this;

            this.inSearching = true;
            $.post(this.url, {
                sort: this.sort,
                filter: this.filter,
                page: this.page
            })
            .done(res => {
                self.$set('productList', self.productList.concat(res.data.productList));
            })
            .fail(error => {
                self.page--;
            })
            .always(()=>{
                self.inSearching = false;
            });
        },

        pageState: function() {

        },

        /**
         *
         */
        research: function() {

        }
    },
    watch: {
        /* sort 和 filter 改变 都会触发 重新搜索 (想象成清空所有分页) */
        sort: function() {
            this.page = 0;
        },
        filter: function() {
            this.page = 0;
        },

        page: function(newVal, oldVal) {
            if (newVal === 0) {
                // when research
                this.$set('productList', []);
                this.search();
            } else if (newVal > oldVal && newVal > this.totalPage) {
                // when fetch
                this.search();
            }
        }
    },

    created: function() {
        this.search();
    }
});

bus.$on('list.paging', function() {
    app.page++;
});

bus.$on('sort.change', function({ val}) {
    console.log(val);
    app.sort = val;
});

bus.$on('filter.change', function({ val}) {
    console.log(val);
    app.filter = val;
});