<script>
//  import Vue from 'vue';
  const CSS_ACTIVE = 'is-active';
  const PREFIX_TIPID = 'tooltip_';
  let tipTypeCss = {
    undefined: '',
    normal: '',
    error: 'tooltip--error',
    blue: 'tooltip--blue'
  };
  const calTip = (el, tipNode) => {
    /**
     * 计算tips的位置
     */
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    let scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
    let iconLeft = el.getBoundingClientRect().left + scrollLeft;
    let iconTop = el.getBoundingClientRect().top + scrollTop;
    // 由于offsetWidth计算时间在chrome和ff中不同，因此延时计算以作兼容
    setTimeout(function () {
      let tipHeight = tipNode.offsetHeight;
      let tipWidth = tipNode.offsetWidth;
      tipNode.style.maxHeight = '320px';
      tipNode.style.left = iconLeft - tipWidth / 2 + 9 + 'px';
      tipNode.style.top = iconTop - tipHeight - 12 + 'px';
    }, 0);
  };
  const updateContent = content => {
    let tipContent = [];
    tipContent.push('<p>');
    if (typeof content === 'string') {
      tipContent.push(content);
    } else {
      if (content && content.title) {
        tipContent.push('<strong>' + content.title + '</strong><br>');
      }
      if (content && (content.text || content.text === 0)) {
        tipContent.push(content.text);
      }
    }
    tipContent.push('</p>');
    return tipContent.join('');
  };
  const bindEvent = (el, tipNode) => {
    let classReg = new RegExp('(\\s|^)' + CSS_ACTIVE + '(\\s|$)');
    el.addEventListener('mouseover', function () {
      if (!tipNode.className.match(classReg)) {
        calTip(el, tipNode);
        tipNode.className += ' ' + CSS_ACTIVE;
      }
    });
    el.addEventListener('mouseout', function () {
      if (tipNode.className.match(classReg)) {
        tipNode.className = tipNode.className.replace(classReg, '');
      }
    });
  };
  export default {
    inserted: function (el, binding) {
      // 产生随机id
      let generateTipId = function () {
        var tipId = '';
        for (; tipId.length < 16; tipId += Math.random().toString(36).substr(2));
        return tipId.substr(0, 16);
      };
      let body = document.getElementsByTagName('body')[0];
      let tipNode = document.createElement('div');
      // 构造随机toolId将el和tip联系起来
      let tipId = PREFIX_TIPID + generateTipId();
      el.setAttribute('tipId', tipId);
      tipNode.setAttribute('tipId', tipId);
      tipNode.setAttribute('role', 'tooltip');
      tipNode.className = 'tooltip ' + tipTypeCss[binding.arg];
      tipNode.innerHTML = updateContent(binding.value);
      body.appendChild(tipNode);

      // 计算 tips 位置
      calTip(el, tipNode);
      // 绑定鼠标滑过事件
      bindEvent(el, tipNode);
    },
    update: function (el, binding) {
      let tipId = el.getAttribute('tipId');
      let tipNode = document.querySelector('[tipId=' + tipId + '][role=tooltip]');
      // 更新之后重新构造提示内容
      tipNode.innerHTML = updateContent(binding.value);
    },
    unbind: function (el) {
      // 指令对象销毁时清除document中残留的dom结构
      let tipId = el.getAttribute('tipId');
      let tipNode = document.querySelector('[tipId=' + tipId + '][role=tooltip]');
      tipNode.parentNode.removeChild(tipNode);
    }
  };
</script>
