<template>
  <div class="x-ellipsis">
    <el-tooltip
      v-if="mode === 'origin'"
      v-model="ellipsis"
      :placement="contentLocal"
      :popper-class="wrapperClass + ' x-ellipsis-tooltip ' + tipClass"
      :manual="true"
      :tabindex="-1"
      @mouseenter.native="showTooltip"
      @mouseleave.native="debounceHideTooltip"
    >
      <div slot="content" class="x-tip-content" :style="contentStyle">
        {{ label }}
      </div>
      <div :ref="'textOverflow'" class="tip-overflow" tabindex="-1">
        {{ label }}
      </div>
    </el-tooltip>
    <el-tooltip
      v-else
      :placement="contentLocal"
      :popper-class="wrapperClass + 'x-ellipsis-tooltip'"
      :disabled="!labelClamped"
      :tabindex="-1"
    >
      <div slot="content" class="x-tip-content" :style="contentStyle">
        {{ label }}
      </div>
      <div>
        <v-clamp
          ref="clamp"
          v-bind="$attrs"
          :max-lines="maxLines"
          :line-height="1"
          :autoresize="autoresize"
          tabindex="-1"
          @clampchange="clampChange"
        >
          {{ label }}
        </v-clamp>
      </div>
    </el-tooltip>
  </div>
</template>
<script>
import VClamp from 'vue-clamp'
import ElToolTip from 'xx-element-ui/lib/tooltip'

export default {
  name: 'XEllipsis',
  components: {
    VClamp,
    ElToolTip
  },
  props: {
    mode: {
      type: String,
      default: 'clamp'
    },
    maxLines: {
      type: Number,
      default: 1
    },
    label: {
      type: String,
      default: ''
    },
    autoresize: {
      type: Boolean,
      default: true
    },
    wrapperClass: {
      type: String,
      default: ''
    },
    maxWidth: {
      type: String,
      default: ''
    },
    contentLocal: {
      type: String,
      default: 'top'
    }
  },
  data() {
    return {
      labelClamped: false,
      ellipsis: false,
      tipClass: '',
      keepState: false,
      hideTooltipFun: this.$lodash.debounce(
        () => {
          if (this.keepState) {
          } else {
            this.ellipsis = false
          }
        },
        200,
        { maxWait: 400 }
      )
    }
  },
  computed: {
    contentStyle() {
      return {
        width: this.maxWidth
      }
    }
  },
  watch: {
    label: {
      handler: function(val, oldval) {
        this.$nextTick(() => {
          this.$refs.clamp && this.$refs.clamp.cleanUp()
        })
      }
    }
  },
  mounted() {},
  methods: {
    showTooltip() {
      const textDiv = this.$refs.textOverflow
      this.tipClass = 'tip_overflow_popper' + this._uid
      this.$nextTick(() => {
        const popper = document.getElementsByClassName(this.tipClass)[0]
        if (popper) {
          popper.onmouseenter = () => {
            // this.showTooltip()
            this.keepState = true
          }
          popper.onmouseleave = () => {
            this.keepState = false
            this.debounceHideTooltip()
          }
        }
      })
      const tolerance = 2
      if (textDiv && textDiv.scrollWidth > textDiv.clientWidth + tolerance) {
        this.ellipsis = true
      } else {
        this.ellipsis = false
      }
    },
    debounceHideTooltip() {
      this.hideTooltipFun()
    },
    clampChange(clamped) {
      this.labelClamped = clamped
    }
  }
}
</script>
