import tooltip from 'element-ui/lib/tooltip';
import {
  isArray, isFunction, join, toString, map,
} from 'lodash-es';
import { debounce, isBlank, isPromiseLike } from '../utils';

const _utils = {
  activateTooltip: debounce($tooltip => $tooltip.handleShowPopper(), 50),
  getContent(modifiers, arg, value) {
    // 基础数据时,arg为基础数据类型,value为key
    if (modifiers.basicData) {
      if (isArray(value)) {
        value = join(value);
      }
      return global.$gBasicData.getDataSimplified(arg, value).then(result => map(result, 'value'));
    }

    // value为function时
    if (isFunction(value)) {
      return value();
    }

    return value;
  },
  formatContent(content, h) {
    if (isArray(content)) {
      return h('div', { class: 'g-tip-con' }, map(content, c => h('div', {
        class: 'g-tip-item',
        domProps: {
          innerHTML: c,
        },
      })));
    }
    return toString(content);
  },
};

function install(Vue) {
  Vue.directive('gtip', {
    bind(el, {
      name, value, oldValue, expression, arg, modifiers,
    }) {
      const Tooltip = Vue.extend(tooltip);
      const tp = new Tooltip({
        propsData: {
          effect: 'light',
          placement: 'top',
          popperClass: 'g-tip',
        },
      }).$mount();
      global.document.body.appendChild(tp.$el);
      tp.referenceElm = el;
      el._gtip = tp;

      const mouseEnterHandle = () => {
        const content = _utils.getContent(modifiers, arg, value);

        if (isBlank(content) || (isArray(content) && content.length === 0)) {
          return;
        }

        if (isPromiseLike(content)) {
          tp.content = tp.$createElement('i', { class: 'el-icon-loading' });
          content.then((result) => {
            tp.content = _utils.formatContent(result, tp.$createElement);
          });
        } else {
          tp.content = _utils.formatContent(content, tp.$createElement);
        }
        // console.log(content);
        if (tp.$refs.popper) {
          tp.$refs.popper.style.display = 'none';
        }
        tp.doDestroy();
        tp.setExpectedState(true);
        _utils.activateTooltip(tp);
      };
      // 添加新的监听
      el.addEventListener('mouseenter', mouseEnterHandle);
      el._lastMouseEnterHandle = mouseEnterHandle;

      el.addEventListener('mouseleave', () => {
        // tp.setExpectedState(false);
        // tp.handleClosePopper();
        tp.hide();
      });

      // 无法添加focus，暂时以click处理
      el.addEventListener('click', () => {
        // tp.setExpectedState(false);
        // tp.handleClosePopper();
        tp.hide();
      });

      // console.log('gtip,bind', el);
    },
    // update(el, {
    //   name, value, oldValue, expression, arg, modifiers,
    // }) {
    //   const tp = el._gtip;
    //   // 注销上次监听
    //   if (el._lastMouseEnterHandle) {
    //     el.removeEventListener('mouseenter', el._lastMouseEnterHandle);
    //   }
    //
    //   const mouseEnterHandle = () => {
    //     const content = _utils.getContent(modifiers, arg, value);
    //
    //     if (isPromiseLike(content)) {
    //       tp.content = tp.$createElement('i', { class: 'el-icon-loading' });
    //       content.then((result) => {
    //         tp.content = _utils.formatContent(result, tp.$createElement);
    //       });
    //     } else {
    //       tp.content = _utils.formatContent(content, tp.$createElement);
    //     }
    //
    //     // if (tp.$refs.popper) {
    //     //   tp.$refs.popper.style.display = 'none';
    //     // }
    //     // tp.doDestroy();
    //     // tp.setExpectedState(true);
    //     // _utils.activateTooltip(tp);
    //     tp.show();
    //   };
    //   // 添加新的监听
    //   el.addEventListener('mouseenter', mouseEnterHandle);
    //   el._lastMouseEnterHandle = mouseEnterHandle;
    //
    //   console.log('gtip,update', el);
    // },
    unbind(el) {
      const $tp = el._gtip;
      if ($tp) {
        if (isFunction($tp.$destroy)) {
          $tp.$destroy();
        }

        if ($tp.referenceElm) {
          $tp.referenceElm = null;
        }

        el._gtip = null;
      }
    },
  });
}

export default {
  install,
};