import { DirectiveBinding } from 'vue';
import { useAuthorizedStore } from '@/store';

function checkPermission(el: HTMLElement, binding: DirectiveBinding) {
  const { value } = binding;
  const userStore = useAuthorizedStore();
  const { permissions } = userStore;
  if (Array.isArray(value)) {
    if (value.length > 0) {
      const hasPermission = value.filter((item: string) => permissions.includes(item));
      if (hasPermission.length === 0 && el.parentNode) {
        if (el.parentNode.childElementCount === 1) {
          // @ts-ignore
          el.parentNode.remove();
        } else {
          el.parentNode.removeChild(el);
        }
      }
    }
  } else {
    throw new Error(`need roles! Like v-permission="['admin','user']"`);
  }
}

export default {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    checkPermission(el, binding);
  },
  updated(el: HTMLElement, binding: DirectiveBinding) {
    checkPermission(el, binding);
  },
};