const Dropdown = (($) => {
    const ListTpl = '<div class="cd-dropdown J_dropDown">' +
        '<div class="cd-dropdown-el">' +
        '<div data-id="{{defaultId}}" class="cd-dropdown-name J_dropDownName"><span class="cd-dropdown-name-text">{{defaultValue}}</span><i class="cd-component cd-component-black-arrow"></i></div>' +
        '<ul class="cd-dropdown-list J_dropDownList">' +
        '{{each list}}' +
        '<li data-id="{{$value.id}}" class="cd-dropdown-list-item J_dropDownListItem">{{$value.value}}</li>' +
        '{{/each}}' +
        '</ul>' +
        '</div>' +
        '</div>';
    const DefaultConfig = {
        defaultSelect: -1,
        listData: [],
        listMaxNum: 300,
        defaultShowNum: 6,
        selectOnChange: null
    };
    const ClassName = {
        active: 'cd-active',
    };
    class Dropdown {
        constructor(config) {
            this._config = this._getConfig(config);
            this._renderList();
            this._addEvents();
        }
        
        _getConfig(config) {
            let mergetConfig = $.extend({}, DefaultConfig, config);
            mergetConfig.node = $(mergetConfig.node);
            mergetConfig.listData.length = mergetConfig.listData.length > mergetConfig.listMaxNum ? mergetConfig.listMaxNum : mergetConfig.listData.length;
            this.rowHeight = mergetConfig.node.height();
            this.rowHeight = (this.rowHeight == 0 ? 35 : this.rowHeight);
            return mergetConfig;
        }
        
        _addEvents() {
            let self = this;
            this.element = this._config.node.find('.J_dropDown');
            let selectName = this.element.find('.J_dropDownName');
            this._selectList = this.element.find('.J_dropDownList');
            this._selectItems = this._selectList.find('.dropDownListItem');
            selectName.height(this.rowHeight);
            this._selectItems.height(this.rowHeight);
            this.listHeight = (this._config.defaultShowNum > this._config.listData.length ? this._config.listData.length : this._config.defaultShowNum) * this.rowHeight;
            selectName.bind('click', () => {
                if (!this.element.hasClass(ClassName.Active)) {
                    self._showList();
                }
                else {
                    self._hideList();
                }
            });
            this._selectItems.bind('click', (e) => {
                let target = $(e.currentTarget);
                self._selectItem = {
                    id: parseInt(target.attr('data-id')),
                    value: target.text()
                };
                if (typeof(this._config.selectOnChange) === 'function') {
                    this._config.selectOnChange.call(null, self._selectItem);
                }
                self._hideList();
            });
            this.documentClickInstance = this._documentClick.bind(this);
            $(document).bind('click', this.documentClickInstance);
        }
        
        _showList() {
            this._selectList.css('height', this.listHeight);
            this.element.addClass(ClassName.Active);
        }
        
        _hideList() {
            this._selectList.css('height', 0);
            this.element.removeClass(ClassName.Active);
        }
        
        _documentClick(e) {
            let target = $(e.target);
            if (target.hasClass('cd-dropdown-name') || target.hasClass('cd-dropdown-name-text') || target.hasClass('cd-component-black-arrow')) {
                return false;
            }
            else {
                this._hideList();
            }
        }
        
        _renderList() {
            let selectItem = null;
            if (this._config.defaultSelect != -1) {
                for (let i = 0; i < this._config.listData.length; i++) {
                    let item = this._config.listData[i];
                    if (item.id == this._config.defaultSelect) {
                        selectItem = item;
                        break;
                    }
                }
            }
            let defaultId = -1;
            let defaultValue = '请下拉选择...';
            if (!selectItem) {
                this._config.defaultSelect = -1;
            }
            else {
                defaultId = selectItem.id;
                defaultValue = selectItem.value;
            }
            this._selectItem = {
                id: defaultId,
                value: defaultValue
            };
            this._config.node.html(template.render(ListTpl, {
                defaultId: defaultId,
                defaultValue: defaultValue,
                list: this._config.listData
            }));
        }
        
        getSelect() {
            return this._selectItem;
        }
        
        dispose() {
            this._selectItems.unbind('click');
            this._config.node.unbind('click');
            $(document).unbind('click', this.documentClickInstance);
            this._config.node = null;
            this._config = null;
            this._selectItems = null;
            this._selectList = null;
            this.element = null;
        }
    }
    return Dropdown;
})($);
export default Dropdown;