<template>
    <div class="reply-item-dialog">
        <el-dialog v-model="visible" :title="`${replyData.childrenCount}条回复`" width="680" @closed="$emit('closed')">
            <reply-tree :currentReply="replyData" @updateCount="replyData.childrenCount = $event" @closeDialog="visible = false"></reply-tree>
            <el-divider>没有更多内容了</el-divider>
        </el-dialog>
    </div>
</template>

<script>
import replyTree from "@/components/ReplyCard/tree/index.vue";

export default {
    emits: ["closed"],
    components: {
        replyTree
    },
    
    data() {
        return {
            visible: false,

            replyData: {
                childrenCount: 0
            }
        }
    },

    methods: {
        open(data) {
            this.visible = true;
            this.replyData = Object.assign({}, data);
            return this;
        }
    }
}
</script>

<style lang="scss" scoped>
.reply-item-dialog :deep(.el-dialog) .el-dialog__body {
  padding: 0 16px 10px;

  .no-b-l {
    border-left: none;
  }

  .el-card {
    border: none;
    border-radius: 0;

    .el-card__body {
      margin-left: 10px;
      padding: 0;
    }
  }

  .el-divider {
    margin-top: 40px;
    border-color: var(--el-border-color-lighter);

    .el-divider__text {
      padding: 0 60px;
      color: var(--el-text-color-disabled);
    }
  }
}
</style>