<template>
  <div class="article">
    <ArticleBar class="header"></ArticleBar>
    <ArticleBody class="body"></ArticleBody>
    <ArticleFooter class="footer" @on-comment-click="onCommentClick"></ArticleFooter>

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

<script>

import ArticleBar from './components2/article-bar';
import ArticleFooter from './components2/article-footer';
import ArticleBody from './components2/article-body';
import CommentActionSheet from './components/comment-action-sheet';

import { createNamespacedHelpers } from 'vuex';

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

export default {
  name: 'ArticleDetail',
  components: {
    ArticleBar,
    ArticleBody,
    ArticleFooter,
    CommentActionSheet
  },
  props: {
    articleId: {
      type: [Number, String],
      default() {
        return 87723;
      }
    }
  },
  data() {
    return {

    };
  },
  mounted() {
    this.getDetail({ article_id: this.articleId });
  },
  methods: {
    ...mapActions(['getDetail']),
    onCommentClick() {
      this.$refs.actionSheet.click();
    }
  }
};
</script>

<style lang="scss" scoped>

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

  .header {
    // pass
  }

  .body {
    flex: 1;
  }

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