layui.define(['jquery'], function (exports) {
    var $ = layui.jquery;
    var CLS_DROPDOWN = 'layui-dropdown';
    var CLS_DROPDOWN_RIGHT = 'layui-dropdown-direright';
    var CLS_SELECT = 'layui-dropdown-select';
    var CLS_OPTION = 'layui-dropdown-option';
    var CLS_TITLE = 'layui-dropdown-title';
    var CLS_ARROW = 'febs-arrow-up';
    var HTML_DROPDOWN = '<div class="' + CLS_DROPDOWN + '"><div>';
    var DEPTH = 0;
    var INDEX = 0;

    var Class = function (config) {
        this.config = $.extend({}, this.config, config);
        this.render(config)
    };
    Class.prototype.config = {
        width: 150,
        trigger: 'click'
    };
    Class.prototype.dropdownElem = '';
    Class.prototype.exists = false;
    Class.prototype.depth = 0;
    Class.prototype.index = 0;
    Class.prototype.render = function (config) {
        var self = this;
        if (typeof this.config.elem == 'string') {
            $(document).on('click', this.config.elem, event)
        } else {
            this.config.elem.click(event)
        }

        function event(e) {
            e.stopPropagation();
            if (self.dropdownElem === '') {
                INDEX += 1;
                self.index = INDEX;

                var dropdown = $(HTML_DROPDOWN).attr('lay-index', self.index);
                $('.' + CLS_DROPDOWN + '[lay-index="' + self.index + '"]').remove();

                dropdown.html(self.createOptionsHtml(config));
                $('body').prepend(dropdown);
                dropdown.on('click', '.' + CLS_OPTION, function (e) {
                    e.stopPropagation();
                    if ($.isFunction(config.click)) {
                        config.click($(this).attr('lay-name'), $(this), e);
                        dropdown.hide()
                    }
                });
                self.dropdownElem = dropdown;
                self.dropdownSelect = dropdown.find('.' + CLS_SELECT)
            }

            var dropdown = self.dropdownElem;

            var top = $(this).offset().top + $(this).height() + 12;
            var left = $(this).offset().left - 5;
            dropdown.css({
                top: top - 10
            });
            var offsetWidth = (self.depth + 1) * self.config.width;

            if (left + offsetWidth > $(window).width()) {
                dropdown
                    .addClass('layui-dropdown-right')
                    .css('left', left - dropdown.width() + $(this).width());
                self.dropdownSelect.css({left: 'auto', right: self.config.width})
            } else {
                dropdown.removeClass('layui-dropdown-right').css('left', left);
                self.dropdownSelect.css({right: 'auto', left: self.config.width})
            }

            $('body').one('click', function (e) {
                dropdown.stop().animate(
                    {
                        top: '-=100000',
                        opacity: 0
                    },
                    1
                );
            });

            dropdown
                .show()
                .stop()
                .animate(
                    {
                        top: '+=10',
                        opacity: 1
                    },
                    250
                )
        }
    };
    Class.prototype.createOptionsHtml = function (data, depth) {
        depth = depth || 0;
        var self = this;
        var width = self.config.width + 'px;';
        var html =
            '<div class="' +
            CLS_SELECT +
            '" style="width:' +
            width +
            (depth > 0 ? 'left:' + width : '') +
            '">';
        if (depth === 0) {
            html += '<div class="' + CLS_ARROW + '"></div>'
        }
        layui.each(data.options, function (i, option) {
            var paserHtml = false;
            var permissions = currentUser.permissionSet;
            var options = option.options || [];
            if (option.perms) {
                if (permissions.indexOf(option.perms) !== -1) {
                    paserHtml = true;
                }
            } else {
                paserHtml = true;
            }
            if (paserHtml) {
                html +=
                    '<div lay-name=' +
                    option.name +
                    ' class="' +
                    CLS_OPTION +
                    '"><p class="' +
                    CLS_TITLE +
                    ' layui-elip"><span class="layui-icon ' +
                    option.icon +
                    '"></span>' +
                    option.title +
                    '</p>' +
                    (options.length > 0
                        ? '<i class="layui-icon layui-icon-right"></i>'
                        : '');
                option.options = option.options || [];
                if (option.options.length > 0)
                    html += self.createOptionsHtml(option, depth + 1);
                html += '</div>';
                if (self.depth < depth) self.depth = depth
            }
        });
        html += '</div>';
        return html
    };

    var self = {
        render: function (config) {
            new Class(config)
        }
    };
    exports('dropdown', self)
});