<template>
  <!-- 限制递归深度 -->
  <view v-if="level <= maxLevel" class="comment-item" :style="{'margin-left': level * 15 + 'px'}">
    <view class="comment-content">
      <view class="comment-header">
        <image class="comment-avatar" :src="comment.pusherPortrait" mode="aspectFill"></image>
        <view class="comment-info">
          <text class="comment-username">{{ comment.pusherName }}</text>
          <text class="comment-time">{{ formatTime(comment.createdAt) }}</text>
        </view>
        <view class="comment-actions">
          <text class="reply-btn" @tap="handleReply">回复</text>
        </view>
      </view>
      <view class="comment-text">
        <text>{{ comment.content }}</text>
      </view>
    </view>

    <!-- 回复输入框 -->
    <view v-if="replyingTo === comment.id" class="reply-input-container">
      <input
        class="reply-input"
        v-model="replyContent"
        :placeholder="`回复@${comment.pusherName}`"
      />
      <button class="reply-btn" @tap="submitReply">发送</button>
      <button class="cancel-btn" @tap="cancelReply">取消</button>
    </view>

    <!-- 子评论（限制递归） -->
    <view class="children-comments">
      <comment-item
        v-for="child in comment.children"
        :key="child.id"
        :comment="child"
        :level="level + 1"
        :max-level="maxLevel"
        :replying-to="replyingTo"
        @reply="$emit('reply', $event)"
        @submit-reply="$emit('submit-reply', $event)"
        @cancel-reply="$emit('cancel-reply')"
      ></comment-item>
    </view>
  </view>
</template>

<script>
export default {
  name: "CommentItem",
  props: {
    comment: Object,
    level: { type: Number, default: 0 },
    maxLevel: { type: Number, default: 3 }, // 限制最大嵌套层级
    replyingTo: String
  },
  data() {
    return {
      replyContent: ""
    };
  },
  methods: {
    handleReply() {
      this.$emit("reply", this.comment.id);
    },
    submitReply() {
      if (!this.replyContent.trim()) return;
      this.$emit("submit-reply", {
        parentId: this.comment.id,
        content: this.replyContent
      });
      this.replyContent = "";
    },
    cancelReply() {
      this.$emit("cancel-reply");
    },
    formatTime(time) {
      // 简化时间格式化（小程序兼容）
      return new Date(time).toLocaleString();
    }
  }
};
</script>

<style scoped>
/* 使用px单位 */
.comment-item {
  margin-bottom: 15px;
  border-left: 2px solid #eee;
  padding-left: 10px;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.reply-input-container {
  display: flex;
  margin-top: 10px;
}
.reply-input {
  flex: 1;
  border: 1px solid #ddd;
  padding: 5px;
}
</style>