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

require('../../common'); // eslint-disable-line

var areaSelect = {  // eslint-disable-line
    isIE8: window.isIE8,
    init: function($el, areaCode) {
        var city, province, area;

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

        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.$townList = $el.find('.town-list');

        // 判断是否使用三级地址
        if ($el.find('.area-select.third-level-area').length) {
            this.thirdLevel = true;
        }

        this.bindEvent();

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

            this.getAreaList(0, province);
            this.getAreaList(province, city);
            this.getAreaList(city, area);
            this.getAreaList(area, areaCode);
        } 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');
                that.ieRefresh();
            }
        }).on('click', '.area-box > span', function() {
            that.$areaText.addClass('on-edit');
            that.$el.find('.area-sel-tab').eq(0).click();
            that.ieRefresh();
        }).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.setOptionList('town');

            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.setOptionList('town');

            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();

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

            $this.siblings('.on').removeClass('on');
            $this.addClass('on');

            // 重置 镇
            that.setOptionList('town');

            that.area = data;
            that.$areaText.text((that.province.text || '') + ' / ' + (that.city.text || '') +
                ' / ' + (data.text || ''));

            if (!that.thirdLevel) {
                that.getAreaList(data.id || 0);
                that.nextLevelArea();
            } else {
                that.$areaText.removeClass('on-edit');
                that.ieRefresh();
            }
        });

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

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

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

            $this.siblings('.on').removeClass('on');
            $this.addClass('on');
            that.town = data;
            that.$areaText.text((that.province.text || '') + ' / ' + (that.city.text || '') +
                ' / ' + (that.area.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';
            } else if (idString.length === 6) {
                type = 'town';
            }

            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].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].caption + '</span>';
            }

            if (type === 'city') {
                this.city = selInfo;
                this.$cityList.html(_h);
            } else if (type === 'area') {
                this.area = selInfo;
                this.$areaList.html(_h);
            } else {
                this.town = selInfo;

                if (data && data.length) {
                    if (select && !selInfo.id) {
                        select = this.area.id || 0;
                        this.town = {
                            id: select,
                            text: '全部'
                        };
                        _h = '<span class="ai' + select + ' all-town on" data-id="' + select +
                            '" data-text="全部">全部</span>' + _h;
                    } else {
                        select = this.area.id || 0;
                        _h = '<span class="ai' + select + ' all-town" data-id="' + select +
                            '" data-text="全部">全部</span>' + _h;
                    }
                }

                this.$townList.html(_h);
            }
        }
    },
    val: function() {
        if (this.thirdLevel) {
            return this.area ? this.area.id : '';
        } else {
            return this.town ? this.town.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);
        }

        if (!this.thirdLevel && this.town.text) {
            arr.push(this.town.text);
        }

        return {
            area: arr.join(' '),
            areaText: arr.join('/')
        };
    },
    ieRefresh: function() { // i8下强制重绘
        if (!this.isIE8) {
            return;
        }

        if (!this.$body) {
            this.$body = $('body');
        }

        this.$body.toggleClass('iecss');
    }
};

module.exports = areaSelect;