<template>
  <Layout style="background: none;">
    <!-- <LayoutHeader class="comment-header" :back="!popup" theme="white" slot='header'>
      {{headerText}}
    </LayoutHeader> -->
    <CommentHeader>{{headerText}}</CommentHeader>
    <CommentList ref="commentList"
                 :dest-id="destId"
                 :pos-id="posId"
                 :article-id="articleId"
                 :comment-id="commentId"
                 :column-type="1001"
                 @on-page-change="onPageChange"
                 @on-comment="onComment"
                 @on-page-ready="onPageReady"
                 @on-close="onClose"
                 :authorUid="authorUid"
                 :authorName="authorName">
    </CommentList>

<!--    <div class="footer-comment">-->
<!--          <CommentPlaceholder-->
<!--            ref="commentInput"-->
<!--            :share="share"-->
<!--            class="comment-input hover-opacity"-->
<!--            :dest-id="articleInfo.articleId"-->
<!--            :add-type="0"-->
<!--            :article-id="articleInfo.articleId"-->
<!--            :pos-id="posId"-->
<!--            :column-type="1001"-->
<!--            :autoUpdate="false"-->
<!--            :user="articleInfo.authorName"-->
<!--            @on-comment="onCommentInput">-->
<!--            添加评论...-->
<!--          </CommentPlaceholder>-->
<!--    </div>-->
  </Layout>
</template>

<script>
import CommentList from './comment-list';
import CommentHeader from './comment-header';

export default {
  name: 'Comment',
  props: {
    destId: Number,
    popup: {
      type: Boolean,
      default: false
    },
    posId: Number,
    articleId: Number,
    commentId: Number,
    commentCount: Number,
    authorUid: Number,
    authorName: String
  },
  data() {
    return {
      size: 0
    };
  },
  computed: {
    headerText() {
      return this.commentCount ? `${this.commentCount}条评论` : '评论';
    }
  },
  methods: {
    onPageChange({ size }) {
      this.size = size;
    },
    onPageReady(params) {
      this.$emit('on-page-ready', params);
    },
    onClose() {
      this.$emit('on-close');
    },
    init() {
      this.size = 0;
      this.$refs.commentList.init();
    },
    onComment(params) {
      this.$emit('on-comment', params);
    }
  },
  components: {
    CommentList,
    CommentHeader
  }
};
</script>


<style scoped lang="scss">

</style>