<template>
  <div class="more-text">
    <span>{{ showContent }}</span>
    <el-popover
      v-if="moreContent"
      placement="top"
      width="300"
      trigger="hover"
      :content="moreContent"
    >
      <el-button
        class="ml-1"
        type="text"
        icon="el-icon-more"
        slot="reference"
      ></el-button>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: "more-text",
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    showCount: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      showContent: "",
      moreContent: ""
    };
  },
  watch: {
    data(val) {
      this.initData();
    }
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.showContent = this.data.slice(0, this.showCount).join("，");
      this.moreContent = "";
      if (this.data.length > this.showCount) {
        this.moreContent = this.data.join("，");
      }
    }
  }
};
</script>
