import useUserStore from '@/store/modules/user'
import { Directive, DirectiveBinding, nextTick } from 'vue'

/**
 * 按钮权限校验
 */
export const hasPerm: Directive = {
	mounted(el: HTMLElement, binding: DirectiveBinding) {
		// 「超级管理员」拥有所有的按钮权限
		const user = useUserStore()
		const roles = user.roles
		if (roles.includes('ROOT')) {
			return true
		}
		// 「其他角色」按钮权限校验
		const { value } = binding
		if (value) {
			const requiredPerms = value // DOM绑定需要的按钮权限标识

			const hasPerm = user.perms?.some(perm => {
				return requiredPerms.includes(perm)
			})

			if (!hasPerm) {
				el.parentNode && el.parentNode.removeChild(el)
			}
		} else {
			throw new Error("need perms! Like v-has-perm=\"['sys:user:add','sys:user:edit']\"")
		}
	}
}

/**
 * 角色权限校验
 */
export const hasRole: Directive = {
	mounted(el: HTMLElement, binding: DirectiveBinding) {
		const { value } = binding

		if (value) {
			const requiredRoles = value // DOM绑定需要的角色编码
			const user = useUserStore()
			const hasRole = user.roles.some(perm => {
				return requiredRoles.includes(perm)
			})

			if (!hasRole) {
				el.parentNode && el.parentNode.removeChild(el)
			}
		} else {
			throw new Error("need roles! Like v-has-role=\"['admin','test']\"")
		}
	}
}

/**
 * 自动聚焦
 */
const getInput = (el: HTMLElement): HTMLInputElement | null => el instanceof HTMLInputElement ? el : el.querySelector('input')
export const autoFocus: Directive = {
	mounted: async (el: HTMLElement, { arg }) => {
		// 为了防止数据未即使更新。
		await nextTick()
		// 对于非文本框聚焦（使用了 contenteditable ）的直接聚焦即可
		if (arg) el.focus?.()
		else getInput(el)?.focus()
	}
}
