<template>
  <Layout style="background: none;">
    <LayoutHeader class="comment-header" :back="!popup" theme="white" slot='header'>
      {{headerText}}
      <template v-slot:opts v-if="popup">
        <i class="iconfont icon-close icon" @touchend.prevent="onClose"></i>
      </template>
    </LayoutHeader>
    <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"></CommentList>
  </Layout>
</template>

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

export default {
  name: 'Comment',
  props: {
    destId: Number,
    popup: {
      type: Boolean,
      default: false
    },
    posId: Number,
    articleId: Number,
    commentId: Number,
    commentCount: Number
  },
  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}
};
</script>


<style scoped lang="scss">
.comment-header {
  padding-top: 0 !important;
}
</style>