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

    <ArticleDetailFooter class="detail-fixed-footer" @on-comment-click="onComment">
      <template v-slot:before>
        <div class="footer-comment">
          <CommentPlaceholder
            ref="commentInput"
            :share="share"
            class="comment-input hover-opacity"
            :dest-id="data.articleId"
            :add-type="0"
            :article-id="data.articleId"
            :pos-id="0"
            :column-type="1001"
            @on-comment="onComment">
            添加评论...
          </CommentPlaceholder>
        </div>
      </template>
      <template v-slot:after>
        <div></div>
      </template>
    </ArticleDetailFooter>
  </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 ArticleDetailFooter from './article-footer';
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,
      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() {

    },
    onComment() {

    }
  },
  components: {
    ArticleDetailHeader,
    ArticleItemHeader,
    ArticleItemSlide,
    ArticleItemTopics,
    ArticleDetailCommentList,
    ArticleDetailFooter
  }
};
</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;
}

.detail-fixed-footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 10;

  .footer-comment {
    width: 312px;
    margin-left: 30px;
    display: flex;
    justify-content: center;
    align-items: center;

    .comment-input {
      width: 100%;
      height: 68px;
      line-height: 68px;
      font-size: 28px;
      color: #b0b0b0;
      background: #f0f0f0;
      padding: 0 20px;
      border-radius: 35px;
      box-sizing: border-box;

    }
  }
}
</style>