<template>
  <Article
    ref="article"
    type="article"
    :thumbs="articleThumbList"
    :on-fetch="onFetch"
    :pos-id="sceneId"
    :user-uid="userUid"
  >
  </Article>
</template>

<script>
import {get} from 'lodash';
import Article from './components/article/article';
import YAS from 'utils/yas-constants';
import {createNamespacedHelpers} from 'vuex';
const {mapState, mapActions} = createNamespacedHelpers('article');

export default {
  name: 'ArticlePage',
  data() {
    return {
      page: 1,
      id: 0,
      sceneId: YAS.scene.list,
      userUid: -1
    };
  },
  activated() {
    if (+this.$route.params.id !== this.id) {
      this.id = +this.$route.params.id;
      this.init();
    }
  },
  computed: {
    ...mapState(['articleThumbList', 'articleStates']),
  },
  methods: {
    ...mapActions(['fetchArticleList']),
    init() {
      this.page = 1;
      this.$refs.article.init();

      if (this.$route.query.commentId) {
        setTimeout(() => {
          let articleState = this.articleStates[this.id] || {};

          this.$refs.article.onShowComment({
            articleId: this.id,
            index: 0,
            commentCount: articleState.commentCount,
            commentId: +this.$route.query.commentId
          });
        }, 400);
      }

      this.$sdk.getUser().then(user => {
        if (user && user.uid) {
          this.userUid = +user.uid;
        }
      });
    },
    async onFetch() {
      const articleId = parseInt(this.id, 10);

      if (!articleId || this.page > 1) {
        return;
      }

      const result = await this.fetchArticleList({
        articleId,
        page: this.page,
        limit: 1
      });

      if (result.code === 200) {
        if (get(result, 'data.detailList', []).length) {
          this.page++;
          return Promise.resolve(result.data.detailList);
        }
        return Promise.resolve(false);
      } else {
        this.$createToast && this.$createToast({
          txt: result.message || '服务器开小差了',
          type: 'warn',
          time: 1000
        }).show();
      }
    }
  },
  components: {
    Article
  }
};
</script>

<style lang="scss" scoped>
.article-page {
  background-color: #f0f0f0;
}
</style>