import $ from 'yoho-jquery';
import Page from 'yoho-page';
import tip from 'plugin/tip';
import { orderInfo } from 'cart/order-info';

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

        this.selectCouponCodes = [];

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

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

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

        this.ajax({
            type: 'POST',
            url: '/cart/index/new/couponList',
            data: {
                delivery_way: orderInfo('deliveryId'),
                coupon_code: couponCodeStr
            }
        }).then(result => {
            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]')
        };

        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: '/cart/index/new/useCouponCode',
            data: {
                couponCode: couponCode
            }
        }).then(function(res) {
            if (res.message) {
                tip.show(res.message);
            }
            if (res.code === 200) {
                orderInfo('usable_usual_code', res.data.coupon_code);
                tip.show('优惠券可用');
                setTimeout(function() {
                    location.reload();
                }, 500);
            }
        });
    }

    /**
     * 使用优惠券
     */
    useCoupon() {
        window.history.go(-1);
    }

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

        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');
        } else {
            this.view.usableCouponList.addClass('hide');
            this.view.unusableCouponList.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.view.tipBox.hide();
    }
}

export default SelectCouponController;