import { Directive, ObjectDirective } from 'vue';

// 权限控制
const PermissionDirective: Directive = {
    mounted(el: HTMLElement, binding: { value: string[] }, vnode: any) {
        const routePath = vnode.ctx.appContext.config.globalProperties.$route.path;
        console.log(extractPath(routePath))
        // const currentRoute = getCurrentInstance()?.appContext.config.globalProperties.$route;
        // console.log('Current Route:', currentRoute);

        // const permissions = binding.value;
        // if (!Array.isArray(permissions)) {
        //     console.error('Permissions must be provided as an array.');
        //     return;
        // }
        // if (!permissions.some((permission: string) => permission === 'admin')) {
        //     el.parentNode && el.parentNode.removeChild(el)
        // }
    }
};

const PositiveIntegerDirective: ObjectDirective = {
    mounted(el: HTMLElement) {
        el.addEventListener('input', handleInput);
    },
    beforeUnmount(el: HTMLElement) {
        el.removeEventListener('input', handleInput);
    },
};

function handleInput(event: Event) {
    const input = event.target as HTMLInputElement;
    const regex = /^\d*\.?\d*$/;
    if (!regex.test(input.value)) {
        input.value = input.value.replace(/[^\d\.]/g, '');
    }
}

function extractPath(str: any) {
    const startIndex = str.indexOf('/');
    const endIndex = str.indexOf('/', startIndex + 1);
    return str.slice(startIndex, endIndex !== -1 ? endIndex : undefined);
}

// 导出的自定义指令
const customize = [
    { key: 'permission', directive: PermissionDirective, name: '角色权限' },
    { key: 'enterNumber', directive: PositiveIntegerDirective, name: 'input正整数' }
]

export default customize;