<template>
  <el-tooltip ref="tooltip" :content="content" :manual="manual" v-model="innerVisible" :placement="placement" :disabled="disabled" :open-delay="openDelay">
    <slot slot="content" name="content">
      <div v-if="html" class="ui-tooltip__html" v-html="html"></div>
    </slot>
    <slot></slot>
  </el-tooltip>
</template>

<script>
import ElTooltip from 'element-ui/lib/tooltip'
import 'element-ui/lib/theme-chalk/tooltip.css'
export default {
  name: 'UiTooltip',
  components: {
    ElTooltip
  },
  model: {
    prop: 'visible',
    event: 'input'
  },
  props: {
    content: {
      type: String,
      default: ''
    },
    html: {
      type: String
    },
    visible: {
      type: Boolean
    },
    manual: {
      type: Boolean
    },
    openDelay: {
      type: Number
    },
    placement: {
      type: String,
      default: 'top'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    innerVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    setReferenceElm($el) {
      this.$refs.tooltip.referenceElm = $el
      clearTimeout(this._timer)
      this._timer = setTimeout(() => {
        this.$refs.tooltip.popperJS._reference = $el
        this.$refs.tooltip.updatePopper()
      }, 30)
    }
  },
  beforeDestroy() {
    clearTimeout(this._timer)
  }
}
</script>
<style lang="less">
body {
  .el-tooltip__popper{
    max-width: 800px;
    line-height: 1.7em;
  }
}
</style>
