// 失去焦点的时候不触发其他点击事件
 const isolate = {
	mounted(el) {
		let isHandlingBlur = false;
		const overlayClass = 'isolate-blur-overlay';

		//
		const inputEl = el.querySelectorAll('input')[0]

		const createOverlay = () => {
			const existing = document.querySelector(`.${overlayClass}`);
			if (existing) return;

			const overlay = document.createElement('div');
			overlay.className = overlayClass;
			overlay.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9999;
        opacity: 0;
      `;

			// 阻止所有交互
			overlay.addEventListener('mousedown', stopEvent, true);
			overlay.addEventListener('touchstart', stopEvent, true);
			overlay.addEventListener('click', stopEvent, true);

			document.body.appendChild(overlay);
		};

		const removeOverlay = () => {
			const overlays = document.querySelectorAll(`.${overlayClass}`);
			overlays.forEach(ol => ol.remove());
		};

		function stopEvent(e) {
			e.stopPropagation();
			e.preventDefault();
			e.stopImmediatePropagation();
		}

		inputEl.addEventListener('focus', () => {
			isHandlingBlur = true;
		});

		inputEl.addEventListener('blur', () => {
			isHandlingBlur = true;
			createOverlay();


			setTimeout(() => {
				removeOverlay();
				isHandlingBlur = false;
			}, 500);
		});

		// 阻止input自身事件冒泡
		inputEl.addEventListener('click', (e) => {
			if (isHandlingBlur) {
				stopEvent(e);
			}
		});
	}
};

export default isolate;