<template>
  <Layout class="article-detail">
    <RecycleScrollReveal :size="5" ref="scroll" @scroll="onScroll" :offset="800" :on-fetch="onFetch" :manual-init="true">
      <template v-slot:eternalTop>
        <ArticleDeatilNote :data="article" :scroll-top="scrollTop" :list-title="listTitle"></ArticleDeatilNote>
       <!--  <ArticleDeatilLong ref="detailLong" :data="article" :scroll-top="scrollTop" :list-title="listTitle"></ArticleDeatilLong> -->
      </template>
      <template class="article-item" #item="{ data }">
        <ArticleItem2
          type="topic"
          :index="data.index"
          :data="data.data"
          :width="colWidthForTwo"
          :share="share"
          :article-id="data.data.articleId"
          :pos-id="posId">
          <template v-if="data.data.dataType == 2">
            <ArticleResource :data="data.data"></ArticleResource>
          </template>
        </ArticleItem2>
      </template>
    </RecycleScrollReveal>
  </Layout>
</template>

<script>
import {get} from 'lodash';

import ArticleDeatilLong from './components/detail/article-long';
import ArticleDeatilNote from './components/detail/article-note';
import ArticleItem2 from './components/article/article-item2';
import {createNamespacedHelpers} from 'vuex';
const {mapState, mapActions} = createNamespacedHelpers('article');

export default {
  name: 'ArticleDetailPage',
  data() {
    return {
      id: 0,
      scrollTop: 0,
      scrolling: false,
      article: {},
      share: false,
      listTitle: '推荐阅读',
      colWidthForTwo: 370,
      posId: 0
    };
  },
  activated() {
    if (+this.$route.params.id !== this.id) {
      this.id = +this.$route.params.id;
      this.init();
    }
  },
  mounted() {
    this.colWidthForTwo = Math.floor(this.$el.offsetWidth / 2);
  },
  computed: {
  },
  methods: {
    ...mapActions(['fetchArticleList']),
    init() {
      this.syncServiceArticleDetail();
    },
    onScroll({scrollTop}) {
      this.scrollTop = scrollTop;

      this.scrolling = true;
      this._scTimer && clearTimeout(this._scTimer);
      this._scTimer = setTimeout(() => {
        this.scrolling = false;
      }, 400);
    },
    syncServiceArticleDetail() {
      const articleId = parseInt(this.id, 10);

      this.fetchArticleList({
        articleId,
        page: 1,
        limit: 1,
        columnType: 1002
      }).then(res => {
        this.article = get(res, 'data.detailList[0]', {});
      });
    },
    onFetch() {
      return Promise.resolve([this.article]);
    }
  },
  components: {
    ArticleDeatilLong,
    ArticleDeatilNote,
    ArticleItem2
  }
};
</script>

<style lang="scss" scoped>
/deep/ .scroll-reveal-list {
  padding: 6px;
  background-color: #f0f0f0;
}
</style>