import type { DirectiveBinding } from 'vue';
import { Directive } from 'vue';

interface ElType extends HTMLElement {
	copyData: string | number; // 定义一个属性，用于存储需要复制的数据
	__handleClick__: any; // 定义一个属性，用于存储事件处理函数
}

/**
 * * v-copy
 * 复制某个值至剪贴板
 * 接收参数：string类型/Ref<string>类型/Reactive<string>类型
 */
const copy: Directive = {
	mounted(el: ElType, binding: DirectiveBinding) {
		el.copyData = binding.value;
		el.addEventListener('click', handelClick);
	},
	// 指令所在组件VNode 更新时触发
	updated(el: ElType, binding: DirectiveBinding) {
		el.copyData = binding.value; // 更新需要复制的数据
	},
	// 指令与元素绑定时触发
	beforeMount(el: ElType) {
		// 移除点击事件
		el.removeEventListener('click', el.__handleClick__);
	},
};

/**
 * * 点击事件
 * @param this 当前作用域
 */
function handelClick(this: any) {
	// 创建一个 input 元素
	const input = document.createElement('input');
	// 将需要复制的数据赋值给 input 的 value 属性
	input.value = this.copyData.toLocaleString();
	// 将 input 元素添加到 body 中
	document.body.appendChild(input);
	// 选中 input 元素中的文本
	input.select();
	// 执行复制操作
	document.execCommand('Copy');
	// 将 input 元素从 body 中移除
	document.body.removeChild(input);

	// TODO: 如需自定义请修改提示方式
	alert('复制成功');
}
export default copy;
