/**
 * v-clipboard 文字复制剪贴
 *
 作者： CodePlayer
 链接： https: //juejin.cn/post/7052968352007847972
 来源： 稀土掘金
 著作权归作者所有。 商业转载请联系作者获得授权， 非商业转载请注明出处。
 */

// import Clipboard from 'clipboard'
import useClipboard from "vue-clipboard3";
const { toClipboard } = useClipboard();
export default {
  // 挂载
  mounted(el, binding) {
    // binding.arg 为动态指令参数
    // 由于 指令是支持响应式的 因此我们指令需要有一个“全局”对象，这里我们为了不借助其他对象浪费资源，就直接使用el自身了
    // 将copy的值 成功回调 失败回调 及 click事件都绑定到el上 这样在更新和卸载时方便操作
    switch (binding.arg) {
    case "copy":
      // copy值
      el.clipValue = binding.value;
      // click事件
      el.clipCopy = function () {
        toClipboard(el.clipValue)
          .then(result => {
            el.clipSuccess && el.clipSuccess(result);
          })
          .catch(err => {
            el.clipError && el.clipError(err);
          });
      };
      // 绑定click事件
      el.addEventListener("click", el.clipCopy);
      break;
    case "success":
      // 成功回调
      el.clipSuccess = binding.value;
      break;
    case "error":
      // 失败回调
      el.clipError = binding.value;
      break;
    }
  },
  // 相应修改 这里比较简单 重置相应的值即可
  updated(el, binding) {
    switch (binding.arg) {
    case "copy":
      el.clipValue = binding.value;
      break;
    case "success":
      el.clipSuccess = binding.value;
      break;
    case "error":
      el.clipError = binding.value;
      break;
    }
  },
  // 卸载 删除click事件 删除对应的自定义属性
  unmounted(el, binding) {
    switch (binding.arg) {
    case "copy":
      el.removeEventListener("click", el.clipCopy);
      delete el.clipValue;
      delete el.clipCopy;
      break;
    case "success":
      delete el.clipSuccess;
      break;
    case "error":
      delete el.clipError;
      break;
    }
  },

}