<template>
  <div class="article-detail-notes">
    <ArticleDetailHeader ref="header" :step="100" :title-step="100">
      <div class="title-main">
        <div class="title-info" :style="`transform: translate3d(0, ${titleTranslateY}, 0)`">
          <ArticleItemHeader class="title-info-author" :share="share" :data="authorData" :lazy="lazy" :more="showMoreOpt" @on-follow="onFollow"></ArticleItemHeader>
          <div class="title-info-rec">{{listTitle}}</div>
        </div>
      </div>
    </ArticleDetailHeader>

    <LayoutHeader style="visibility: hidden;"></LayoutHeader>
    <div class="article-context">
      <ArticleItemSlide :thumb="thumb" :share="share" :data="slideData" :slide-index="slideIndex" :lazy="lazy" @on-praise="onPraise" @change="onChangeSlide"></ArticleItemSlide>
      <ProductGroup :article-id="data.articleId" :pos-id="0" :index="0" :thumb="thumb" v-if="productListData.length" :share="share" :data="productListData" :lazy="lazy"></ProductGroup>
      <ArticleItemTopics class="topics-wrap" :data="topicsData" :share="share"></ArticleItemTopics>
      <p class="publish-time">{{publishTime}}</p>
    </div>

    <ArticleDetailCommentList :dest-id="140838" :article-id="data.articleId" :comment-count="data.commentCount"></ArticleDetailCommentList>
    <LayoutTitle class="rec-article-title">{{listTitle}}</LayoutTitle>
  </div>
</template>

<script>
import {get} from 'lodash';
import ArticleDetailHeader from './article-header';
import ArticleDetailCommentList from './comment-list';
import ArticleItemHeader from '../article/article-item-header';
import ArticleItemSlide from '../article/article-item-slide';
import ArticleItemTopics from '../article/article-item-topics';
import dayjs from 'utils/day';

export default {
  name: 'ArticleDetailNote',
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    },
    listTitle: String,
    scrollTop: Number,
    share: Boolean,
    thumb: Boolean
  },
  data() {
    return {
      showMoreOpt: false,
      slideIndex: 1,
      commentColumnType: 1001,
      commentList: [],
      commentPage: 1,
      commentFetching: false,
      showCommentMore: false
    }
  },
  computed: {
    titleTranslateY() {
      let scrollTop = this.scrollTop;

      if (this.$refs && this.$refs.header) {
        scrollTop += this.$refs.header.$el.offsetHeight;
        return scrollTop > this.$el.offsetHeight ? '-50%' : 0;
      } else {
        return 0;
      }
    },
    authorData() {
      return {
        authorName: this.data.authorName,
        authorUid: this.data.authorUid,
        authorType: this.data.authorType,
        authorHeadIco: this.data.authorHeadIco,
        hasAttention: this.data.hasAttention,
        isAuthor: this.data.isAuthor
      };
    },
    slideData() {
      return {
        blockList: get(this.data, 'blockList', []).filter(block => block.templateKey === 'image'),
        articleId: this.data.articleId,
      };
    },
    productListData() {
      return this.data.productList || [];
    },
    topicsData() {
      return {
        topicList: this.data.topicList,
        articleType: this.data.articleType
      };
    },
    publishTime() {
      return dayjs(this.data.publishTime).fromNow();
    },
    lazy() {
      return this.data.lazy;
    }
  },
  methods: {
    onFollow() {
    },
    onPraise() {

    },
    onChangeSlide({index}) {
      this.slideIndex = index;
    },
    onReply() {

    }
  },
  components: {
    ArticleDetailHeader,
    ArticleItemHeader,
    ArticleItemSlide,
    ArticleItemTopics,
    ArticleDetailCommentList
  }
};
</script>

<style lang="scss" scoped>
.title-main {
  height: 100%;
  color: #444;
  overflow: hidden;

  .title-info {
    height: 200%;
    transition: all 300ms;

    > * {
      height: 50%;
      background: none;
    }

    .title-info-rec {
      font-size: 32px;
      line-height: 1.2;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  /deep/ .avatar {
    padding-left: 0;
  }

  /deep/ .opts {
    padding-right: 10px;
  }
}

.publish-time {
  display: block;
  font-size: 24px;
  color: #b0b0b0;
  padding: 20px 30px;
}

.rec-article-title {
  margin: 14px 0 4px;
  border-top: 1px solid #f0f0f0;
}
</style>