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');
const cateMore = require('product/filter/cate-more.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: global.filterConfig,

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

            // 产品列表
            productList: [],

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

            if (this.inSearching) {
                return;
            }
            if (this.page && this.page + 1 > this.totalPage) {
                return;
            }

            this.inSearching = true;
            this.page++;
            $.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;
                });
        },

        openFilterSub: function() {
            console.log('TODO: open filter sub');
        },

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

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

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

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


/**
 * 筛选组件 筛选值变更，触发 filter.change事件
 *  1. 重新搜索
 *  2. 关闭 drawer 组件
 */
bus.$on('filter.change', function({ val }) {
    console.log(val);
    app.filter = val;
    app.$refs.drawer.on = false;
});

/**
 *  筛选组件 打开二级晒寻，通过bridge 打开APP view
 *  1. 打开view
 *  2. 监听 router.back ，重新设置 筛选值
 */
bus.$on('filter.sub.show', function({val}) {
    app.openFilterSub(val);
});