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

    <ArticleBody ref="body" class="body"></ArticleBody>

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

    <CommentActionSheet ref="actionSheet"></CommentActionSheet>
  </div>
</template>

<script>

import ArticleBar from './article-bar';
import ArticleFooter from './article-footer';
import ArticleBody from './article-body';
import CommentActionSheet from './comment-action-sheet';
import { createNamespacedHelpers } from 'vuex';

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

export default {
  name: 'ArticleDetail',
  components: {
    ArticleBar,
    ArticleBody,
    ArticleFooter,
    CommentActionSheet
  },
  data() {
    return {
      articleId: 0,
      grassId: 0
    };
  },
  mounted() {
  },
  methods: {
    onCommentClick() {
      this.$refs.actionSheet.destId = this.grassId;
      this.$refs.actionSheet.click();
    },
    ...mapActions(['getDetail']),
    fetch(params) {
      this.articleId = params.articleId;
      this.grassId = params.grassId;

      return this.getDetail({
        article_id: params.articleId,
        grass_id: params.grassId
      }).then(() => {
        this.$nextTick(() => {
          this.$refs.body.forceUpdate();
        });
      });
    },
    onClose() {
      this.$emit('on-close');
    }
  },
  computed: {
    ...mapState(['articleDetail'])
  }
};
</script>

<style lang="scss" scoped>

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

  .header {
    // pass
  }

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

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