<template>
  <Layout style="background: none;">
    <LayoutHeader :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" :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
  },
  data() {
    return {
      size: 0
    };
  },
  computed: {
    headerText() {
      return this.size ? `${this.size}条评论` : '';
    }
  },
  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>