<template>
  <Popup
    :direction="direction"
    :trigger-type="triggerType"
    :width="width"
    :popup-class="_popupClass"
    v-bind="$attrs"
  >
    <div class="hive-tooltip-content">
      <div class="hive-tooltip__message">
        {{ message }}
      </div>
      <div
        class="hive-tooltip__extra"
        v-if="hasExtra"
      >
        <!-- @slot 额外内容，比如底部链接 -->
        <slot name="extra" />
      </div>
    </div>
    <template v-slot:trigger>
      <slot />
    </template>
  </Popup>
</template>

<script>
import Popup from '../popup';
const name = 'hive-tooltip';

export default {
  name,
  components: { Popup },
  props: {
    /**
     * 暗色模式
     */
    dark: Boolean,
    /**
     * @ignore
     */
    direction: {
      type: String,
      default: 'top center'
    },
    /**
     * 提示文本
     */
    message: String,
    /**
     * @ignore
     */
    width: [Number, Function],
    /**
     * @ignore
     */
    triggerType: {
      validator: val => ['click', 'hover', 'manual'].indexOf(val) > -1,
      default: 'hover'
    }
  },
  data() {
    return {
      hasExtra: false
    };
  },
  computed: {
    _popupClass() {
      return [name, { 'hive-tooltip--dark': this.dark }];
    }
  },
  mounted() {
    this.hasExtra = !!this.$scopedSlots.extra;
  }
};
</script>
