<template>
  <el-popover
    v-if="moreContent"
    placement="top"
    width="300"
    trigger="hover"
    :content="moreContent"
  >
    <el-button slot="reference" v-bind="$attrs" v-on="$listeners"
      >{{ showContent }}...</el-button
    >
  </el-popover>
  <el-button v-else v-bind="$attrs" v-on="$listeners">{{
    showContent
  }}</el-button>
</template>

<script>
export default {
  name: "more-btn",
  props: {
    data: {
      type: String,
      default: null,
    },
    showCount: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      showContent: "",
      moreContent: "",
    };
  },
  watch: {
    data(val) {
      this.initData();
    },
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      if (!this.data) return;

      this.showContent = this.data.substring(0, this.showCount);
      this.moreContent = "";
      if (this.data.length > this.showCount) {
        this.moreContent = this.data;
      }
    },
  },
};
</script>
