(function () {


    var dialogData = {
        role_imitate: '',
        role_names: {
            '1': '管理员',
            '2': '小编',
            '3': '客服'
        },
        edit_model: false,
        edit: true,
        edit_action: '',
        f: false,
        default_all: true,
        roleCheck: [1, 2],
        show: false,
        lang:{
            title:'权限设置',
            sys_role:'系统设定,不可编辑',
            f:'不选择,除了超管没有其他角色可以访问',
            f_not:'不选择,任何角色都可以访问',
            cancel:'取消',
            submit:'提交',
            imitate:'模拟',
            close:'关闭'
        }
    };
    var pageSpan = null;
    var el_current = null;

    var onRoleEdit = function (action, roles, close) {
        close();
        console.log(action + ":" + JSON.stringify(roles));
    };

    var onPageNoRole = function () {
        alert('你没有权限访问当前页面');
        history.go(-1);
    };

    function parseSearch() {
        var search_l = location.search.substr(1);
        if(!search_l)return {};
        search_l=search_l.split('&');
        var search = {};
        for (i = 0; i < search_l.length; i++) {
            var kv = search_l[i].split('=');
            search[kv[0]] = kv[1];
        }
        return search;
    }

    function hashChange() {
        if (!pageSpan)return;
        var role_key = hashToKey();
        var roleCheck = config.roles[role_key];
        if (!roleCheck) {
            roleCheck = [];
        }
        if (config.edit_model) {
            pageSpan.classList.remove('vue-role-dot-has-role');
            pageSpan.classList.remove('vue-role-dot-f');
            pageSpan.classList.remove('vue-role-dot');
            if (roleCheck.length > 0) {
                pageSpan.classList.add('vue-role-dot-has-role');
            } else {
                pageSpan.classList.add('vue-role-dot');
            }
        }
        if (roleCheck.length > 0) {
            if (config.role == config.super_role) {
                return;
            }
            for (i = 0; i < roleCheck.length; i++) {
                if (roleCheck[i] == config.role) {
                    return;
                }
            }
            onPageNoRole();
        }
    }

    window.addEventListener("popstate", hashChange, false);

   var vueRoleEditor=  Vue.component('vue-role-dialog', {
        template: '<div v-if="edit_model">' +
        '               <div v-if="show"  class="vue-role-dialog__wrapper" >' +
        '                   <div class="vue-role-dialog" >' +
        '                       <div class="vue-role-dialog__header" >' +
        '                           <div >' +
        '                               <span>{{lang.title}}</span>' +
        '                           </div>' +
        '                       </div>' +
        '                       <div class="vue-role-dialog__content" style="">' +
        '                          <span style="width:120px;display: inline-block;padding-right: 10px;" v-for="(v,k) in role_names"> <input type="checkbox" :disabled="!edit" v-model="roleCheck" :value="k" /> {{v}}</span>' +
        '                          <div v-show="!edit" class="info"><span>{{lang.sys_role}}</span></div>' +
        '                          <div v-show="edit" class="info"><span>{{f? lang.f:lang.f_not}}</span></div>' +
        '                       </div>' +
        '                       <div class="vue-role-dialog__btns" >' +
        '                           <button @click="show=false" class="vue-role-btn"  type="button" >' +
        '                               <span>{{lang.cancel}}</span>' +
        '                           </button>' +
        '                           <button @click="saveRole" class="vue-role-btn vue-role-btn-primary" type="button" >' +
        '                               <span>{{lang.submit}}</span>' +
        '                           </button>' +
        '                           </div>' +
        '                       </div>' +
        '                   </div>' +
        '                   <div v-if="show" class="vue-role-model"  tabindex="0" style="z-index: 2000;"></div>' +
        '                   <div class="vue-role-change">' +
        '                       <select  v-model="role_imitate">' +
        '                           <option  v-for="(v,k) in role_names" :value="k"> {{v}}</option>' +
        '                       </select>' +
        '                       <button @click="imitate" style="border-radius:0"  class="vue-role-btn vue-role-btn-primary">{{lang.imitate}}</button>' +
        '                       <button @click="close" style="border-radius:0"  class="vue-role-btn ">{{lang.close}}</button>' +
        '                   </div>' +
        '           </div>',
        data: function () {
            return dialogData;
        }, methods: {
            imitate: function () {
                var search = parseSearch();
                search.vue_role_edit_model = 1;
                search.vue_role_imitate = this.role_imitate;
                var m = '';
                for (var k in  search) {
                    if (!search.hasOwnProperty(k)) {
                        return;
                    }
                    if (m) {
                        m += '&';
                    }
                    m += k + '=' + search[k];
                }
                location.href = location.pathname + '?' + m + location.hash;
            }, close: function () {
                var search = parseSearch();
                delete search.vue_role_edit_model;
                delete search.vue_role_imitate;
                var m = '';
                for (var k in  search) {
                    if (!search.hasOwnProperty(k)) {
                        return;
                    }
                    if (m) {
                        m += '&';
                    }
                    m += k + '=' + search[k];
                }
                location.href = location.pathname + '?' + m + location.hash;
            },
            saveRole: function () {
                var me = this;

                function close() {
                    me.show = false;
                }

                if (!this.edit) {
                    close();
                } else {
                    config.roles[this.edit_action] = this.roleCheck;
                    el_current.classList.remove('vue-role-dot-has-role');
                    el_current.classList.remove('vue-role-dot-f');
                    el_current.classList.remove('vue-role-dot');
                    if (this.roleCheck.length > 0) {
                        el_current.classList.add('vue-role-dot-has-role');
                    } else {
                        if (this.f) {
                            el_current.classList.add('vue-role-dot-f');
                        } else {
                            el_current.classList.add('vue-role-dot');
                        }
                    }
                    onRoleEdit(this.edit_action, this.roleCheck, close);
                }
            }
        }
    });
    var vueRoleEditorDiv = document.createElement('div');
    vueRoleEditorDiv.id='vue-role-editor';
    document.body.appendChild(vueRoleEditorDiv);
    var editor=(new vueRoleEditor);
    editor.$mount('#vue-role-editor');
    function hashToKey() {
        var hash = window.location.hash;
        hash = hash.substr(hash.indexOf('/') == 1 ? 2 : 1);
        if (hash.indexOf('?') > -1) {
            hash = hash.substr(0, hash.indexOf('?'));
        }
        var path = hash.split('/');
        var m = [];
        for (var i = 0; i < path.length; i++) {
            var item = path[i];
            if (!(parseInt(item) + "" == item || item.indexOf('@') == 0)) {
                m.push(item);
            }
        }
        path = m;
        return path.join('/');
    }

    var config = {
        edit_model: false,
        role: 1,
        super_role: 1,
        super: true,
        roles: {
            'customer.menu': []//管理
        },
        role_names: {
            '1': '管理员',
            '2': '小编',
            '3': '客服'
        },
        lang:{
            title:'权限设置',
            sys_role:'系统设定,不可编辑',
            f:'不选择,除了超管没有其他角色可以访问',
            f_not:'不选择,任何角色都可以访问',
            cancel:'取消',
            submit:'提交',
            imitate:'模拟',
            close:'关闭'
        }
    };

    window.VueRole = {
        config: function (set) {
            var me=this;
            for (var i in set) {
                if (!set.hasOwnProperty(i)) {
                    return;
                }
                config[i] = set[i];
            }
            config.role = "" + config.role;
            config.super_role = "" + config.super_role;
            config.super = config.role == config.super_role;
            var search = parseSearch();
            config.edit_model = search['vue_role_edit_model'];
            dialogData.edit_model = config.edit_model;
            var role = search['vue_role_imitate'];
            if (role) {
                config.role = role;
                config.super = false;
            }
            dialogData.role_imitate = config.role;
            dialogData.role_names = config.role_names;
            if (config.edit_model) {
                pageSpan = document.createElement('span');
                pageSpan.classList.add('vue-role-page');
                pageSpan.classList.add('vue-role-dot');
                document.body.appendChild(pageSpan);
                pageSpan.onclick = function (event) {
                    el_current = pageSpan;
                    event.stopPropagation();
                    dialogData.show = true;
                    dialogData.f = false;
                    var role_key = hashToKey();
                    var roles = config.roles[role_key];
                    if (!roles) {
                        roles = [];
                    }
                    dialogData.roleCheck = roles;
                    dialogData.edit = true;
                    dialogData.edit_action = role_key;
                }
            }
            hashChange();
            if (config.role == config.super_role) {
                document.onkeydown = function (e) {
                    if (e.ctrlKey && e.key == '/') {
                        me.editModel(!config.edit_model);
                    }
                };
            }
        },
        editModel:function (open) {
            if(open==null)open=true;
            var search = parseSearch();
            delete search.vue_role_edit_model;
            delete search.vue_role_imitate;
            if(open==true){
                search.vue_role_edit_model = 1;
            }
            var m = '';
            for (var k in  search) {
                if (!search.hasOwnProperty(k)) {
                    return;
                }
                if (m) {
                    m += '&';
                }
                m += k + '=' + search[k];
            }
            location.href = location.pathname + '?' + m + location.hash;
        },
        onRoleEdit: function (fun) {
            onRoleEdit = fun;
        },
        onPageNoRole: function (fun) {
            onPageNoRole = fun;
        }
    };

    // recursively search for possible transition defined inside the component root
    function locateNode (vnode) {
        return vnode.componentInstance && (!vnode.data || !vnode.data.transition)
            ? locateNode(vnode.componentInstance._vnode)
            : vnode
    }

    Vue.directive('role', {
        inserted: function (el, binding,vnode) {
            var role_key=binding.rawName.replace('v-role:','').replace('.$f','').replace('.$h','');
            var arg = binding.arg;
            if (config.edit_model&&!binding.modifiers.$h&&(!binding.expression||binding.value)) {
                if (!el.style.position || el.style.position == 'inherit' || el.style.position == 'initial' || el.style.position == 'unset' || el.style.position == 'static') {
                    el.style.position = 'relative';
                }
                var span = document.createElement('span');
                var roles = config.roles[role_key];
                if (!roles) {
                    roles = [];
                }
                if (roles.length > 0||!arg) {
                    span.classList.add('vue-role-dot-has-role');
                } else {
                    if (binding.modifiers.$f) {
                        span.classList.add('vue-role-dot-f');
                    } else {
                        span.classList.add('vue-role-dot');
                    }
                }
                span.onclick = function (event) {
                    el_current = span;
                    event.stopPropagation();
                    dialogData.show = true;
                    dialogData.f = binding.modifiers.$f;
                    if (!arg) {
                        var keys = [];
                        for (var i in binding.modifiers) {
                            if (binding.modifiers.hasOwnProperty(i)) {
                                if (i == '$f') {
                                    f = true;
                                }else
                                if (i == '$h') {
                                    h = true;
                                }else {
                                    keys.push(i)
                                }
                            }
                        }
                        dialogData.roleCheck = keys;
                        dialogData.edit = false;
                        dialogData.edit_action = '';
                    } else {
                        dialogData.roleCheck = roles;
                        dialogData.edit = true;
                        dialogData.edit_action = role_key;
                    }
                };
                el.appendChild(span);
                span = document.createElement('span');
                span.style.clear = 'both';
                el.appendChild(span);
            }
            if (config.role == config.super_role) {
                return;
            }
            if (!arg) {
                //没有设置action
                if (binding.modifiers[config.role]) {
                    return;
                }
            } else {
                if (!config.roles[role_key] || config.roles[role_key].length == 0) {
                    if (!binding.modifiers.$f) {
                        return;
                    }
                } else {
                    for (i = 0; i < config.roles[role_key].length; i++) {
                        if (config.roles[role_key][i] == config.role) {
                            return;
                        }
                    }
                }
            }
            el.remove();
            el.style.display='none';
        }
    });


})();