import $ from 'yoho-jquery';
import Page from 'yoho-page';
import couponValidHbs from 'home/coupon-valid.hbs';

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

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

        this.view = {
            filterBtn: $('.filter-btn'),
            filterItem: $('.filter-item'),
            showFilterBtn: $('.show-filter-btn'),
            couponList: $('#couponList')
        };

        this.view.filterBtn.on('click', this.tapChange.bind(this));
        this.view.showFilterBtn.on('click', this.showFilter.bind(this));
        this.view.filterItem.on('click', 'button', this.filterCoupons.bind(this));

        // this.renderCoupons();
    }

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

        this.view.filterItem.find('button').removeClass('active');
        currentTarget.addClass('active');

        if (currentTarget.hasClass('all')) {
            console.log('all');
        } else if (currentTarget.hasClass('shop')) {
            console.log('shop');
        } else if (currentTarget.hasClass('activity')) {
            console.log('activity');
        } else if (currentTarget.hasClass('freight')) {
            console.log('freight');
        } else {
            console.log('error');
        }
    }

    /**
     * 渲染优惠券列表
     */
    renderCoupons() {
        this.getCoupons().then(result => {
            let couponValidHbsHtml = $(couponValidHbs(result));

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

    /**
     * 获取优惠券
     */
    getCoupons() {
        return this.ajax({
            type: 'POST',
            url: '/home/coupons.json',
            dataType: 'json',
            data: {
                type: this.couponType,
                filter: this.couponFilter,
                page: this.page
            },
        });
    }

    /**
     * tab 切换
     */
    tapChange(event) {
        let itemClicked = $(event.currentTarget);

        if (itemClicked.hasClass('no-used')) {
            this.status = 0;
        } else if (itemClicked.hasClass('used')) {
            this.status = 1;
        } else if (itemClicked.hasClass('invalid')) {
            this.status = 2;
        }

        this.renderCoupons();

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

    /**
     * 展示筛选器
     */
    showFilter() {
        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-icon');

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

export default ConponController;