<template>
  <div class="el-comment" v-if="list.length > 0">
    <el-comment-item v-for="(comment, index) in list" :showCommentBox="showCommentBox" :key="index" :item="comment" @updateCommit="updateCommit" @updateThumb="updateThumb" @updateDelete="updateDelete" :showBtn="showBtn" :contentMaxLength="contentMaxLength">
      <template #operationBtn>
        <slot name="operationBtn" />
      </template>
    </el-comment-item>
  </div>
</template>

<script>
import ElCommentItem from './item';
export default {
  name: "ElComment",
  props: {
    contentMaxLength:{
      type: Number,
      default: 50
    },
    item: Object,
    showBtn:{
      type: Array,
      default: () => []
    },
    showCommitNum: {
      type: Boolean,
      default: false
    },
    showCommentBox: {
      type: Boolean,
      default: false
    }
  },

  components: { ElCommentItem },
  data() {
    return {
      list: []
    }
  },
  created() {
    this.flatList()
  },
  methods: {
    flatList() {
      this.list = []
      const flag = (item) => {
        this.list.push(item)
        if (!item.children) {
          return;
        }
        item.children.forEach(data => {
          flag(data)
        })
      }

      flag(this.item)
    },
    updateCommit(item, option) {
      this.$emit('updateCommit', item, option)
      this.flatList()
    },
    updateThumb(item) {
      this.$emit('updateThumb', item)
    },
    updateDelete(item) {
      this.$emit('deleteComment', item)
      this.flatList()
    }
  }
}
</script>
