<template>
  <Article
    ref="article"
    type="article"
    :no-header="true"
    :thumbs="articleThumbList"
    share
    :on-fetch="onFetch">
  </Article>
</template>

<script>
import {get} from 'lodash';
import Share from 'plugins/share';
import Article from './components/article/article';
import ArticleItem from './components/article/article-item';
import {createNamespacedHelpers} from 'vuex';
const {mapState, mapActions} = createNamespacedHelpers('article');

export default {
  name: 'ArticleSharePage',
  data() {
    return {
      page: 1,
      id: 0,
      title: ''
    };
  },
  created() {
    this.id = +this.$route.params.id;
  },
  mounted() {
    if (!this.$yoho.isApp) {
      Share.init();
    }
  },
  activated() {
    if (+this.$route.params.id !== this.id) {
      this.id = +this.$route.params.id;
      this.init();
    }
  },
  async serverPrefetch() {
    const articleId = parseInt(this.id, 10);

    if (!articleId) {
      return;
    }
    return this.fetchArticleList({
      articleId,
      limit: 2,
      thumb: true
    });
  },
  watch: {
    title(val) {
      if (document) {
        document.title = val;
      }
    }
  },
  computed: {
    ...mapState(['articleThumbList'])
  },
  methods: {
    ...mapActions(['fetchArticleList']),
    init() {
      this.page = 1;
      this.$refs.article.init();
    },
    async onFetch() {
      const articleId = parseInt(this.id, 10);

      if (!articleId) {
        return;
      }
      const result = await this.fetchArticleList({
        articleId,
        page: this.page,
        authorUid: this.authorUid,
        authorType: this.authorType,
        type: this.type,
        columnType: 1002
      });

      if (result.code === 200) {
        if (get(result, 'data.detailList', []).length) {
          this.page++;

          if (!this.title) {
            let first = get(result, 'data.detailList[0]');

            this.title = `@${first.authorName} 在有货逛上发了一篇笔记，快点开看看！`;

            if (!this.$yoho.isApp) {
              let shareImage = '';
              let shareIntro = '';

              get(first, 'blockList', []).forEach(block => {
                if (block.templateKey === 'image') {
                  !shareImage && (shareImage = (block.contentData || '').split('?')[0]);
                } else if (block.templateKey === 'text') {
                  !shareIntro && (shareIntro = block.contentData);
                }
              });

              Share.setShareInfo({
                title: this.title,
                imgUrl: shareImage,
                desc: shareIntro
              });
            }
          }

          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,
    ArticleItem
  }
};
</script>

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