// CommentItem.js
import { h } from 'vue'

export const CommentItem = {
    name: 'CommentItem',
    props: {
        comment: {
            type: Object,
            required: true,
        },
        // 可选：添加深度限制防止无限递归
        depth: {
            type: Number,
            default: 0,
        },
        parentName:{
            type:String,
            default:''
        }
    },
    setup(props) {
        // 日期格式化函数
        const formatDate = (dateString) => {
            return new Date(dateString).toLocaleString()
        }

        // 返回渲染函数
        return () => {
            const { comment, depth,parentName } = props
            // 创建子评论元素（递归部分）
            let childComments = null
            if (comment.children?.length && depth < 10) {
                // 限制最大深度为10层
                childComments = h(
                    'div',
                    { class: 'replies' },
                    comment.children.map((child) =>
                        h(CommentItem, {
                            comment: child,
                            key: child.id,
                            depth: depth + 1, // 传递增加后的深度
                            parentName:comment.pusherName||''
                        })
                    )
                )
            }

            // 构建主组件结构
            return h('div', { class: 'comment'}, [
                // 评论头部
                h('div', { class: 'comment-header',style:{display:'flex',justifyContent: 'space-between'} }, [
                    h('div', { class: 'username' }, parentName&&depth!==0?`${comment.pusherName}@${parentName}`:comment.pusherName),
                    h('span', { class: 'time',style:{color:'#999999'} }, formatDate(comment.createdAt)),
                ]),

                // 评论内容
                h('div', { class: 'comment-content',style:{color:'#999999',marginBottom:'5px'}  }, comment.content),

                // 子评论容器
                childComments,
            ])
        }
    },
}
