import _typeof from 'babel-runtime/helpers/typeof';
import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
import _extends from 'babel-runtime/helpers/extends';
/**
 * @文件说明: Interactions.MouseTooltip - 光标跟随气泡提示框
 * @创建人: pjtools@vip.qq.com
 * @创建时间: 2020-05-18 14:13:35
 */

import baseProps from '../baseProps';
import baseMixin from '../baseMixin';
import { getComponentFromProp } from '../../../_util/antdv';
import { isFunction, isBooleanTrue } from '../../../_util/methods-util';
import { Icon } from 'ant-design-vue';

var MouseTooltip = {
  name: 'PjMap.Interactions.MouseTooltip',
  inheritAttrs: false,
  mixins: [baseMixin],
  props: baseProps(),
  data: function data() {
    return {
      // 组件是否可见
      visible: false,
      // 组件容器Class类名
      wrapClassName: null,
      // 提示框的偏移量
      position: null,
      // 提示框的显隐状态
      show: false,
      // 提示图标
      icon: null,
      // 提示内容
      content: null
    };
  },

  computed: {
    // 是否渲染组件
    isRenderComponent: function isRenderComponent() {
      return !!(this.visible && (this.icon || this.content));
    },

    // 是否为纯图标模式
    isPureIconMode: function isPureIconMode() {
      return !!(this.icon && !this.content);
    },

    // 组件的样式
    cptStyles: function cptStyles() {
      var styles = this.styles,
          position = this.position,
          show = this.show;

      var componentStyle = {};
      styles && _extends(componentStyle, styles);
      position && _extends(componentStyle, position);
      !show && (componentStyle.display = 'none');
      return componentStyle;
    },

    // 组件Class类名
    classNames: function classNames() {
      var classes = this.classes,
          prefixCls = this.mapProvider.prefixCls,
          isPureIconMode = this.isPureIconMode;

      var cls = [].concat(_toConsumableArray(classes), [prefixCls + '-interactions-mousetooltip', {
        'pure-icon': isPureIconMode
      }]);
      this.wrapClassName && cls.push(this.wrapClassName);
      return cls;
    }
  },
  methods: {
    // 渲染默认的提示框文本
    renderTooltipContent: function renderTooltipContent(h) {
      var content = getComponentFromProp(this, 'content', {}, false);
      if (isFunction(content)) {
        return h(
          'span',
          { 'class': 'content' },
          [content(h)]
        );
      } else if ((typeof content === 'undefined' ? 'undefined' : _typeof(content)) === 'object' && content instanceof HTMLElement) {
        return h('span', { 'class': 'content', domProps: {
            'innerHTML': content.outerHTML
          }
        });
      } else {
        return this.renderSlotScopeNodes(content, this.$data) || h(
          'span',
          { 'class': 'content' },
          [content]
        );
      }
    },


    // 渲染默认的提示框图标
    renderTooltipIcon: function renderTooltipIcon(h) {
      var icon = getComponentFromProp(this, 'icon', {}, false);
      // 判断是否为Function函数类型
      if (isFunction(icon)) {
        return h(
          'span',
          { 'class': 'icon' },
          [icon(h)]
        );
      } else if ((typeof icon === 'undefined' ? 'undefined' : _typeof(icon)) === 'object' && icon instanceof HTMLElement) {
        return h('span', { 'class': 'icon', domProps: {
            'innerHTML': icon.outerHTML
          }
        });
      } else {
        // 判断是否有具名插槽
        var slotNodes = this.renderSlotScopeNodes(icon, this.$data);
        if (slotNodes) {
          return slotNodes;
        } else {
          var theme = 'outlined';
          var iconName = icon;
          if (icon.indexOf(':') !== -1) {
            var iconSplit = icon.split(':');
            theme = iconSplit[1];
            iconName = iconSplit[0];
          }
          return h(Icon, { 'class': 'icon', attrs: { type: iconName, theme: theme }
          });
        }
      }
    },


    // 激活光标跟随气泡提示框
    enable: function enable() {
      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

      this.icon = options.icon || null;
      this.content = options.content || null;
      this.wrapClassName = options.className || null;
      this.position = options.position || this.position || null;
      this.show = true;
      this.visible = true;
    },


    // 禁用光标跟随气泡提示框
    disable: function disable() {
      this.wrapClassName = null;
      this.position = null;
      this.show = false;
      this.icon = null;
      this.content = null;
      this.visible = false;
    },


    // 更新光标提示框的偏移量
    updateMousePostion: function updateMousePostion(position) {
      this.position = position;
    },


    // 更新关闭提示框的Icon图标
    updateMouseIcon: function updateMouseIcon(icon) {
      this.icon = icon;
    },


    // 更新关闭提示框的内容
    updateMouseContent: function updateMouseContent(content) {
      this.content = content;
    },


    // 更新光标提示框的显隐状态
    updateVisible: function updateVisible() {
      var show = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

      this.show = isBooleanTrue(show);
    }
  },
  render: function render(h) {
    var id = this.id,
        cptStyles = this.cptStyles,
        classNames = this.classNames,
        isRenderComponent = this.isRenderComponent,
        icon = this.icon,
        content = this.content;

    return isRenderComponent ? h(
      'div',
      {
        attrs: { 'data-id': id },
        'class': classNames, style: cptStyles },
      [icon ? this.renderTooltipIcon(h) : null, content ? this.renderTooltipContent(h) : null]
    ) : null;
  }
};

export default MouseTooltip;