import {
    View
} from 'yoho-mvc';

/**
 * 排序 nav view
 */
class NavView extends View {
    constructor() {
        super('#list-nav');

        // 初始化变量
        this.navType = '';
        this.navInfo = {
            new: {
                order: 0,
                reload: true,
                page: 1,
                end: false
            },
            price: {
                order: 1,
                reload: true,
                page: 0,
                end: false
            }
        };

        this.$pre = this.$base.find('.active');

        // 事件委托
        this.on('touchend touchcancel', 'li', this.onTabClick.bind(this));
    }

    /**
     * nav tab click 事件处理
     * @param {*} e
     */
    onTabClick(e) {
        let $this = $(e.currentTarget);
        let $active;

        if ($this.hasClass('filter')) {
            // 筛选面板切换状态
            if ($this.hasClass('active')) {
                this.filter.hideFilter();
            } else {
                this.$pre = $this.siblings('.active');
                this.filter.showFilter();
            }
            this.$pre.toggleClass('active');
            $this.toggleClass('active');
            return;
        } else {
            if ($this.hasClass('new')) {
                this.navType = 'new';
            } else if ($this.hasClass('price')) {
                this.navType = 'price';
            }
        }

        let nav = this.navInfo[this.navType];

        if ($this.hasClass('active')) {

            // 最新无排序切换
            if ($this.hasClass('new')) {
                return;
            }

            if ($this.hasClass('price')) {

                // 价格切换排序状态
                $this.find('.icon > .iconfont').toggleClass('cur');
                this.$pre = $this; // 更新pre为当前项
                nav.reload = true; // 重置reload,HTML会被替换为逆序的HTML
                nav.order = nav.order === 0 ? 1 : 0; // 切换排序
            }
        } else {
            $active = $this.siblings('.active');

            this.$pre = $this; // $pre为除筛选导航的其他导航项，若当前active的为筛选，则把$pre置为当前点击项

            if ($active.hasClass('filter')) {

                // 若之前active项为筛选，则隐藏筛选面板
                this.filter.hideFilter();
            }

            $active.removeClass('active');
            $this.addClass('active');
        }

        this.emit('nav-change', nav, this.navType);
    }

    // 获取默认排序
    getDefaultNav() {
        return this.navInfo.new;
    }

    // 设置前一个tab为选中状态
    preActive() {
        this.$pre.addClass('active');
        this.$pre.siblings('.filter').removeClass('active');
    }

    setFilter(filter) {
        this.filter = filter;
    }
}

/**
 * 商品列表 view
 */
class ContentView extends View {
    constructor() {
        super('#global-container');
        this.$ngc = this.$base.children('.new-goods');
        this.$pgc = this.$base.children('.price-goods');
        this.$current = this.$ngc;

        this.winH = $(window).height();

        // srcoll to load more
        $(window).scroll(() => {
            window.requestAnimationFrame(this.scrollHandler.bind(this));
        });
    }

    /**
     * 滚动事件处理
     */
    scrollHandler() {
        // 当scroll到1/2$goodsContainer高度后继续请求下一页数据
        if ($(window).scrollTop() + this.winH >
            $(document).height() - 0.5 * this.$current.height()) {
            this.emit('search');
        }
    }

    /**
     * 商品列表切换
     * @param {*} e
     * @param {*} navType
     */
    doContentChange(e, navType) {
        // 切换container显示
        this.$base.children('.container:not(.hide)').addClass('hide');

        switch (navType) {
            case 'new':
                this.$ngc.removeClass('hide');
                this.$current = this.$ngc;
                break;
            case 'price':
                this.$pgc.removeClass('hide');
                this.$current = this.$pgc;
                break;
            default:
                break;
        }
    }

    setList(data, opts) {
        if (opts.reload) {
            this.$current.html(data);
        } else {
            this.$current.append(data);
        }
    }
}

export {
    NavView,
    ContentView
};