<template>
  <div class="article">
    <ArticleBar class="header" @on-close="onClose"></ArticleBar>

    <div class="body" v-if="fetchStatus">
      <Loading class="loading"></Loading>
    </div>
    <ArticleBody v-else ref="body" class="body"></ArticleBody>

    <ArticleFooter class="footer"
       v-if="articleDetail"
       v-bind="articleDetail.footer"
       @on-comment-click="onCommentClick"
       @on-close="onClose">
    </ArticleFooter>
  </div>
</template>

<script>

import ArticleBar from './article-bar';
import ArticleFooter from './article-footer';
import ArticleBody from './article-body';
import * as sleep from '../../../../utils/sleep';
import { createNamespacedHelpers } from 'vuex';
import { Loading } from 'cube-ui';

const { mapActions, mapState, mapMutations } = createNamespacedHelpers('article');

export default {
  name: 'ArticleDetail',
  components: {
    ArticleBar,
    ArticleBody,
    ArticleFooter,
    Loading
  },
  data() {
    return {
      articleId: 0,
      grassId: 0
    };
  },
  mounted() {
  },
  methods: {
    onCommentClick() {
      this.$router.push({
        name: 'article.comment',
        params: {
          articleId: this.grassId
        }
      });
    },
    ...mapActions(['getDetail']),
    ...mapMutations({
      fetchArticleDetail: 'FETCH_GUANG_SUCCESS'
    }),
    fetch(params) {
      this.articleId = params.articleId;
      this.grassId = params.grassId;

      return this.getDetail({
        article_id: params.articleId,
        grass_id: params.grassId
      });
    },
    onClose() {
      this.reset();
      this.$emit('on-close');
    },
    async reset() {
      await sleep.sleep(200);
      this.fetchArticleDetail({});
    }
  },
  computed: {
    ...mapState({
      articleDetail: 'articleDetail',
      fetchStatus: 'fetchArticleDetail'
    })
  }
};
</script>

<style lang="scss" scoped>

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.article {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .header {
    // pass
  }

  .body {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background-color: white;
  }

  .footer {
    // pass
  }
}
</style>