<template>
  <div class="rb-collapse" :style="boxStyle">
    <div class="rb-collapse-content" :class="{ 'rb-collapse-content-active': isActive }" ref="rb_content">
      <div
        v-if="isMoreLine"
        class="rb-collapse-more"
        :class="{ 'rb-collapse-more-active': isActive }"
        @click="handleMore"
      ></div>
      <div class="rb-collapse-text" v-html="contentText"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'RBCollapse',
    props: {
      contentText: {
        type: String,
        default: ''
      },
      contentColor: {
        type: String,
        default: ''
      },
      moreColor: {
        type: String,
        default: ''
      },
      fontSize: {
        type: String,
        default: ''
      },
      line: {
        type: Number,
        default: 2
      }
    },
    data() {
      return {
        isMoreLine: false,
        isActive: false,
        boxStyle: {}
      }
    },
    mounted() {
      const height = this.$refs['rb_content'].scrollHeight || 0
      const lineHeight = Math.round(parseFloat(window.getComputedStyle(this.$refs['rb_content']).lineHeight))
      this.isMoreLine = height / lineHeight > this.line

      if (this.contentColor) {
        this.boxStyle['--contentColor'] = this.contentColor
      }
      if (this.moreColor) {
        this.boxStyle['--contentColor'] = this.moreColor
      }
      if (this.fontSize) {
        this.boxStyle['--fontSize'] = this.fontSize
      }
      if (this.line) {
        this.boxStyle['--line'] = this.line
      }
    },
    methods: {
      handleMore() {
        this.isActive = !this.isActive
        this.$emit('more', this.isActive)
      }
    }
  }
</script>

<style lang="less" scoped>
  .rb-collapse {
    --contentColor: #333;
    --moreColor: #409eff;
    --fontSize: 14px;
    --line: 2;
    display: flex;
    &-content {
      position: relative;
      font-size: var(--fontSize);
      color: var(--contentColor);
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.5;
      max-height: calc(1.5em * var(--line));
      transition: 0.3s max-height;
      &::before {
        content: '';
        height: 100%;
        margin-bottom: -0.5em;
        float: right;
      }
    }
    &-more {
      position: relative;
      float: right;
      line-height: 1.5;
      clear: both;
      font-size: var(--fontSize);
      margin-left: 1em;
      color: var(--moreColor);
      cursor: pointer;
      perspective: 1000;
      transform: translateY(-1em);
      &::after {
        content: '展开';
        display: block;
      }
    }
    &-content-active {
      max-height: none;
      &::after {
        visibility: hidden;
      }
    }
    &-more-active {
      &::before {
        visibility: hidden;
      }
      &::after {
        content: '收起';
      }
    }
    &-text {
      font-size: var(--fontSize);
      color: var(--contentColor);
    }
  }
</style>