<template>
  <div class="article">
    <ArticleBar class="header"></ArticleBar>

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

    <ArticleFooter class="footer"
       v-if="articleDetail"
       v-bind="articleDetail.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, mapState } = createNamespacedHelpers('article');

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

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

<style lang="scss" scoped>

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

  .header {
    // pass
  }

  .body {
    flex: 1;
  }

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