<!-- 文件超出多少高度时候显示展开
    1 行没问题，多行有可能出现问题
 -->
<template>
  <div class="post-content mb-2">
    <div :class="{ 'is-fold': isFold() }" class="fs-34" ref="textContent">
      <slot />
    </div>
    <div
      @click="showMore()"
      ref="block"
      class="fs-34"
      style="display: none; color: blue; cursor: pointer;text-indent: 2em;"
    >
      展开
    </div>
    <div
      @click="closeMore()"
      class="fs-34"
      ref="noBlock"
      style="display: none; color: blue; cursor: pointer;text-indent: 2em;"
    >
      收起
    </div>
  </div>
</template>

<script>
export default {
  name: "over-flow",
  props: {
      lineNum:{
          type: Number,
          default:16
      }
    },
    data(){
        return {
            maxheight: 20
        }
    },
  methods: {
        //判断是否展开更多的消息
        isFold: function () {
          this.$nextTick(() => {
            let fs = parseFloat(window.getComputedStyle(this.$refs.textContent).fontSize)
            let hei = fs * this.lineNum
            this.maxheight = hei
            // console.log(fs, this.$refs.textContent.offsetHeight ,this.maxheight,parseFloat(window.getComputedStyle(this.$refs.textContent).lineHeight))
            if (this.$refs.textContent.offsetHeight > hei  ) {
              this.$refs.textContent.style.height = `${hei}px`;
              this.$refs.textContent.style.overflow = 'hidden';
              this.$refs.block.style.display = 'block';
            }else{
                this.$refs.block.style.display = "none";
                this.$refs.noBlock.style.display = "none";
            }
          })
          return false
        },
        //展开更多
        showMore: function () {
          this.$refs.block.style.display = 'none';
          this.$refs.noBlock.style.display = 'block';
          this.$refs.textContent.style.height = 'auto';
        },
        //关闭更多的显示
        closeMore: function () {
          this.$refs.noBlock.style.display = 'none';
          this.$refs.block.style.display = 'block';
          this.$refs.textContent.style.height = `${this.maxheight}px`;
        }
  }
};
</script>

<style scoped>
.fs-34{
  font-size: 32px;
  margin-top: 10px;
}
</style>