<template>
  <div class="th-hover-popup" @mouseenter="showPopup" @mouseleave="hidePopup" @click.stop.prevent="preventDefault">
    <Icon :type="icon || 'md-more'" size="20" :color="color||'#4E5969'" class="trigger-icon"/>
    <div :class="`float-menu ${show?'show':''}`" :style="`top: ${position.top}px;left: ${position.left}px;`">
      <div class="menu-list" :style="`width: ${width || 100}px;`">
        <slot></slot>
      </div>
      <!-- <div class="tip"></div> -->
    </div>
  </div>
</template>

<script>
export default {
  props: ['width', 'icon', 'color'],
  methods: {
    showPopup() {
      let el = this.$el.querySelector('.trigger-icon')
      let rect = el.getBoundingClientRect() // 图标的大小
      let panelWidth = this.width || 100  // 弹出面板的宽度
      this.position = {
        left: rect.x + rect.width/2 - (panelWidth - 7),
        top: rect.y + rect.height
      }
      this.show = true
    },
    hidePopup() {
      this.show = false
    },
    preventDefault() {

    }
  },
  data() {
    return {
      show: false,
      position: {
        top: 0,
        left: 0
      }
    }
  }
} 
</script>