/**
 * 按钮波浪指令
 * @directive 默认方式：v-waves，如 `<div v-waves></div>`
 * @directive 参数方式：v-waves=" |light|red|orange|purple|green|teal"，如 `<div v-waves="'light'"></div>`
 */
export default {
  mounted(el, binding) {
    el.classList.add('waves-effect');
    binding.value && el.classList.add(`waves-${binding.value}`);

    function setConvertStyle(obj) {
      let style = '';
      for (let i in obj) {
        if (obj.hasOwnProperty(i)) style += `${i}:${obj[i]};`;
      }
      return style;
    }

    function onCurrentClick(e) {
      let elDiv = document.createElement('div');
      elDiv.classList.add('waves-ripple');
      el.appendChild(elDiv);
      let styles = {
        left: `${e.layerX}px`,
        top: `${e.layerY}px`,
        opacity: 1,
        transform: `scale(${(el.clientWidth / 100) * 10})`,
        'transition-duration': `750ms`,
        'transition-timing-function': `cubic-bezier(0.250, 0.460, 0.450, 0.940)`,
      };
      elDiv.setAttribute('style', setConvertStyle(styles));
      setTimeout(() => {
        elDiv.setAttribute(
          'style',
          setConvertStyle({
            opacity: 0,
            transform: styles.transform,
            left: styles.left,
            top: styles.top,
          })
        );
        setTimeout(() => {
          elDiv && el.removeChild(elDiv);
        }, 750);
      }, 450);
    }
    el.addEventListener('mousedown', onCurrentClick, false);
  },
  unmounted(el) {
    el.addEventListener('mousedown', () => {});
  },
}