<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"
                 :authorUid="authorUid"
                 :authorName="authorName">
    </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,
    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 }
};
</script>


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