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

class SelectCouponController extends Page {
    constructor(params) {
        super();

        this.linkUrl = document.referrer;
        this.orderInfo = params.orderInfo;
        this.couponListUrl = params.couponListUrl;
        this.useCouponCodeUrl = params.useCouponCodeUrl;
        this.selectCouponCodes = [];
        this.isBuyNowPage = params.isBuyNowPage || false;
        this.closeTipbyUser = false;

        if (this.orderInfo('coupon_code')) {
            this.selectCouponCodes = this.orderInfo('coupon_code').split(',');
        }

        this.page = $('.select-coupons-page');
        this.renderPage();
    }

    /**
     * 渲染页面
     */
    renderPage() {
        let couponCodeStr = this.selectCouponCodes.length > 0 ? this.selectCouponCodes.join(',') : '';
        let postData = {
            delivery_way: this.orderInfo('deliveryId'),
            coupon_code: couponCodeStr
        };

        if (this.isBuyNowPage) {
            postData.product_sku = qs.product_sku;
            postData.buy_number = qs.buy_number;
        }

        this.ajax({
            type: 'POST',
            url: this.couponListUrl,
            data: postData
        }).then(result => {
            this.orderInfo('coupon_code', couponCodeStr);

            let resultHtml = $(result);

            this.bindEvents(resultHtml);
            this.page.html(resultHtml);
        });
    }

    /**
     * 事件绑定处理
     */
    bindEvents(resultHtml) {
        this.view = {
            filterBtn: resultHtml.find('.filter-btn'),
            coupon: resultHtml.find('.coupon'),
            checkbox: resultHtml.find('.checkbox'),
            tipBox: resultHtml.find('.tip-box'),
            tipClose: resultHtml.find('.tip-close'),
            usableCouponList: resultHtml.find('.usable'),
            unusableCouponList: resultHtml.find('.unusable'),
            useNowBtn: resultHtml.find('#useNowBtn'),
            exchangeCouponBtn: resultHtml.find('#exchangeCouponBtn'),
            couponCodeInput: resultHtml.find('input[name=couponCodeInput]'),
            exchangeBox: resultHtml.find('.exchange-box'),
            useNowBox: resultHtml.find('#useNowBox')
        };

        this.view.filterBtn.on('click', this.tabChange.bind(this));
        this.view.coupon.on('click', '.checkbox', this.check.bind(this));
        this.view.tipClose.on('click', this.closeTip.bind(this));
        this.view.useNowBtn.on('click', this.useCoupon.bind(this));
        this.view.exchangeCouponBtn.on('click', this.exchangeCoupon.bind(this));
        this.view.couponCodeInput.on('input', this.changeExchangeBtnStatus.bind(this));
    }

    /**
     * 改变兑换按钮状态
     */
    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: this.useCouponCodeUrl,
            data: {
                couponCode: couponCode
            }
        }).then(function(res) {
            if (res.message) {
                tip.show(res.message);
            }
            if (res.code === 200) {
                this.orderInfo('usable_usual_code', res.data.coupon_code);
                tip.show('优惠券可用');
                setTimeout(function() {
                    location.reload();
                }, 500);
            }
        });
    }

    /**
     * 使用优惠券
     */
    useCoupon() {
        if (this.linkUrl) {
            window.location.href = this.linkUrl;
        } else {
            history.go(-1);
        }
    }

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

        console.log(this.view.useNowBox);

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

        if (itemClicked.hasClass('valid')) {
            this.view.unusableCouponList.addClass('hide');
            this.view.usableCouponList.removeClass('hide');
            this.view.exchangeBox.removeClass('hide');
            this.view.useNowBox.removeClass('hide');
        } else {
            this.view.usableCouponList.addClass('hide');
            this.view.unusableCouponList.removeClass('hide');
            this.view.exchangeBox.addClass('hide');
            this.view.useNowBox.addClass('hide');
        }

        if (itemClicked.data('num') === 0) {
            this.view.tipBox.addClass('hide');
        } else if (!this.closeTipbyUser) {
            this.view.tipBox.removeClass('hide');
        }
    }

    /**
     * 优惠券勾选处理
     */
    check(e) {
        let theCouponCheck = $(e.currentTarget);
        let theCoupon = $(e.delegateTarget);
        let theCouponData = theCoupon.data();

        console.log(theCouponData.code);

        if (theCouponCheck.hasClass('icon-cb-radio')) {
            this.selectCouponCodes.splice($.inArray(theCouponData.code, this.selectCouponCodes), 1);
            theCouponCheck.removeClass('icon-cb-radio').addClass('icon-radio');
        } else {
            this.selectCouponCodes.push(theCouponData.code);
            theCouponCheck.removeClass('icon-radio').addClass('icon-cb-radio');
        }

        this.renderPage();
    }

    /**
     * 关闭提示框
     */
    closeTip() {
        this.closeTipbyUser = true;
        this.view.tipBox.hide();
    }
}

export default SelectCouponController;