import Vue from 'vue'
Vue.directive('move-outside', {
  bind(el, binding, vnode) {
    // 通過事件委托綁定到共同父級元素上
    el.addEventListener('mousedown', handleMouseDown)
    /**
     * 點擊事件
     * @param event
     */
    function handleMouseDown(event) {
      const target = event.target
      const drawerWrapper = target.closest('.el-drawer__wrapper')
      const dialogWrapper = target.closest('.el-dialog__wrapper')
      // 抽屜
      if (drawerWrapper) {
        handleMoveOutsideDrawer(drawerWrapper, target)
        // 彈框
      } else if (dialogWrapper) {
        handleMoveOutsideDialog(dialogWrapper, target)
      }
    }
    function handleMoveOutsideDrawer(wrapper, target) {
      // 獲取el-drawer元素
      const drawer = wrapper.querySelector('.el-drawer')
      // 判斷是否點擊在元素之外
      if (drawer && !drawer.contains(target)) {
        // 執(zhí)行原有邏輯
        if (!vnode.componentInstance.wrapperClosable) return
        vnode.componentInstance.closeDrawer()
      }
    }
    function handleMoveOutsideDialog(wrapper, target) {
      // 獲取 el-dialog元素
      const dialog = wrapper.querySelector('.el-dialog')
      // 判斷是否點擊在元素之外
      if (dialog && !dialog.contains(target)) {
        // 執(zhí)行原有邏輯
        if (!vnode.componentInstance.closeOnClickModal) return
        vnode.componentInstance.handleClose()
      }
    }
    // 清空原組件點擊事件
    vnode.componentInstance.handleWrapperClick = () => {}
  }
})