// import {usePermission} from '@/hooks/permission'
// import { watchEffect } from 'vue';

// const {authCodeOpts} =usePermission()

// function checkPermission(el,binding) {
//   let {value} = binding
//   if(value && typeof(value)=='string'){
//     // 使用watchEffect来监听authList的变化
//     watchEffect(() => {
//       // 如果authList还未获取到，则直接返回
//       if (!authCodeOpts.value) return;

//       // 拿出所有按钮的code
//       let buttonCodes = authCodeOpts.value
//       if (!buttonCodes.includes(value)) {
//         // 没有权限，删除dom
//         el.parentNode && el.parentNode.removeChild(el);
//       }
//     });
//   }else{
//     throw new Error('permission指令只接受字符串类型')
//   }
// }

// export const permission={
//   inserted(el,binding){
//     checkPermission(el,binding)
//   },
//   updated(el,binding) {
//     checkPermission(el,binding)
//   },
// }

import { usePermission } from '@/hooks/permission';
import { watch } from 'vue';

const { authCodeOpts } = usePermission();

function checkPermission(el, binding, vnode) {
  let { value } = binding;
  if (value && typeof value === 'string') {
    // 创建一个占位元素，用于在权限重新赋予时插入按钮
    const placeholder = document.createComment(' ');
    el._placeholder = placeholder;

    // 使用 watch 来监听 authCodeOpts 的变化
    const stop = watch(
      () => authCodeOpts.value,
      (newVal) => {
        // 如果 authCodeOpts 还未获取到，则直接返回
        if (!newVal) return;

        // 拿出所有按钮的 code
        let buttonCodes = newVal;
        if (!buttonCodes.includes(value)) {
          // 没有权限，删除 DOM 并保留占位
          if (el.parentNode) {
            el.parentNode.replaceChild(placeholder, el);
          }
        } else {
          // 有权限，恢复按钮
          if (placeholder.parentNode) {
            placeholder.parentNode.replaceChild(el, placeholder);
          }
        }
      },
      { immediate: true }
    );

    // 将 stop 作为元素的属性存储，以便在指令 unmounted 时可以停止监听
    el._stop = stop;
  } else {
    throw new Error('permission 指令只接受字符串类型');
  }
}

export const permission = {
  mounted(el, binding, vnode) {
    checkPermission(el, binding, vnode);
  },
  updated(el, binding, vnode) {
    checkPermission(el, binding, vnode);
  },
  unmounted(el) {
    // 组件卸载时停止监听
    if (el._stop) {
      el._stop();
      delete el._stop;
    }
  },
};
