/**
 * 自定义动画指令
 * v-custom-show="show"
*/
const TimeMap = new Map()
export default {
	name: 'custom-show',
	mounted(el, binding) {
		const { value, modifiers } = binding
		const config = getConfig(modifiers)
		el.style.transition = `all ${config.time}ms ease-in-out`
		el.style.display = value ? '' : 'none';
		el.style.opacity = value ? 1 : 0;
		el.classList.toggle('hide', !value);
	},
	updated(el, binding) {
		const { value, modifiers } = binding
		const config = getConfig(modifiers)
		if (TimeMap.has(el)) {
			clearTimeout(TimeMap.get(el))
			TimeMap.delete(el)
		}
		if (value) {
			el.style.display = ''
			setTimeout(() => {
				el.classList.remove('hide')
				el.style.opacity = 1
			})
		} else {
			el.classList.add('hide')
			el.style.opacity = 0
			setTimeout(() => el.style.display = 'none', config.time)
		}
	},
	beforeUnmount(el, binding) {
		if (TimeMap.has(el)) {
			clearTimeout(TimeMap.get(el))
			TimeMap.delete(el)
		}
	}
};
function getConfig(modifiers) {
	const obj = {
		time: 300,
	}
	Object.keys(modifiers).forEach(key => {
		const arr = key.split('-')
		if (arr.length === 2) obj[arr[0]] = arr[1]
	})
	return obj
}