<template>
  <div class="comment-list">
    <Scroll :options="scrollOption" @pulling-up="onPullingUp">
      <CommentItem
        v-for="(comment, index) in commentList"
        :key="index"
        :parent-comment="comment.parentComment"
        :children-comments="comment.childrenComments"
        :column-type="columnType">
      </CommentItem>
    </Scroll>
  </div>
</template>

<script>
import CommentItem from './comment-item.vue';
import {Scroll} from 'cube-ui';
import {createNamespacedHelpers} from 'vuex';
import {get} from 'lodash';
const {mapActions} = createNamespacedHelpers('comment');

export default {
  name: 'CommentList',
  props: {
    destId: Number,
    columnType: {
      type: Number,
      default: 1001
    }
  },
  data() {
    return {
      page: 1,
      commentList: [],
      scrollOption: {
        pullUpLoad: true
      }
    };
  },
  mounted() {
    this.fetchComments();
  },
  methods: {
    ...mapActions(['fetchCommentList']),
    async fetchComments() {
      const result = await this.fetchCommentList({
        destId: this.destId,
        columnType: this.columnType,
        page: this.page
      });

      if (result.code === 200) {
        this.commentList = this.commentList.concat(get(result, 'data.commentInfos', []));
      } else {
        this.$createToast && this.$createToast({
          txt: result.message || '服务器开小差了',
          type: 'warn',
          time: 1000
        }).show();
      }
    },
    onPullingUp() {
      this.page++;
      this.fetchComments();
    }
  },
  components: {Scroll, CommentItem}
};
</script>

<style scoped lang="scss">
.comment-list {
  width: 100%;
  padding: 40px 30px;
}
</style>