/**
 * 三级地址联动
 * @author: yyq<yanqing.yang@yoho.cn>
 * @date: 2016/12/22
 */
var $ = require('yoho-jquery');

var areaSelect = {
    init: function($el, area) {
        var city, province;

        this.province = {};
        this.city = {};
        this.area = {};

        this.$el = $el;
        this.$areaText = $el.find('.area-text');
        this.$provinceList = $el.find('.province-list');
        this.$cityList = $el.find('.city-list');
        this.$areaList = $el.find('.area-list');

        this.bindEvent();

        if (area) {
            area = area.toString();
            province = area.substring(0, 2);
            city = area.substring(0, 4);

            this.getAreaList(0, province);
            this.getAreaList(province, city);
            this.getAreaList(city, area);
        } else {
            this.getAreaList(0);
        }
    },
    bindEvent: function() {
        var that = this;

        this.$el.on('click', '.content', function(event) {
            if (!$(event.target).closest('.area-box').length) {
                that.$areaText.removeClass('on-edit');
            }
        }).on('click', '.area-box > span', function() {
            that.$areaText.addClass('on-edit');
            that.$el.find('.area-sel-tab').eq(0).click();
        }).on('click', '.area-sel-tab', function(event) {
            var $this = $(event.target);

            if (!$this.hasClass('area-sel-tab') || $this.hasClass('tab-on')) {
                return;
            }

            $this.siblings('.area-sel-tab').removeClass('tab-on');
            $this.addClass('tab-on');
        });

        this.$provinceList.on('click', 'span', function() {
            var $this = $(this),
                data = $this.data();

            if ($this.hasClass('on')) {
                return;
            }

            that.$provinceList.find('.on').removeClass('on');
            $this.addClass('on');
            that.setOptionList('city');
            that.setOptionList('area');
            that.getAreaList(data.id || 0);
            that.province = data;
            that.$areaText.text(data.text || '');
            that.nextLevelArea();
        });

        this.$cityList.on('click', 'span', function() {
            var $this = $(this),
                data = $this.data();

            if ($this.hasClass('on')) {
                return;
            }

            $this.siblings('.on').removeClass('on');
            $this.addClass('on');
            that.setOptionList('area');
            that.getAreaList(data.id || 0);
            that.city = data;
            that.$areaText.text((that.province.text || '') + ' / ' + (data.text || ''));
            that.nextLevelArea();
        });

        this.$areaList.on('click', 'span', function() {
            var $this = $(this),
                data = $this.data();

            that.$areaText.removeClass('on-edit');

            if ($this.hasClass('on')) {
                return;
            }

            $this.siblings('.on').removeClass('on');
            $this.addClass('on');
            that.area = data;
            that.$areaText.text((that.province.text || '') + ' / ' + (that.city.text || '') +
                ' / ' + (data.text || ''));

        });
    },
    nextLevelArea: function() {
        var that = this;

        setTimeout(function() {
            that.$el.find('.area-sel-tab.tab-on').next().trigger('click');
        }, 200);
    },
    getAreaList: function(id, select) {
        var that = this;

        if (id === 0 && this.provinceGroup) {
            return this.setOptionList('province', this.provinceGroup, select);
        }

        $.ajax({
            type: 'GET',
            url: '/cart/address/area',
            data: {
                id: id
            }
        }).then(function(data) {
            var info = data.data,
                type = 'province';
            var i, idString;

            if (data.code !== 200) {
                return;
            }

            idString = id.toString();

            if (idString.length === 2) {
                type = 'city';
            } else if (idString.length === 4) {
                type = 'area';
            }

            info = data.data;

            if (id === 0) {
                that.provinceGroup = {
                    'A-G': [],
                    'H-K': [],
                    'L-S': [],
                    'T-Z': []
                };
                for (i = 0; i < info.length; i++) {
                    if (info[i].pySort < 7) {
                        that.provinceGroup['A-G'].push(info[i]);
                    } else if (info[i].pySort < 11) {
                        that.provinceGroup['H-K'].push(info[i]);
                    } else if (info[i].pySort < 19) {
                        that.provinceGroup['L-S'].push(info[i]);
                    } else {
                        that.provinceGroup['T-Z'].push(info[i]);
                    }
                }

                return that.setOptionList(type, that.provinceGroup, select);
            }
            return that.setOptionList(type, info, select);
        });
    },
    setOptionList: function(type, data, select) {
        var _h = '', className = '', i, j;
        var selInfo = {};

        if (type === 'province') {
            data = data || {};
            for (i in data) {
                if (data.hasOwnProperty(i)) {
                    _h += '<p><label class="group-title">' + i + '</label>';
                    for (j = 0; j < data[i].length; j++) {
                        className = 'ai-' + data[i][j].id;

                        if (select && +data[i][j].id === +select) {
                            this.province = {
                                id: select,
                                text: data[i][j].caption
                            };
                            className += ' on';
                        }
                        _h += '<span class="' + className + '" data-id="' + data[i][j].id +
                            '" data-text="' + data[i][j].caption + '">' +
                            (data[i][j].is_support_express === 'Y' ? '*' : '') + data[i][j].caption + '</span>';
                    }
                    _h += '</p>';
                }
            }
            this.$provinceList.html(_h);
        } else {
            data = data || [];
            for (j = 0; j < data.length; j++) {
                className = 'ai-' + data[j].id;

                if (select && +data[j].id === +select) {
                    selInfo = {
                        id: select,
                        text: data[j].caption
                    };
                    className += ' on';
                }
                _h += '<span class="' + className + '" data-id="' + data[j].id +
                '" data-text="' + data[j].caption + '">' +
                (data[j].is_support_express === 'Y' ? '*' : '') + data[j].caption + '</span>';
            }

            if (type === 'city') {
                this.city = selInfo;
                this.$cityList.html(_h);
            } else {
                this.area = selInfo;
                this.$areaList.html(_h);
            }
        }
    },
    val: function() {
        return this.area ? this.area.id : '';
    },
    text: function() {
        var arr = [];

        if (this.province.text) {
            arr.push(this.province.text);
        }

        if (this.city.text) {
            arr.push(this.city.text);
        }

        if (this.area.text) {
            arr.push(this.area.text);
        }
        return {
            area: arr.join(' '),
            areaText: arr.join('/')
        };
    }
};

module.exports = areaSelect;