<template>
  <view class="note-detail-container">
    <!-- 审核状态提示 -->
    <view
      class="review-status-tip"
      v-if="noteDetail.status === 0 || noteDetail.status === -1"
    >
      <uni-icons type="info" size="18" color="#ffffff"></uni-icons>
      <text>{{
        noteDetail.status === 0 ? "笔记审核中" : "笔记审核不通过"
      }}</text>
      <text
        v-if="
          noteDetail.status === -1 &&
          noteDetail.logs &&
          noteDetail.logs.length > 0
        "
        class="reason"
        >原因：{{ noteDetail.logs[0].reason }}</text
      >
    </view>
    <!-- 笔记内容区域 -->
    <view class="content-scroll">
      <!-- 轮播图区域 -->
      <view class="banner-content">
        <swiper
          class="top-banner"
          :circular="true"
          :interval="6000"
          :duration="800"
          :indicator-dots="false"
          :autoplay="true"
          @change="swiperChange"
        >
          <swiper-item v-for="(item, index) in topBanner" :key="index">
            <image
              class="top-banner"
              :src="item"
              mode="aspectFill"
              @click="previewImage(item)"
            ></image>
          </swiper-item>
        </swiper>

        <view class="dot-container">
          <view
            :class="['dot-line', index == swiperIndex ? 'active' : '']"
            v-for="(item, index) in topBanner"
            :key="index"
          ></view>
        </view>
      </view>

      <!-- 内容卡片 -->
      <view class="content-card">
        <!-- 作者信息 -->
        <view class="author-section">
          <image
            class="author-avatar"
            :src="noteDetail.headImg"
            mode="aspectFill"
          />
          <view class="author-info">
            <text class="author-name">{{ noteDetail.nickname }}</text>
          </view>
          <view
            class="follow-btn"
            :class="{ followed: noteDetail.userFollowed }"
            @click="toggleFollow"
          >
            {{ noteDetail.userFollowed ? "已关注" : "关注" }}
          </view>
        </view>
        <!-- 笔记标题 -->
        <view class="note-title">
          {{ noteDetail.title }}
        </view>

        <!-- 笔记内容 -->
        <view class="note-content">
          <view class="content-text">{{ noteDetail.content }}</view>
          <!-- 标签名称 -->
          <view class="tag-names" v-if="noteDetail.tagNames">
            <text
              v-for="(tag, index) in noteDetail.tagNames"
              :key="index"
              class="tag-link"
              @click="handleTagClick(tag)"
              >#{{ tag }}</text
            >
          </view>
        </view>
      </view>
      <view
        class=""
        style="
          width: auto;
          height: 1rpx;
          background-color: #999999;
          margin: 60rpx 32rpx;
        "
      >
      </view>
      <!-- 评论区域 -->
      <view class="comments-section">
        <view class="comments-header">
          <text class="comments-title"
            >评论 ({{ noteDetail.commentCount || 0 }})</text
          >
        </view>
        <view
          class="comment-item"
          v-for="comment in noteDetail.comments"
          :key="comment.id"
        >
          <view class="main-comment" @click="replyToComment(comment)">
            <image
              class="comment-avatar"
              :src="comment.headImg"
              mode="aspectFill"
            />
            <view class="comment-content">
              <view class="comment-header">
                <text class="comment-user">{{ comment.nickname }}</text>
              </view>
              <text class="comment-text">{{ comment.content }}</text>
              <view class="comment-footer">
                <text class="comment-time">{{ comment.formatTime }}</text>
                <text class="reply-btn">回复</text>
              </view>
              <!-- 展开/收起二级评论按钮 -->
              <!-- 二级评论列表 -->
              <view
                class="replies-container"
                v-if="
                  showRepliesMap[comment.id] &&
                  comment.replies &&
                  comment.replies.length > 0
                "
              >
                <view
                  class="reply-item"
                  v-for="reply in comment.replies"
                  :key="reply.id"
                  @click.stop="replyToComment(reply)"
                >
                  <image
                    class="reply-avatar"
                    :src="showImg(reply.headImg)"
                    mode="aspectFill"
                  />
                  <view class="reply-content">
                    <view class="reply-header">
                      <text class="reply-user">{{ reply.nickname }}</text>
                      <text class="reply-to" v-if="reply.toNickname"
                        >回复 @{{ reply.toNickname }}</text
                      >
                    </view>
                    <text class="reply-text">{{ reply.content }}</text>
                    <view class="reply-footer">
                      <text class="reply-time">{{ reply.formatTime }}</text>
                      <text class="reply-btn">回复</text>
                    </view>
                  </view>
                </view>

                <!-- 展开更多按钮 -->
              </view>
              <view
                class="toggle-replies flex-start"
                v-if="comment.commentCount > 0"
                @click.stop="toggleReplies(comment.id)"
              >
                <view
                  class="load-more-replies flex-start"
                  v-if="showRepliesMap[comment.id] && comment.hasMoreReplies"
                  @click.stop="loadReplies(comment.id, true)"
                >
                  <text>展开更多</text
                  ><uni-icons type="down" color="#666" size="18"></uni-icons>
                </view>
                <view>
                  <view v-if="!showRepliesMap[comment.id]" class="flex-start">
                    <text>展开{{ comment.commentCount }}条回复</text>
                    <uni-icons type="down" color="#666" size="18"></uni-icons>
                  </view>
                  <view class="flex-start" v-else>
                    <text>收起</text>
                    <uni-icons type="up" color="#666" size="18"></uni-icons>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载更多提示 -->
      <view class="loading-more" v-if="loadingComments">
        <text>加载中...</text>
      </view>
      <view
        class="no-more-comments"
        v-if="!hasMoreComments && noteDetail.comments.length > 0"
      >
        <text>没有更多评论了</text>
      </view>
      <view
        class="no-comments"
        v-if="!hasMoreComments && noteDetail.comments.length === 0"
      >
        <text>暂无评论，快来发表第一条评论吧</text>
      </view>
    </view>
    <!-- 底部占位 -->
    <view class="bottom-placeholder"></view>

    <!-- 编辑区域 -->
    <view class="edit-area" @click="goToEdit" v-if="showEditArea">
      <uni-icons type="compose" size="22" color="#666"></uni-icons>
      <text>编辑</text>
    </view>

    <!-- 分享按钮已移至底部 -->

    <!-- 底部评论输入框 -->
    <view class="comment-input-section-box">
      <view class="comment-input-section">
        <input
          class="comment-input"
          v-model="commentText"
          :placeholder="toNickname ? `回复 @${toNickname}` : '写下你的想法...'"
          ref="inputComment"
          :focus="inputFocusState"
          @confirm="submitComment"
          @focus="showTextarea = true"
          @blur="inputFocusState = false"
        />
        <!-- 文本域，用于多行输入 -->
        <!-- <textarea
          v-else
          class="comment-textarea"
          v-model="commentText"
          :placeholder="
            toNickname ? `回复 @${toNickname}` : '写下你的想法...'
          "
          auto-height
          :focus="showTextarea"
          @blur="onTextareaBlur"
          @confirm="submitComment"
        /> -->
        <button
          class="send-btn"
          @click="submitComment"
          :disabled="!commentText.trim()"
        >
          发送
        </button>

        <view class="like-section" @click="toggleLike">
          <image
            class="like-icon"
            mode="widthFix"
            :src="
              !noteDetail.userLiked
                ? 'https://epic.js-dyyj.com/uploads/20250728/2f3ae212c01fa3b67be81abc5723cf5c.png'
                : 'https://epic.js-dyyj.com/uploads/20250728/dd7ed269b24e84a2dd141da6ab980fd6.png'
            "
          ></image>
          <text
            class="like-count"
            :class="{ 'liked-text': noteDetail.userLiked }"
            >{{ noteDetail.likeCount || 0 }}</text
          >
        </view>
        <!-- #ifdef MP-WEIXIN -->
        <button class="share-section" open-type="share">
          <uni-icons type="redo" size="24" color="#666"></uni-icons>
        </button>
        <!-- #endif -->
        <!-- #ifndef MP-WEIXIN -->
        <view class="share-section">
          <uni-icons type="redo" size="24" color="#666"></uni-icons>
        </view>
        <!-- #endif -->
      </view>
    </view>
  </view>
</template>

<script>
import headerVue from "@/components/header.vue";

export default {
  name: "NoteDetail",
  components: {
    headerVue,
  },
  onReachBottom() {
    // 触底加载更多评论
    if (this.hasMoreComments && !this.loadingComments) {
      this.loadCommentList(true);
    }
  },
  // 微信分享配置
  // #ifdef MP-WEIXIN
  onShareAppMessage() {
    // 设置分享标识符，在onShow中会检查并调用分享接口
    this.isShared = true;

    return {
      title: this.noteDetail.title || "Epic Soul交响",
      path: `/pages/notes/detail?id=${this.noteId}`,
      imageUrl:
        this.topBanner && this.topBanner.length > 0 ? this.topBanner[0] : "",
      mpId: "wx9660f8c5776663e0",
    };
  },
  onShareTimeline() {
    // 设置分享标识符，在onShow中会检查并调用分享接口
    this.isShared = true;

    return {
      title: this.noteDetail.title || "Epic Soul交响",
      query: `id=2`,
      imageUrl:
        this.topBanner && this.topBanner.length > 0 ? this.topBanner[0] : "",
    };
  },
  // #endif
  data() {
    return {
      noteId: "",
      commentText: "",
      topBanner: [],
      swiperIndex: 0,
      pageNum: 1,
      pageSize: 10,
      hasMoreComments: true,
      loadingComments: false,
      parentId: null, // 被回复的评论ID
      toUserId: null, // 被回复的用户ID
      toHeadImg: "", // 被回复的用户头像
      toNickname: "", // 被回复的用户昵称
      inputFocusState: false, // 输入框焦点状态
      showRepliesMap: {}, // 存储每个评论的二级评论展开状态
      isShared: false, // 分享标识符
      shareTimer: null, // 分享定时器
      noteDetail: {
        id: "",
        title: "",
        content: "",
        image: "",
        tags: [],
        likes: 0,
        isLiked: false,
        createTime: "",
        tagNames: [],
        comments: [],
      },

      userInfo: {
        id: "",
      },
    };
  },
  computed: {
    showEditArea() {
      return this.noteDetail.userId == this.userInfo.id;
    },
  },

  onLoad(options) {
    console.log(options, "页面的");
    if (uni.getStorageSync("userInfo")) {
      this.userInfo = JSON.parse(uni.getStorageSync("userInfo"));
    }
    console.log(this.userInfo);
    if (options.id) {
      this.noteId = options.id;
    } else {
      uni.showToast({
        title: "笔记ID不存在",
        icon: "none",
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    }
  },
  onShow() {
    let id = uni.getStorageSync("wechat_qrcode");
    this.noteId = this.noteId || id;
    this.loadNoteDetail();

    // 检查分享标识符，如果为true则调用分享接口
    if (this.isShared) {
      // 使用定时器延迟调用，确保页面已完全加载
      this.shareTimer = setTimeout(() => {
        this.recordShare();
        this.isShared = false; // 重置分享标识符
      }, 1000);
    }
  },

  onHide() {
    // 页面隐藏时清除定时器
    if (this.shareTimer) {
      clearTimeout(this.shareTimer);
      this.shareTimer = null;
    }
  },
  methods: {
    // 记录分享并获得积分
    async recordShare() {
      try {
        const res = await this.Post(
          {},
          `/framework/noteShare/add/${this.noteId}`,
          "DES"
        );

        if (res.code === 200) {
          uni.showToast({
            title: "分享成功",
            icon: "success",
          });
          return true;
        } else {
          console.warn("分享记录失败:", res.msg);
          return false;
        }
      } catch (error) {
        console.error("分享记录失败:", error);
        return false;
      }
    },

    swiperChange(e) {
      this.swiperIndex = e.detail.current;
    },

    // 加载二级评论
    async loadReplies(commentId, isLoadMore = false, isNewComment = false) {
      try {
        uni.showLoading({ title: "加载中..." });

        // 获取当前评论
        const index = this.noteDetail.comments.findIndex(
          (item) => item.id === commentId
        );
        let comment = this.noteDetail.comments[index];
        if (!comment) return;

        // 除了点击"展开更多"的情况外，其他情况都应该从第1页开始加载
        if (!isLoadMore) {
          // 重置页码为1，确保从第一页开始加载
          if (!comment.replyPageNum) {
            this.$set(comment, "replyPageNum", 1);
          } else {
            comment.replyPageNum = 1;
          }

          if (!comment.replies) {
            this.$set(comment, "replies", []);
          } else if (!isNewComment) {
            // 只有在非新评论提交的情况下才清空回复列表
            // 如果是新评论提交，保留现有回复列表，新评论会添加到列表开头
            comment.replies = [];
          }

          // 设置hasMoreReplies为true，确保可以加载更多回复
          this.$set(comment, "hasMoreReplies", true);
        }

        // 如果没有更多回复，直接返回
        if (isLoadMore && !comment.hasMoreReplies) return;

        const res = await this.Post(
          {
            parentId: commentId,
            noteId: this.noteId,
            pageNum: comment.replyPageNum,
            pageSize: 5, // 每页加载5条回复
          },
          "/framework/comment/pageList",
          "DES"
        );

        if (res.code === 200) {
          const newReplies = res.rows || [];

          // 更新回复列表
          if (isLoadMore) {
            comment.replies = [...comment.replies, ...newReplies];
          } else {
            // 非加载更多的情况（包括新评论提交和首次加载），直接使用新获取的评论列表
            // 这确保了页码为1时的数据总是最新的
            comment.replies = newReplies;
          }

          // 更新回复总数
          const newCommentCount = res.total || 0;
          comment.commentCount = newCommentCount;

          // 判断是否还有更多回复
          comment.hasMoreReplies =
            comment.replies.length < comment.commentCount;

          // 如果有更多回复，页码加1
          if (comment.hasMoreReplies) {
            comment.replyPageNum++;
          }
          this.$forceUpdate();

          // 如果是新评论提交，更新一级评论列表中的评论计数
          if (isNewComment) {
            // 查找一级评论列表中的对应评论，确保评论计数同步
            const mainComment = this.noteDetail.comments.find(
              (item) => item.id === commentId
            );
            if (mainComment) {
              mainComment.commentCount = newCommentCount;
            }
          }
        } else {
          uni.showToast({
            title: res.msg || "加载回复失败",
            icon: "none",
          });
        }
      } catch (error) {
        console.error("加载二级评论失败:", error);
        uni.showToast({
          title: "加载回复失败",
          icon: "none",
        });
      } finally {
        uni.hideLoading();
      }
    },

    // 切换显示/隐藏二级评论
    toggleReplies(commentId) {
      const comment = this.noteDetail.comments.find(
        (item) => item.id === commentId
      );
      if (!comment) return;

      // 如果已经加载过回复，直接切换显示状态
      if (this.showRepliesMap[commentId] === undefined) {
        this.$set(this.showRepliesMap, commentId, true);
        // 加载二级评论
        this.loadReplies(commentId);
      } else if (this.showRepliesMap[commentId]) {
        // 如果当前是展开状态，则收起
        this.$set(this.showRepliesMap, commentId, false);
      } else {
        // 如果当前是收起状态，则展开
        this.$set(this.showRepliesMap, commentId, true);
        // 如果已经有回复数据，不需要重新加载
        if (!comment.replies || comment.replies.length === 0) {
          this.loadReplies(commentId);
        }
      }
    },
    // 加载笔记详情
    async loadNoteDetail() {
      try {
        uni.showLoading({ title: "加载中..." });
        // 调用真实API
        const res = await this.Post(
          { noteId: this.noteId },
          "/framework/note/getInfo/" + this.noteId,
          "DES"
        );
        if (res.code === 200) {
          this.noteDetail = res.data;
          this.noteDetail.tagNames = this.noteDetail.tagNames.split(",");
          console.log(this.noteDetail.tagNames);
          // 如果有图片，设置轮播图
          this.topBanner = this.noteDetail.coverImage.split(",");

          // 加载评论列表
          await this.loadCommentList();
        } else {
          uni.showToast({
            title: res.msg || "加载失败",
            icon: "none",
          });
        }
      } catch (error) {
        console.error("加载笔记详情失败:", error);
        uni.showToast({
          title: "加载失败",
          icon: "none",
        });
      } finally {
        uni.hideLoading();
      }
    },

    // 加载评论列表
    async loadCommentList(isLoadMore = false) {
      if (this.loadingComments) return;

      try {
        this.loadingComments = true;

        // 如果不是加载更多，重置页码
        if (!isLoadMore) {
          this.pageNum = 1;
          this.hasMoreComments = true;
        }

        const res = await this.Post(
          {
            pageSize: this.pageSize,
            pageNum: this.pageNum,
            noteId: this.noteId,
          },
          "/framework/comment/pageList",
          "DES"
        );

        if (res.code === 200) {
          if (res.rows) {
            res.rows.forEach((comment) => {
              this.$set(comment, "replies", []);
            });
          }
          // 更新评论列表
          if (isLoadMore) {
            // 加载更多时，追加评论
            this.noteDetail.comments = [
              ...this.noteDetail.comments,
              ...(res.rows || []),
            ];
          } else {
            // 首次加载或刷新时，替换评论
            this.noteDetail.comments = res.rows || [];
          }
          // 更新评论数量
          this.noteDetail.commentCount = res.total || 0;
          // 判断是否还有更多评论
          this.hasMoreComments = this.noteDetail.comments.length < res.total;

          // 如果有更多评论，页码加1，为下次加载做准备
          if (this.hasMoreComments) {
            this.pageNum++;
          }
          console.log(this.noteDetail.comments);
        } else {
          console.error("加载评论列表失败:", res.msg);
          uni.showToast({
            title: res.msg || "加载评论失败",
            icon: "none",
          });
        }
      } catch (error) {
        console.error("加载评论列表失败:", error);
        uni.showToast({
          title: "加载评论失败",
          icon: "none",
        });
      } finally {
        this.loadingComments = false;
      }
    },
    // 预览图片
    previewImage(imageUrl) {
      uni.previewImage({
        urls: this.topBanner,
        current: imageUrl,
      });
    },

    // 切换关注状态
    async toggleFollow() {
      try {
        // 根据当前关注状态设置type参数：1表示关注，2表示取消关注
        const type = this.noteDetail.userFollowed ? 2 : 1;
        const res = await this.Post(
          {
            followUserId: this.noteDetail.userId, // 被关注人id
            type: type, // 1.关注 2.取消
          },
          "/framework/follow/followUser",
          "DES"
        );
        console.log(res);

        if (res.code === 200) {
          this.noteDetail.userFollowed = !this.noteDetail.userFollowed;
          uni.showToast({
            title: this.noteDetail.userFollowed ? "已关注" : "取消关注",
            icon: "success",
          });
        } else {
          uni.showToast({
            title: res.msg || (type === 1 ? "关注失败" : "取消关注失败"),
            icon: "none",
          });
        }
      } catch (error) {
        let res = error.data;
        console.error("关注操作失败:", error);
        uni.showToast({
          title: res.msg || (type === 1 ? "关注失败" : "取消关注失败"),
          icon: "none",
        });
      }
    },

    // 切换点赞状态
    async toggleLike() {
      if (!this.noteId) {
        uni.showToast({
          title: "笔记ID不存在",
          icon: "none",
        });
        return;
      }

      try {
        // 保存原始状态，用于出错时回滚
        const originalLiked = this.noteDetail.userLiked;
        const originalLikeCount = this.noteDetail.likeCount || 0;

        // 乐观更新UI
        this.noteDetail.userLiked = !this.noteDetail.userLiked;
        this.noteDetail.likeCount =
          (this.noteDetail.likeCount || 0) +
          (this.noteDetail.userLiked ? 1 : -1);

        // 根据当前状态决定调用哪个API
        const apiUrl = this.noteDetail.userLiked
          ? "/framework/noteLike/add/" + this.noteId
          : "/framework/noteLike/cancel/" + this.noteId;

        const res = await this.Post({}, apiUrl, "DES");

        if (res.code === 200) {
          // 成功时，如果API返回了准确的点赞数，则使用API返回的数据
          if (res.data && res.data.likeCount !== undefined) {
            this.noteDetail.likeCount = res.data.likeCount;
          }

          // 发送事件通知 timeShopBank 页面更新数据
          uni.$emit("note-like-change", {
            noteId: this.noteId,
            isLiked: this.noteDetail.userLiked,
            likeCount: this.noteDetail.likeCount,
          });

          // 可以在这里添加成功的提示或动画效果
        } else {
          // 失败时回滚UI状态
          this.noteDetail.userLiked = originalLiked;
          this.noteDetail.likeCount = originalLikeCount;

          uni.showToast({
            title:
              res.msg ||
              (this.noteDetail.userLiked ? "点赞失败" : "取消点赞失败"),
            icon: "none",
          });
        }
      } catch (error) {
        console.error("点赞操作失败:", error);

        // 发生异常时也需要回滚UI状态
        this.noteDetail.userLiked = !this.noteDetail.userLiked;
        this.noteDetail.likeCount =
          (this.noteDetail.likeCount || 0) +
          (this.noteDetail.userLiked ? 1 : -1);

        uni.showToast({
          title: "网络异常，请稍后重试",
          icon: "none",
        });
      }
    },

    // 提交评论
    async submitComment() {
      if (!this.commentText.trim()) {
        return;
      }

      try {
        uni.showLoading({ title: "提交中..." });
        const params = {
          noteId: this.noteId,
          content: this.commentText,
          method: "POST",
        };

        // 如果是回复评论，添加相关参数
        if (this.parentId) {
          params.parentId = this.parentId;
          params.toUserId = this.toUserId;
          params.toHeadImg = this.toHeadImg;
          params.toNickname = this.toNickname;
        }

        const res = await this.Post(
          params,
          "/framework/comment/addComment",
          "DES"
        );
        if (res.code === 200) {
          // 清空评论输入框
          this.commentText = "";

          // 清空回复信息
          const parentIdCopy = this.parentId;
          this.parentId = null;
          this.toUserId = null;
          this.toHeadImg = "";
          this.toNickname = "";
          // 关闭文本域模式
          this.showTextarea = false;

          // 如果是回复评论，只刷新该评论的二级评论列表
          if (parentIdCopy) {
            // 刷新二级评论列表，传递isNewComment=true表示这是新提交的评论
            // 传递isLoadMore=false确保从第一页开始加载二级评论
            await this.loadReplies(parentIdCopy, false, true);

            // 确保展开二级评论
            this.$set(this.showRepliesMap, parentIdCopy, true);
          } else {
            // 如果是一级评论，才重新加载评论列表
            await this.loadCommentList();
          }

          uni.showToast({
            title: "评论成功",
            icon: "success",
          });
        } else {
          uni.showToast({
            title: res.msg || "评论失败",
            icon: "none",
          });
        }
      } catch (error) {
        console.error("提交评论失败:", error);
        uni.showToast({
          title: "评论失败",
          icon: "none",
        });
      } finally {
        uni.hideLoading();
      }
    },

    // 格式化时间
    formatTime(timeString) {
      const time = new Date(timeString);
      const year = time.getFullYear();
      const month = String(time.getMonth() + 1).padStart(2, "0");
      const day = String(time.getDate()).padStart(2, "0");
      return `${year}/${month}/${day}`;
    },

    // 显示图片
    showImg(img) {
      if (!img) return "/static/image/default-avatar.png";
      if (img.indexOf("https://") !== -1 || img.indexOf("http://") !== -1) {
        return img;
      } else {
        return this.NEWAPIURLIMG + img;
      }
    },

    // 处理标签点击
    handleTagClick(tag) {
      console.log("标签点击:", tag);
      // 可以根据需求跳转到标签相关页面或执行其他操作
      // uni.showToast({
      //   title: `点击了标签: ${tag}`,
      //   icon: "none",
      // });

      // 如果需要跳转到标签相关页面，可以使用以下代码
      // uni.navigateTo({
      //   url: `/pages/tags/detail?tag=${encodeURIComponent(tag)}`
      // });
    },

    // 跳转到编辑页面
    goToEdit() {
      uni.navigateTo({
        url: `/pages/notes/publish?id=${this.noteId}`,
      });
    },

    // 回复评论
    replyToComment(comment) {
      // 如果是回复二级评论，需要设置正确的parentId（一级评论的ID）
      if (comment.parentId) {
        // 这是二级评论，parentId应该是其父评论的ID
        this.parentId = comment.parentId;
      } else {
        // 这是一级评论，直接使用其ID
        this.parentId = comment.id;
      }

      this.toUserId = comment.userId;
      this.toHeadImg = comment.headImg;
      this.toNickname = comment.nickname;

      // 在uni-app中，需要先将焦点状态重置为false，然后再设置为true才能生效
      this.inputFocusState = false;

      // 确保DOM更新后再尝试聚焦
      this.$nextTick(() => {
        console.log(this.$refs.inputComment);
        // 添加延时确保元素已完全渲染
        setTimeout(() => {
          this.inputFocusState = true;
        }, 100);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.note-detail-container {
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.content-scroll {
  flex: 1;
  padding: 0;
}

// 笔记图片
.note-image-container {
  width: 100%;
  height: 500rpx;
  overflow: hidden;

  .note-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

// 作者信息
.author-section {
  display: flex;
  align-items: center;
  background: #fff;

  .author-avatar {
    width: 95rpx;
    height: 95rpx;
    border-radius: 50%;
    margin-right: 24rpx;
  }

  .author-info {
    flex: 1;

    .author-name {
      display: block;
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .follow-btn {
    border-radius: 30rpx;
    font-size: 28rpx;
    color: #fff;
    font-weight: bold;
    border: 2rpx solid #02fcfc;
    color: #333333;
    background-color: white;
    padding: 12rpx 30rpx;
    &.followed {
      background: #02fcfc;
    }
  }
}

// 内容卡片容器
.content-card {
  margin: 32rpx;
  background: #fff;
  border-radius: 0rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  padding: 40rpx;
}

// 笔记标题
.note-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  margin-bottom: 14rpx;
  margin-top: 24rpx;
}

// 标签
.tags-section {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 32rpx;

  .tag-item {
    // background: #f8f9fa;
    // border-radius: 20rpx;
    font-size: 26rpx;
    color: #666;
  }
}

// 笔记内容
.note-content {
  .content-text {
    font-size: 30rpx;
    line-height: 1.6;
    color: #333;
    font-weight: 500;
    word-break: break-all;
  }

  .tag-names {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    margin-top: 24rpx;

    .tag-link {
      font-size: 28rpx;
      color: #0066cc;
      font-weight: 500;
    }
  }
}

// 评论区域
.comments-section {
  margin: 0 32rpx 32rpx;
  border-radius: 0rpx;
  .comments-header {
    margin-bottom: 32rpx;

    .comments-title {
      font-size: 34rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .comment-item {
    margin-bottom: 32rpx;

    .main-comment {
      display: flex;

      .comment-avatar {
        width: 64rpx;
        height: 64rpx;
        border-radius: 32rpx;
        margin-right: 24rpx;
      }

      .comment-content {
        flex: 1;

        .comment-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12rpx;

          .comment-user {
            font-size: 30rpx;
            font-weight: bold;
            color: #000000;
          }

          .comment-time {
            font-size: 26rpx;
            color: #999;
          }
        }

        .comment-text {
          font-size: 28rpx;
          line-height: 1.5;
          color: #000000;
          margin-bottom: 12rpx;
        }

        .comment-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .comment-time {
            font-size: 26rpx;
            color: #999;
          }

          .reply-btn {
            font-size: 26rpx;
            color: #666;
            padding: 6rpx 12rpx;
            border-radius: 4rpx;

            &:active {
              background-color: #f0f0f0;
            }
          }
        }

        .toggle-replies {
          margin-top: 16rpx;

          text {
            font-size: 28rpx;
            color: #666;
            padding: 6rpx 0;
          }
        }
      }
    }
    .load-more-replies {
      margin-right: 20rpx;

      text {
        font-size: 28rpx;
        color: #666;
        padding: 6rpx 0;
      }
    }
  }
}
.replies-container {
  margin-top: 16rpx;

  .reply-item {
    display: flex;
    margin-bottom: 20rpx;

    .reply-avatar {
      width: 56rpx;
      height: 56rpx;
      border-radius: 28rpx;
      margin-right: 16rpx;
    }

    .reply-content {
      flex: 1;

      .reply-header {
        display: flex;
        align-items: center;
        margin-bottom: 8rpx;

        .reply-user {
          font-size: 28rpx;
          font-weight: bold;
          color: #000000;
          margin-right: 8rpx;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          max-width: 250rpx;
        }

        .reply-to {
          font-size: 26rpx;
          color: #666;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          max-width: 250rpx;
        }
      }

      .reply-text {
        font-size: 26rpx;
        line-height: 1.5;
        color: #000000;
        margin-bottom: 8rpx;
      }

      .reply-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .reply-time {
          font-size: 24rpx;
          color: #999;
        }

        .reply-btn {
          font-size: 26rpx;
          color: #666;
          padding: 6rpx 12rpx;
          border-radius: 4rpx;

          &:active {
            background-color: #f0f0f0;
          }
        }
      }
    }
  }
}
.comment-input-section-box {
  position: fixed;
  bottom: -1px;
  left: 0;
  right: 0;
  z-index: 999;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
  border-top: 1rpx solid #f0f0f0;
  background: #fff;
}
// 底部评论输入
.comment-input-section {
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx 0;

  .comment-input {
    flex: 1;
    height: 80rpx;
    background: #f8f9fa;
    border-radius: 40rpx;
    padding: 0 32rpx;
    font-size: 28rpx;
    border: none;
    margin-right: 16rpx;
    margin-bottom: max(env(safe-area-inset-bottom), 24rpx);
  }

  .cancel-reply {
    font-size: 28rpx;
    color: #666;
    margin-right: 16rpx;
    margin-bottom: max(env(safe-area-inset-bottom), 24rpx);
  }

  .send-btn {
    width: 140rpx;
    height: 67rpx;
    line-height: 67rpx;
    background: #94fafa;
    color: #000000;
    border-radius: 40rpx;
    font-size: 30rpx;
    border: none;
    font-weight: 500;
    margin-right: 24rpx;
    margin-bottom: max(env(safe-area-inset-bottom), 24rpx);

    &:disabled {
      background: #ccc;
    }
  }

  .share-section {
    margin-bottom: max(env(safe-area-inset-bottom), 24rpx);
    display: flex;
    align-items: center;
    padding: 0 16rpx;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    line-height: normal;
    border-radius: 0;
    font-size: inherit;
    color: inherit;
    text-align: center;
    min-height: auto;
    &::after {
      border: none;
    }
  }

  .like-section {
    margin-bottom: max(env(safe-area-inset-bottom), 24rpx);
    display: flex;
    align-items: center;
    gap: 8rpx;

    .like-icon {
      width: 36rpx;
      transition: color 0.3s;
      &.liked {
        color: #ff4757;
      }
    }

    .like-count {
      font-size: 30rpx;
      color: #666;
      font-weight: bold;

      &.liked-text {
        color: #ff4757;
      }
    }
  }
}

.bottom-placeholder {
  height: 130rpx;
  width: 100%;
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
  box-sizing: content-box;
}

// 加载更多和无更多评论提示样式
.loading-more,
.no-more-comments,
.no-comments {
  text-align: center;
  padding: 30rpx 0;

  text {
    font-size: 28rpx;
    color: #999;
  }
}

.no-comments {
  padding: 60rpx 0;

  text {
    font-size: 30rpx;
  }
}
.review-status-tip {
  width: 100%;
  padding: 20rpx 32rpx;
  background-color: #ff6b6b;
  color: #ffffff;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  gap: 12rpx;
  box-sizing: border-box;

  .reason {
    margin-left: 10rpx;
    font-size: 26rpx;
  }
}

.edit-area {
  position: fixed;
  right: 40rpx;
  bottom: 200rpx;
  width: 100rpx;
  height: 100rpx;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  z-index: 999;

  text {
    font-size: 24rpx;
    color: #999999;
    margin-top: 6rpx;
  }
}

.banner-content {
  width: 100%;
  height: 1000rpx;
  position: relative;

  .top-banner {
    width: 100%;
    height: 100%;
  }

  .dot-container {
    position: absolute;
    bottom: 43rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    left: 0;

    .dot-line {
      width: 52rpx;
      height: 4rpx;
      margin: 0 8rpx;
      background: RGBA(189, 170, 173, 0.8);

      &.active {
        background: white;
      }
    }
  }

  .page-indicator {
    position: absolute;
    bottom: 20rpx;
    right: 20rpx;
    // background: rgba(0, 0, 0, 0.5);
    border-radius: 10rpx;
    padding: 10rpx 20rpx;

    .page-text {
      font-size: 24rpx;
      color: #fff;
      font-weight: 500;
    }
  }
}
</style>
