/*
 * @FilePath     : /src/directive/buttonPermission.js
 * @Description  : 按钮权限
 */
const hasPermission = value => {
  let sessionPermissions = JSON.parse($utils.decryptByDES.CBC(sessionStorage.getItem('permissions')))
  const flag = sessionPermissions.includes(value)
  return flag
}
// removeDom、addDom的存在是为了保证自定义指令绑定的权限码数据变化后可以不刷新页面动态添加/移除自定义指令所在的dom节点
// 移除dom节点
const removeDom = el => {
  // 把注释点绑在元素上，方便后面使用
  el._placeholderNode = document.createComment('permission-btn')
  // 和父节点关联上，方便后面使用
  el._parentNode = el.parentNode
  // 父节点做子元素替换
  el.parentNode.replaceChild(el._placeholderNode, el)
}

// 把移除的dom节点添加回来
const addDom = el => {
  el._parentNode?.replaceChild(el, el._placeholderNode)
}

const mounted = (el, binding) => {
  // console.log(binding, 'binding')
  if (!binding.value) return

  if (!hasPermission(binding.value)) {
    // 移除当前dom节点
    // el.parentNode?.removeChild(el) // 通过父节点删除子自己
    // el.remove() // 自杀
    /* 
        权限值会变，那就涉及到更新后要不要将移除的dom节点添加回来
        为了能够知道添加回来的dom节点放到哪个地方，可以创建注释节点来占位
        在添加时只对那个位置的子元素做替换操作即可
    */
    removeDom(el)
  }
}

const updated = (el, binding) => {
  // 比对前后变化的值，相同不需要后续操作
  let valDiff = binding.value === binding.oldValue
  if (valDiff) return
  // 重新判断改值前后的权限变化，相同不需要后续操作（如：修改前就没权限，修改后依旧没权限，无需操作）
  let oldPermisStatus = hasPermission(binding.oldValue)
  let nowPermisStatus = hasPermission(binding.value)

  if (oldPermisStatus == nowPermisStatus) return
  if (nowPermisStatus) {
    addDom(el)
  } else {
    removeDom(el)
  }
}

export const buttonPermission = {
  mounted,
  updated,
}
