<template>
  <div class="article-item">
    <ArticleItemHeader :data="headerData" :lazy="lazy" @on-follow="onFollow"></ArticleItemHeader>
    <ArticleItemSlide :data="slideData" :lazy="lazy"></ArticleItemSlide>
    <ProductGroup v-if="productListData.length" :data="productListData" :lazy="lazy"></ProductGroup>
    <ArticleItemIntro :data="introData" @on-resize="onResize" @on-resizeing="onResizeing" @on-expand="onExpand" @on-comment="onComment"></ArticleItemIntro>
    <ArticleItemComment :data="commentData" @on-comment="onComment"></ArticleItemComment>
    <div class="line"></div>
  </div>
</template>

<script>
import {get, first} from 'lodash';
import ArticleItemHeader from './article-item-header';
import ArticleItemSlide from './article-item-slide';
import ArticleItemIntro from './article-item-intro';
import ArticleItemComment from './article-item-comment';
import dayjs from 'dayjs';

export default {
  name: 'ArticleItem',
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    headerData() {
      return {
        authorName: this.data.authorName,
        authorUid: this.data.authorUid,
        authorType: this.data.authorType,
        authorHeadIco: this.data.authorHeadIco,
        hasAttention: this.data.hasAttention,
      };
    },
    slideData() {
      return {
        blockList: get(this.data, 'blockList', []).filter(block => block.templateKey === 'image'),
      };
    },
    introData() {
      return {
        intro: get(get(this.data, 'blockList', []).filter(block => block.templateKey === 'text'), '[0].contentData', ''),
        articleType: this.data.articleType,
        labelList: this.data.labelList,
        hasFavor: this.data.hasFavor,
        hasPraise: this.data.hasPraise,
        commentCount: this.data.commentCount,
        praiseCount: this.data.praiseCount,
        favoriteCount: this.data.favoriteCount,
        articleId: this.data.articleId,
        imageUrl: get(first(this.slideData.blockList), 'contentData', '').replace('{mode}', 2).replace('{width}', 200).replace('{height}', 200)
      };
    },
    commentData() {
      return {
        comments: this.data.comments,
        commentCount: this.data.commentCount,
        publishTime: this.data.publishTime,
        date: dayjs(this.data.publishTime).fromNow(),
        articleId: this.data.articleId,
      };
    },
    productListData() {
      return this.data.productList || [];
    },
    lazy() {
      return this.data.index > 1;
    }
  },
  methods: {
    onResize() {
      this.$emit('on-resize');
    },
    onResizeing() {
      this.$emit('on-resizeing');
    },
    onFollow(follow) {
      this.$emit('on-follow', follow);
    },
    onExpand() {
      this.$emit('on-expand', {articleId: this.data.relateId, grassId: this.data.articleId});
    },
    onComment() {
      this.$emit('on-comment', this.data);
    }
  },
  components: {ArticleItemHeader, ArticleItemSlide, ArticleItemIntro, ArticleItemComment}
};
</script>

<style lang="scss" scoped>
.article-item {
  width: 100%;
  background-color: #fff;

  .line {
    height: 10PX;
    width: 100%;
    background-color: #f0f0f0;
  }
}
</style>