const loading = require('../../plugin/loading'),
    lazyLoad = require('yoho-jquery-lazyload');

require('../../common');

import {EventEmitter, bus, api} from './store';


const LeaveMSGView = function(elem) {
    this.$elem = $(elem);
    this.$input = this.$elem.find('.leave-text');
    this.$doc = $(document);
    this.bindEvents();
};

LeaveMSGView.prototype = $.extend({}, EventEmitter.prototype, {
     /**
     * 绑定事件
     * 1. 提交按钮事件
     **/
    bindEvents() {
        let self = this;

        this.$elem
            .on('click', '.chat-page-back', function() {
                self.toggleHide(true);
            })
            .on('click.LeavseMSG.submit', '.leave-submit', function() {
                self.submit();
            });

        this.on('show.LeaveMSGView', $.proxy(this.toggleHide, this, false));
    },

    /**
    * method: show/hide 留言
    * @param boolean show;
    */
    toggleHide(willHide) {
        this.$elem.toggleClass('chat-page-hide', willHide);

        return this;
    },

    /**
     * 提交留言的hanlder
    */
    submit() {
        let content = this.$input.val();

        bus.trigger(
            'save.LeaveMSGView',
            [this, {content}]
        );
    }
});

LeaveMSGView.prototype.constructer = LeaveMSGView;


/*
    评价view
*/
const RatingView = function(elem, socket) {
    this.elem = $(elem);
    this.$ranks = this.elem.find('.stars i');
    this.$label = this.elem.find('.rank');
    this.rank = 3;
    this.bindEvents();
    this.socket = socket;
};

RatingView.prototype = $.extend({}, EventEmitter.prototype, {

    bindEvents() {
        const self = this;

        this.elem
            .on('click.RatingView.rating', '.stars i', function(event) {
                self.rating($(event.target));
            })
            .on('click.RatingView.close', '.close', $.proxy(this.toggle, this, false));
    },

    rating($rank) {
        const rankMap = {
            0: '非常不满意',
            1: '不满意',
            2: '一般',
            3: '满意',
            4: '非常满意',
        };

        const curVal = this.rank = $rank.index();

        this.rankText = rankMap[curVal];
        this.$label.text(rankMap[curVal]);

        this.$ranks.removeClass('rated');
        this.$ranks.toggleClass(index => {
            return index <= curVal ? 'rated' : null;
        });
    },

    post(data) {
        const self = this,
            elem = this.elem;
        var params = {
            stars: ++this.rank,
            promoter: 1,
            reasonMsg: elem.find('.words-to-say').val(),
        };

        Object.assign(params, data);
        $.ajax({
            type: 'POST',
            url: 'http://192.168.102.18:60101/api/evalute/saveEvalute',
            data: params,
            success: function(res) {
                if (res && res.code === 200) {
                    elem.hide();
                    elem.trigger('rating-success', [self.rankText]);
                }
            },
            error: function() {

            }
        });
    },

    toggle(willShow) {
        this.elem.toggle(willShow);
    }
});

RatingView.prototype.constructer = RatingView;

const OrderListView = function(elem) {
    this.$elem = $(elem);
    this.orderListT = require('service/chat/orders.hbs');

    this.$localOrders = this.$elem.find('[data-tab=local]');
    this.$globalOrders = this.$elem.find('[data-tab=global]');

    this.bindEvents();
    this.fetchOrders();
};

OrderListView.prototype = $.extend({}, EventEmitter.prototype, {
    bindEvents: function() {
        const self = this;

        this.$elem
            .on('click.OrderListView.back', '.chat-page-back', function() {
                self.toggleHide(true);
            })
            .on('click.OrderListView.select', '[data-action=select]', function() {
                self.selectOrder($(event.target));
            });

        // 被通知显示，执行显示
        this.on('show.OderListView', $.proxy(this.toggleHide, this, false));
    },

    /**
     *  method: 选择订单，然后关闭
     */
    selectOrder: function($btn) {
        let $order = $btn.closest('.order-page');

        // 订单数据
        let data = {
            imgSrc: $order.find('.thumb').attr('src'),
            orderCode: $order.find('[data-id]').attr('data-id'),
            cost: $order.find('.sum-cost').text(),
            createTime: $order.find('.js-create-time').val(),
            orderStatus: $order.find('.order-status').text()
        };

        // 通知chat，订单列表已选择订单
        this.trigger('selectOrder.OrderListView', [data]);

        // 关闭
        this.toggleHide(true);
    },

    /**
    * method: show/hide 订单列表
    * @param boolean willHide;
    * @return this
    */
    toggleHide: function(willHide) {
        this.$elem.toggleClass('chat-page-hide', willHide);

        return this;
    },


    /**
     * method:  获取订单
     */
    fetchOrders: function() {
        const self = this;

        return api.fetchOrders().done(result => {
            let html = self.orderListT({orders: result.data});

            self.$localOrders.append(html);
            lazyLoad($('img.lazy'));
        });
    }
});

OrderListView.prototype.constructer = OrderListView;

export {RatingView, LeaveMSGView, OrderListView};