<template>
  <div class="ellipsis-popover">
    <ElPopover
      :disabled="showPopover === 'off' || (showPopover !== 'always' && !isOverflow)"
      :popper-class="popoverName"
      placement="top-start"
      trigger="hover"
    >
      <div class="popover-content">
        <slot name="popover">
          <div v-for="(item, index) in contentArr" :key="getKey(item, index)">{{ item }}</div>
        </slot>
      </div>
      <div slot="reference">
        <div v-for="(item, index) in contentArr" :key="getKey(item, index)">
          <MultilineEllipsis
            :content="item"
            :fontSize="fontSize"
            :color="color"
            :lineCount="lineCount"
            :iconName="iconName"
            :showIconObj="{
              isShowIcon: showIconObj.isShowIcon,
              length: showIconObj.length,
            }"
            :overCountTip="{
              index: index + 1,
              length: contentArr.length,
            }"
            :isOverflow.sync="overflowArr[index]">
          </MultilineEllipsis>
        </div>
      </div>
    </ElPopover>
  </div>
</template>

<script>
import MultilineEllipsis from './MultilineEllipsis.vue'

export default {
  name: 'Ellipsis',
  components: {
    MultilineEllipsis
  },
  props: {
    fontSize: {
      type: Number,
      default: 12
    },
    color: {
      type: String,
      default: '#000000'
    },
    lineCount: {
      type: Number,
      default: 1
    },
    iconName: {
      type: String,
      default: 'el-icon-arrow-down'
    },
    overCountTip: {
      type: Object
    },
    showIconObj: {
      type: Object,
      default: () => {
        return {
          isShowIcon: false,
          length: 0
        }
      },
    },
    content: {
      type: [String, Array],
      default: ''
    },
    popoverName: String,
    showPopover: {
      type: String,
      default: 'auto' // 可选值 auto, always, off
    }
  },
  data () {
    return {
      overflowArr: []
    }
  },
  computed: {
    contentArr () {
      return typeof (this.content) === 'string' ? [this.content] : [...this.content]
    },
    isOverflow () {
      return this.overflowArr.includes(true)
    }
  },
  watch: {
    contentArr (val) {
      this.overflowArr.length = val.length
    }
  },
  methods: {
    getKey (item, index) {
      return btoa(escape(`${item}_${index}`))
    }
  }
}
</script>

<style lang="less">
  .ellipsis-popover {
    width: 100%;
  }

  .popover-content {
    padding: 18px 20px;
  }
</style>
