<template>
    <reply-item :replyItem="replyData" :isLastItem="replyData.childrenCount == 0" @success="reloadChildren" @closeDialog="$emit('closeDialog')"></reply-item>

    <el-card class="reply-children-card" v-loading="loading" shadow="never">
        <template v-for="(item, index) in replyData.children" v-bind:key="index">
            <reply-item :replyItem="item" :isLastItem="index == replyData.childrenCount - 1" @success="reloadChildren"></reply-item>
        </template>
        
        <!-- 回复详情 -->
        <template v-if="replyData.childrenCount > replyData.children.length">
            <slot></slot>
        </template>
    </el-card>

</template>

<script>
import API from "@/api/policy/message";
import replyItem from "@/components/ReplyCard/tree/item.vue";

export default {
    emits: ["updateCount", "closeDialog"],
    components: {
        replyItem,
    },
    props: {
        pageSize: { type: Number, defult: 999 },
        currentReply: { type: Object, defult: () => {} }
    },
    
    data() {
        return {
            loading: false,
            replyData: {
                id: null,
                parentId: 0,
                refId: null,
                refType: null,
                createId: null,
                createName: null,
                createTime: null,
                messageContent: null,
                childrenCount: 0,
                children: []
            }
        }
    },

    watch: {
        currentReply(value) {
            this.init(this.currentReply);
        }
    },

    mounted() {
        this.init(this.currentReply);
    },

    methods: {
        init(data) {
            for (const key in this.replyData) {
                if (key == "children") this.replyData[key] = [];
                else this.replyData[key] = data[key];
            }

            if (data.parentId == 0) this.reloadChildren();
        },

        reloadChildren() {
            this.loading = true;
            API.get({ page: 1, size: this.pageSize, parentId: this.replyData.id, refId: this.replyData.refId, refType: this.replyData.refType }).then(res => {
                this.loading = false;
                if (res.code === 200) {
                    this.replyData["childrenCount"] = res.data.total;
                    this.replyData["children"] = res.data.records;
                    this.$emit("updateCount", res.data.total);
                } else ElMessage.error(res.msg);
            }).catch(() => this.loading = false);
        }
    }
}
</script>

<style lang="scss" scoped>
.reply-children-card {
  border: none;
  border-radius: 0;

  .el-card__body {
    margin-left: 10px;
    padding: 0;
  }
}
</style>