/**
 * [个人中心]首页/我的订单
 * @author: xuqi<qi.xu@yoho.cn>
 * @date: 2016/07/04
 */

var dialog = require('../plugins/dialog');
var _dialog = dialog.Dialog;

var expressTpl = require('../../tpl/me/express.hbs');

// 更新表格
var tableOperation = {
    $header: $('.table.column-category'),
    $body: $('.table.table-body'),
    removeBody: function() {
        this.$body = $('.table.table-body');
    },
    appendBody: function(htmlStr) {
        this.$body.remove();
        $(htmlStr).appendTo(this.$header);
    }
};

// 订单剩余时间显示及倒计时
var countDown = {
    count: null,
    intervalTimer: null,
    intervalValue: 60000,
    $element: null,
    selector: '.left-time',
    setTime: function() {
        var that = this;

        this.$element.each(function(index, item) {
            var $item = $(item);
            var leftTime = $item.data('left');

            $item.text(that.convertLeftTime(leftTime - that.count * 60));
        });
        this.count += 1;
    },
    convertLeftTime: function(src) {
        var min = parseInt(src / 60, 10) % 60;
        var hour = parseInt(src / 3600, 10);
        var timeStr = min + '分';

        if (src <= 0) {
            timeStr = '已失效';
            return timeStr;
        }

        if (hour > 0) {
            timeStr = hour + '时' + timeStr;
        }

        timeStr = '剩余' + timeStr;

        return timeStr;
    },
    getLeftTime: function() {
        var that = this;

        if (this.$element.length) {
            this.setTime();
            this.intervalTimer = setInterval(this.setTime.bind(that), that.intervalValue);
        }
    },
    start: function() {
        this.count = 0;
        this.$element = $(this.selector);
        if (this.intervalTimer) {
            clearInterval(this.intervalTimer);
        }
        this.getLeftTime();
    }
};

// 订单类型
var typeMap = {
    all: 1,
    paying: 2,
    delivering: 3
};

// 个人中心共用代码加载
require('./me');

// 添加.check方法
require('../plugins/check');

// 获取订单列表
function getOrderList(type, page) {
    tableOperation.removeBody();

    $.ajax({
        url: 'getOrderList',
        data: {
            type: type,
            page: page
        }
    }).done(function(res) {
        tableOperation.appendBody(res);
        bindEvent(); // eslint-disable-line
        countDown.start();
    }).fail(function(err) {
        console.log(err);
    });
}

// 获取url中的参数
function getQueryString() {
    var queryArr = location.search.substr(1).split('&');
    var query = {};

    queryArr.forEach(function(pair) {
        var arr = pair.split('=');

        query[arr[0]] = arr[1];

    });

    return query;
}


// 获取订单总数
function getOrderTotal(type, key) {
    $.ajax({
        url: 'getOrderTotal',
        data: {
            type: type
        }
    }).done(function(result) {
        var $navItme = $('*[data-type="' + key + '"]');

        if (!$navItme.hasClass('active') && result.total !== 0) {
            $navItme.find('.badge').text(result.total);
        } else if (!$navItme.hasClass('active')) {
            $navItme.find('.badge').text('');
        }
    });
}

// 设置订单总数
function setOrderTotal() {
    var key;

    for (key in typeMap) {
        if (key !== 'all') {
            getOrderTotal(typeMap[key], key);
        }
    }
}

function updateTableContent($el) {
    $el.find('.status .status-str').text('已取消');
    $el.find('.pay-operation').remove();
    $el.find('.buy-operation').removeClass('hide');
    setOrderTotal();
}

// 绑定分页点击事件
function bindPaginationClick() {
    $('.blk-pagination li').off('click').on('click', function(e) {
        var $this = $(this);
        var page = $this.find('a').attr('href').split('=')[1];
        var type = getQueryString().type;

        e.preventDefault();

        if (!$this.hasClass('active')) {
            $('.blk-pagination li.active').removeClass('active');
            $this.addClass('active');
            $(window).scrollTop(0);

            getOrderList(type, page);
        }

    });
}

// 删除订单
function deleteOrder(code, $el) {
    $.ajax({
        url: 'deleteOrder',
        data: {
            orderCode: code
        }
    }).done(function() {
        $el.remove();
    }).fail(function(err) {
        console.log(err);
    });
}

// 取消订单
function cancelOrder(code, $el) {
    $.ajax({
        url: 'cancelOrder',
        data: {
            orderCode: code
        }
    }).done(function() {
        var tip = new _dialog({
            className: 'order-dialog',
            content: '<h1>订单修改</h1>' +
                     '<span>您已成功取消了该订单</span>',
            closeCb: updateTableContent.bind(null, $el.closest('.order')),
            btns: [
                {
                    id: 'cancel-complete',
                    btnClass: ['confirm'],
                    name: '确定',
                    cb: function() {
                        tip.close(updateTableContent.bind(null, $el.closest('.order')));
                    }
                }
            ]
        }).show();

    }).fail(function(err) {
        console.log(err);
    });
}

// 取消订单
function getExpressInfo(code, $el) {
    $.ajax({
        url: 'getExpressInfo',
        data: {
            orderCode: code
        }
    }).done(function(result) {
        var tpl;
        var data = {};

        if (result.code === 200) {
            data = result.data;

            data.sub_express_deatil = data.express_detail.slice(0, 2);

            tpl = expressTpl(data);
            $(tpl).appendTo($el);
        }
    }).fail(function(err) {
        console.log(err);
    });
}



// tab切换处理
$('.tabs li').on('click', function() {
    var $this = $(this);
    var $searchBar = $('.search-bar');


    var type = typeMap[$this.data('type')];
    var page = getQueryString().page;

    if (!$this.hasClass('active')) {
        $('.tabs li.active').removeClass('active');
        $this.addClass('active');
        $this.find('.badge').text('');

        // 搜索栏只在全部订单tab下才显示
        if (type !== 1) {
            $searchBar.addClass('vhide');
        } else {
            $searchBar.removeClass('vhide');
        }

        getOrderList(type, page);
    }

});

function bindDeleteEvent() {
    $('.delete').on('click', function() {
        var $this = $(this);
        var code = $this.closest('.order').data('code');
        var tip = new _dialog({
            className: 'order-dialog delete-dialog',
            content: '<h1>您确定要永久删除该订单么</h1>' +
                     '<p>永久删除后，订单将无法恢复，</p>' +
                     '<p>您将无法对该订单的商品申请售后服务，请谨慎操作。</p>',
            btns: [
                {
                    id: 'delete-confirm',
                    btnClass: ['confirm'],
                    name: '确认',
                    cb: function() {
                        deleteOrder(code, $this.closest('.order'));
                        tip.close();
                    }
                },
                {
                    id: 'delete-cancel',
                    btnClass: ['cancel-btn'],
                    name: '取消',
                    cb: function() {
                        tip.close();
                    }
                }
            ]
        }).show();
    });
}

function bindCancelEvent() {
    $('.cancel').on('click', function() {
        var $this = $(this);
        var code = $this.closest('.order').data('code');

        var tip = new _dialog({
            className: 'order-dialog cancel-dialog',
            content: '<h1>取消订单</h1>' +
                     '<span class="tip">您取消订单的原因是：</span>' +
                     '<div class="reason">' +
                        '<div class="row">' +
                            '<p><span class="iconfont raido checked">&#xe603;</span>支付不成功</p>' +
                            '<p><span class="iconfont raido">&#xe604;</span>现在不想购买</p>' +
                        '</div>' +
                        '<div class="row">' +
                            '<p><span class="iconfont raido">&#xe604;</span>订单架构有问题</p>' +
                            '<p><span class="iconfont raido">&#xe604;</span>修改订单信息</p>' +
                        '</div>' +
                        '<div class="row">' +
                            '<p><span class="iconfont raido">&#xe604;</span>错误或重复下单</p>' +
                            '<p><span class="iconfont raido">&#xe604;</span>忘记使用优惠券或YOHO币</p>' +
                        '</div>' +
                        '<div class="row">' +
                            '<p><span class="iconfont raido">&#xe604;</span>等待发货时间过长</p>' +
                            '<p><span class="iconfont raido">&#xe604;</span>商品价格较贵</p>' +
                        '</div>' +
                        '<div class="row">' +
                            '<p><span class="iconfont raido">&#xe604;</span>运费较高</p>' +
                        '</div>' +
                        '<div class="row other">' +
                            '<p><span class="iconfont raido">&#xe604;</span>其他原因</p>' +
                            '<input type="text" disabled placeholder="50个字以内"/>' +
                        '</div>' +
                     '</div>' +
                     '<span class="tip">温馨提示：</span>' +
                     '<p class="tip-item"><span class="asterisk">*</span>订单成功取消后无法恢复</p>' +
                     '<p class="tip-item"><span class="asterisk">*</span>该订单已付金额将原路返回</p>' +
                     '<p class="tip-item"><span class="asterisk">*</span>取消订单后，存在促销关系的子订单及优惠可能会一并取消</p>',
            btns: [
                {
                    id: 'cancel-confirm',
                    btnClass: ['confirm'],
                    name: '确定并取消订单',
                    cb: function() {
                        cancelOrder(code, $this.closest('.order'));
                        tip.close();
                    }
                },
                {
                    id: 'cancel-stop',
                    btnClass: ['cancel-btn'],
                    name: '暂不取消',
                    cb: function() {
                        tip.close();
                    }
                }
            ]
        }).show();

        $('.cancel-dialog .reason p').check({
            type: 'radio',
            group: 'reason',
            onChange: function(ele, checked) {
                var $ele = $(ele);
                var $input = $('.cancel-dialog .reason input');

                if (checked && $ele.parent('.other').length) {
                    $input.prop('disabled', false);
                    $input.focus();
                } else {
                    $input.val('');
                    $input.prop('disabled', true);
                }
            }
        });
    });
}

function bindExpressEvent() {
    $('.express').on('click', function() {
        var $this = $(this);
        var code = $this.closest('.order').data('code');
        var $info = $this.find('.express-info');

        if ($info.length) {
            $info.toggleClass('hide');
        } else {
            getExpressInfo(code, $this);
        }

    });
}

function bindEvent() {
    bindPaginationClick();
    bindDeleteEvent();
    bindCancelEvent();
    bindExpressEvent();
}

bindEvent();
countDown.start();
setOrderTotal();