<template>
  <div class="article-item-intro">
    <div class="intro hover-opacity" :class="{'intro-expand': isExpand}" @click="onExpand">
      {{intro}}<span class="expand" v-if="!isExpand">…展开</span>
      <span class="expand collapse" v-else>收起</span>
    </div>
    <div class="widgets">
      <div class="topic">
        <WidgetTopic topic="种草"></WidgetTopic>
      </div>
      <div class="opts">
        <WidgetLike num="91"></WidgetLike>
        <WidgetFav num="99"></WidgetFav>
        <WidgetShare num="1"></WidgetShare>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ArticleItemIntro',
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      isExpand: false
    };
  },
  computed: {
    intro() {
      if (this.isExpand) {
        return this.data.intro;
      }
      if (this.data.intro.length > 66) {
        return this.data.intro.substring(0, 66);
      }
    }
  },
  methods: {
    onExpand() {
      this.isExpand = !this.isExpand;
    }
  }
};
</script>

<style lang="scss" scoped>
.article-item-intro {
  width: 100%;
  padding: 0 30px;

  .intro {
    font-size: 28px;
    color: #4a4a4a;
    letter-spacing: 0.06PX;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    position: relative;
    line-height: 40px;

    &.intro-expand {
      padding-bottom: 40px;
      overflow: initial;
      display: block;
    }
  }

  .expand {
    font-size: 28px;
    color: #000;
    letter-spacing: 0.06PX;
    line-height: 20px;
    font-weight: bold;

    &.collapse {
      position: absolute;
      right: 14px;
      bottom: 0;
      height: 28px;
    }
  }
}

.widgets {
  width: 100%;
  display: flex;
  margin-top: 40px;

  .topic {
    text-align: left;
    width: 200px;
  }

  .opts {
    text-align: right;
    flex: 1;

    & /deep/ .icon-btn {
      margin-left: 48px;
      text-align: right;
    }
  }
}
</style>