import $ from 'yoho-jquery';
import tip from 'js/plugin/tip';
import Page from 'js/yoho-page';

class ConponController extends Page {
    constructor() {
        super();

        this.couponType = 'notuse';
        this.couponFilter = 0;
        this.page = 1;

        this.view = {
            page: $('.coupon-new-page'),
            filterBtn: $('.filter-btn'),
            filterItem: $('.filter-item'),
            showFilterBtn: $('.show-filter-btn'),
            couponList: $('#couponList'),
            couponSection: $('.coupon-section'),
            noConponNow: $('.no-conpon-now'),
            exchangeCouponBtn: $('#exchangeCouponBtn'),
            couponCodeInput: $('input[name=couponCodeInput]'),
            usedTip: $('.used-tip'),
            exchangeBox: $('.exchange-box')
        };
        
        if ($('#yoho-header').hasClass('hide')) {
            this.view.page.removeClass('cpage-padding284');
        }

        if ($('#yoho-header').hasClass('hide')) {
            this.view.page.removeClass('cpage-padding284');
        }

        this.view.filterBtn.on('click', this.tabChange.bind(this));
        this.view.showFilterBtn.on('click', this.showFilter.bind(this));
        this.view.filterItem.on('click', 'button', this.filterCoupons.bind(this));
        this.view.couponSection.on('click', '.show-intro-btn', this.showIntro.bind(this));
        this.view.exchangeCouponBtn.on('click', this.exchangeCoupon.bind(this));
        this.view.couponCodeInput.on('input', this.changeExchangeBtnStatus.bind(this));

        this.loading = false;
        this.loadEnd = false;
        this.beforeScroll = $(window).scrollTop(); // 滚动前位置记录
        this.afterScroll; // 滚动后的位置
        window.onscroll = () => {
            if (this.loading || this.loadEnd) {
                return;
            }

            setTimeout(() => {
                this.afterScroll = $(window).scrollTop();

                if (this.afterScroll - this.beforeScroll > 0) {
                    window.requestAnimationFrame(() => {
                        this.scrollHandler();
                    });
                }
                this.beforeScroll = this.afterScroll;
            }, 100);
        };
    }

    /**
     * 改变兑换按钮状态
     */
    changeExchangeBtnStatus() {
        if (this.view.couponCodeInput.val().length > 0) {
            this.view.exchangeCouponBtn.addClass('active');
        } else {
            this.view.exchangeCouponBtn.removeClass('active');
        }
    }

    /**
     * 使用优惠券码
     */
    exchangeCoupon() {
        let couponCode = this.view.couponCodeInput.val();

        if (!couponCode) {
            tip.show('请输入优惠券码');
            return false;
        }

        this.ajax({
            method: 'POST',
            url: '/cart/index/new/useCouponCode',
            data: {
                couponCode: couponCode
            }
        }).then(res => {
            if (res.message) {
                tip.show(res.message);
            }
            if (res.code === 200) {
                setTimeout(() => {
                    location.reload();
                }, 500);
            }
        });
    }

    /**
     * 滚动处理
     */
    scrollHandler() {
        let conponListHeight = this.view.couponList.height();

        if ($(window).scrollTop() > conponListHeight * 0.6) {
            this.renderCoupons(true);
        }
    }

    /**
     * 筛选优惠券
     */
    filterCoupons(evt) {
        let currentTarget = $(evt.currentTarget);
        let currentTargetData = currentTarget.data();

        this.couponType = 'notuse';
        this.page = 0;
        this.couponFilter = currentTargetData.id;

        this.view.filterItem.find('button').removeClass('active');
        currentTarget.addClass('active');
        this.view.filterItem.addClass('hide');
        this.view.showFilterBtn.removeClass('icon-up').addClass('icon-down');

        this.renderCoupons();
    }

    /**
     * 获取优惠券
     */
    renderCoupons(scroll) {
        if (this.loading) {
            return;
        }

        this.loading = true;
        this.page++;
        this.ajax({
            type: 'POST',
            url: '/home/couponsList',
            data: {
                type: this.couponType,
                filter: this.couponFilter,
                page: this.page
            },
        }).then(result => {
            this.loading = false;

            let noResult = !result || !result.length;

            if (scroll && noResult) {
                this.loadEnd = true;
                return;
            }

            if (noResult) {
                this.view.noConponNow.removeClass('hide');
            } else {
                this.view.noConponNow.addClass('hide');
            }

            let couponValidHbsHtml = $(result);

            couponValidHbsHtml.on('click', '.show-intro-btn', this.showIntro.bind(this));

            if (scroll) {
                this.view.couponList.append(couponValidHbsHtml);
            } else {
                this.view.couponList.html(couponValidHbsHtml);
            }
        });
    }

    /**
     * tab 切换
     */
    tabChange(event) {
        this.page = 0;
        this.couponFilter = 0;
        this.loadEnd = false;

        let itemClicked = $(event.currentTarget);
        let itemCouponNum = itemClicked.data('num');

        // 筛选参数更改
        if (itemClicked.hasClass('no-used')) {
            this.couponType = 'notuse';
            this.view.usedTip.addClass('hide');
            this.view.usedTip.find('span').addClass('hide');
        } else if (itemClicked.hasClass('used')) {
            this.couponType = 'use';
            if (itemCouponNum !== 0) {
                this.view.usedTip.removeClass('hide');
                this.view.usedTip.find('.used').removeClass('hide');
                this.view.usedTip.find('.invalid').addClass('hide');
            } else {
                this.view.usedTip.addClass('hide');
            }
        } else if (itemClicked.hasClass('invalid')) {
            this.couponType = 'overtime';
            if (itemCouponNum !== 0) {
                this.view.usedTip.removeClass('hide');
                this.view.usedTip.find('.invalid').removeClass('hide');
                this.view.usedTip.find('.used').addClass('hide');
            } else {
                this.view.usedTip.addClass('hide');
            }
        } else {
            tip.show('未知券类型');
        }

        // 筛选框控制按钮状态、优惠券码兑换输入框状态管理
        if (itemClicked.hasClass('no-used')) {
            this.view.page.removeClass('no-exchange');
            this.view.showFilterBtn.addClass('active');
            this.view.exchangeBox.removeClass('hide');
        } else {
            this.view.page.addClass('no-exchange');
            this.view.showFilterBtn.removeClass('icon-up').addClass('icon-down');
            this.view.showFilterBtn.removeClass('active');
            this.view.exchangeBox.addClass('hide');
        }

        // 筛选项面板和筛选项状态重置
        this.view.filterItem.addClass('hide');
        this.view.filterItem.find('button').removeClass('active');

        if (!itemClicked.hasClass('active')) {
            this.view.filterBtn.removeClass('active');
            itemClicked.addClass('active');
            this.renderCoupons();
        }
    }

    /**
     * 展示筛选器
     */
    showFilter(e) {
        let currentTarget = $(e.currentTarget);

        if (!currentTarget.hasClass('active')) {
            return;
        }

        if (this.view.filterItem.hasClass('hide')) {
            this.view.filterItem.removeClass('hide');
            this.view.showFilterBtn.removeClass('icon-down').addClass('icon-up');
        } else {
            this.view.filterItem.addClass('hide');
            this.view.showFilterBtn.removeClass('icon-up').addClass('icon-down');
        }
    }

    /**
     * 展示优惠券介绍
     */
    showIntro(e) {
        let delegateTarget = $(e.delegateTarget);
        let couponIntro = delegateTarget.find('.coupon-intro');
        let showIntroIcon = delegateTarget.find('.show-intro-btn');

        if (couponIntro.hasClass('hide')) {
            couponIntro.removeClass('hide');
            showIntroIcon.eq(1).removeClass('icon-down').addClass('icon-up');
        } else {
            couponIntro.addClass('hide');
            showIntroIcon.eq(1).removeClass('icon-up').addClass('icon-down');
        }
    }
}

export default ConponController;