import Vue from 'vue'
import store from '@/store'

export function hasPermissionHandler(value, buttons) {
  let hasPermission = false
  switch (true) {
    // 如果是数组，满足其中一个条件即可
    case Array.isArray(value):
      hasPermission = buttons.some((role) => value.includes(role))
      break
    case typeof value === 'string':
      hasPermission = buttons.includes(value)
      break
    // 如果是 object 对象，则需要同时满足这几个条件
    case Object.prototype.toString.call(value) === '[object Object]':
      let isBreak = false
      for (const key in value) {
        if (value.hasOwnProperty(key)) {
          const v = value[key]
          if (!buttons.includes(v)) {
            isBreak = true
            break
          }
        }
      }
      if (!isBreak) {
        hasPermission = true
      }
      break
    case typeof value === 'boolean':
      hasPermission = !!value
      break
    default:
      // eslint-disable-next-line no-console
      console.error(new Error(`need buttons! Like v-permission="['button1','button2']"`))
  }
  return hasPermission
}
function checkPermission(el: HTMLElement, binding, vnode, oldVnode) {
  const { value } = binding
  const buttons = (store.getters['menu/buttons'] || []) as string[]
  const hasPermission = hasPermissionHandler(value, buttons)
  if (!hasPermission) {
    const comment = document.createComment('permission deny')
    vnode.elm = comment
    vnode.isComment = true

    el.parentNode?.replaceChild(comment, el)
  } else {
    el.setAttribute('data-permission', 'allow')
  }
}
const directive = {
  inserted(el, binding, vnode, oldVnode) {
    checkPermission(el, binding, vnode, oldVnode)
  },
  update(el, binding, vnode, oldVnode) {
    checkPermission(el, binding, vnode, oldVnode)
  },
}

/**
 * v-permission 指令
 *
 * 按用户所有用的菜单按钮进行权限划分
 *
 * NOTE: 不支持用在 <template> 上
 *
 * 用法:
 *
 * 1. 传入字符串
 * v-permission="'按钮1'"
 *
 * 2. 传入 boolean 值
 * v-permission="true"
 *
 * 3. 传入数组，满足数组中的一个条件即可
 * v-permission="['按钮1']"
 *
 * 4. 传入 object 对象，需要同时满足所有条件
 * v-permission="{1: '按钮1', 2: '按钮2'}"
 *
 * 5. 传入变量
 * v-permission="buttons"
 */
Vue.directive('permission', directive)