<template>
    <Head>
        <Title>{{ `${seo["title"] || "面经"} - 寄托天下出国留学网` }}</Title>
        <Meta name="keyword" :content="seo['keyword']" />
        <Meta name="description" :content="seo['description']" />
    </Head>
    <!-- <div @click="router.push(`/index.html`)">1111</div> -->
    <!-- <PageHeade></PageHeade> -->
    <div>
        <TopHead ref="topHeadRef"></TopHead>

        <div class="content flexflex">
            <div class="left" :style="{ height: contentRightHeight + 'px' }">
                <div class="school-box flexcenter" :style="{ 'pointer-events': info['school']?.['url'] ? 'auto' : 'none' }">
                    <a class="school-box-icon" :href="info['school']?.['url']" target="_blank"><img class="school-icon" v-if="info['school']?.['image']" :src="info['school']?.['image']" /></a>
                    <a class="school-name" :href="info['school']?.['url']" target="_blank">{{ info["school"]?.["name"] }}</a>
                    <a class="school-en-name" :href="info['school']?.['url']" target="_blank">{{ info["school"]?.["enname"] }}</a>
                </div>

                <div class="mj-total flexacenter">
                    该校共有
                    <div class="value">{{ relatedcount }}</div>
                    个面经
                </div>
                <div class="mj-list" @scroll="handleListScroll">
                    <template v-for="(item, index) in relatedlist" :key="index">
                        <a v-if="item['type']" class="mj-item flexflex recommend" :href="item?.url" target="_blank">
                            <div class="mj-header flexacenter">
                                <div class="label flexacenter">
                                    <div class="label-text flexcenter">荐</div>
                                    <div class="label-title">{{ labelObj[item["type"] || "offer"] }}</div>
                                </div>
                                <h1>{{ item["title"] }}</h1>
                            </div>

                            <div class="info-list flexflex" v-if="item['type'] == 'offer'">
                                <div class="info-item flexacenter">
                                    <div class="info-name">专业</div>
                                    <div class="info-value flex1 ellipsis">{{ item["professional"] }}</div>
                                </div>
                                <div class="info-item flexacenter">
                                    <div class="info-name">学位</div>
                                    <div class="info-value flex1 ellipsis">{{ item["degree"] }}</div>
                                </div>
                                <div class="info-item flexacenter">
                                    <div class="info-name">结果</div>
                                    <div class="info-value flex1 ellipsis">{{ item["apply_results"] }}</div>
                                </div>
                            </div>
                            <div class="thread-text ellipsis flexflex" v-if="item['type'] == 'thread' || item['type'] == 'ask'">
                                <div class="ask-label" v-if="item['type'] == 'ask'">回答：</div>
                                <div class="flex1 ellipsis">{{ item["message"] }}</div>
                            </div>

                            <div class="vote-list" v-if="item['type'] == 'vote'">
                                <div class="vote-item" v-for="(ite, i) in item['option'].slice(0, 2)" :key="i">{{ numberToEnclosed(i) }} &nbsp; {{ ite }}</div>
                                <div class="vote-item">{{ numberToEnclosed(3) }} &nbsp; …</div>
                            </div>
                        </a>
                        <a v-else class="mj-item flexflex" :class="{ pitch: pitchIndex == index }" @click.stop.prevent="handleItem(item['uniqid'])" :href="`./details/${item['uniqid']}`">
                            <div class="mj-header flexacenter">
                                <img class="mj-avatar" :src="item['avatar']" />
                                <div class="user-name">{{ item["username"] || "匿名用户" }}</div>
                                <div class="time">{{ handleDate(item["releasetime"]) }}发布</div>
                            </div>

                            <div class="info-list flexflex">
                                <div class="info-item flexacenter" v-if="item['profession']">
                                    <div class="info-name">专业</div>
                                    <div class="info-value flex1 ellipsis">{{ item["profession"] }}</div>
                                </div>
                                <div class="info-item flexacenter" v-if="item['project']">
                                    <div class="info-name">项目</div>
                                    <div class="info-value flex1 ellipsis">{{ item["project"] }}</div>
                                </div>
                                <div class="info-item flexacenter" v-if="item['interviewtime']">
                                    <div class="info-name">面试</div>
                                    <div class="info-value flex1 ellipsis">{{ item["interviewtime"] }}</div>
                                </div>
                            </div>
                        </a>
                    </template>
                </div>
            </div>
            <!-- <div class="right flex1" @scroll="handleCommentsScroll" v-loading="detailsLoading"> -->
            <div class="right flex1" ref="contentRightRef" v-loading="detailsLoading">
                <div class="header">
                    <div class="label flexflex" v-if="sectionn?.length || tags?.length || topicInfo.recommend == 1 || topicInfo.best == 1">
                        <img class="item icon" v-if="topicInfo.recommend == 1" src="@/assets/img/recommend-icon.png" />
                        <img class="item icon" v-if="topicInfo.best == 1" src="@/assets/img/essence-icon.png" />
                        <a class="item blue" v-for="item in sectionn" :key="item" :href="`https://f.gter.net/section/${item.uniqid}`" target="_blank">{{ item.name }}</a>
                        <a class="item" v-for="item in tags" :key="item" :href="`https://f.gter.net/tag/${item}?type=interviewexperience`" target="_blank">{{ item }}</a>
                    </div>
                    <div class="titletitle">{{ info["subject"] }}</div>
                    <div class="mj-header flexacenter">
                        <div class="mj-header-left flexacenter">
                            <el-popover placement="bottom-start" :width="140" trigger="click" popper-class="avatar-box-popper" :show-arrow="false">
                                <template #reference>
                                    <div class="flexacenter">
                                        <img class="mj-avatar" :src="info['avatar']" />
                                        <div class="user-name">{{ info["nickname"] || "匿名用户" }}</div>
                                    </div>
                                </template>

                                <div class="avatar-box flexflex" v-if="authorInfo['uniqid']">
                                    <!-- <div class="avatar-box flexflex"> -->
                                    <a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(authorInfo['uniqid'])">
                                        <img class="avatar-icon" src="@/assets/img/send-messages-icon.png" />
                                        发送信息
                                    </a>
                                    <a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(authorInfo['uniqid'])">
                                        <img class="avatar-icon" src="@/assets/img/homepage-icon.png" />
                                        TA的主页
                                    </a>
                                </div>
                            </el-popover>

                            <div class="time">{{ handleDate(info["releasetime"]) }}发布</div>

                            <!-- <div class="hide flexacenter" @click="openHide" v-if="permissions.includes('mj.hide')">
                                <img class="icon" src="@/assets/img/set-icon.png" />
                                隐藏
                            </div> -->
                        </div>
                        <div class="flexacenter" style="position: relative">
                            <a class="mj-header-right flexacenter" target="_blank" :href="info['threadurl']">
                                <img class="original-icon" src="@/assets/img/original-icon.png" />
                                论坛原帖
                            </a>
                            <div class="line"></div>
                            <div class="eye-box flexacenter">
                                <img class="eye-icon" src="@/assets/img/eye-icon.svg" />
                                {{ info["views"] }}
                            </div>

                            <div class="btn flexcenter" @click.stop="cutShow">
                                <img class="icon" src="@/assets/img/dot-dot-dot-gray.png" />
                            </div>

                            <div v-if="show">
                                <div class="mask" @click.stop="cutShow"></div>
                                <div class="operate">
                                    <div class="item" @click.stop="report(topicToken, 'topic')">举报</div>

                                    <template v-if="ismanager">
                                        <div class="item" @click.stop="hide">{{ topicInfo.hidden == 0 ? "隐藏" : "显示" }}</div>
                                        <div class="item" @click.stop="recommend">{{ topicInfo.recommend == 1 ? "取消" : "" }}推荐</div>
                                        <div class="item" @click.stop="essence">{{ topicInfo.best == 1 ? "取消" : "" }}精华</div>
                                    </template>

                                    <!-- <template v-if="ismyself">
                                        <div class="item" @click.stop="deleteItem">删除</div>
                                    </template> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="details-box">
                    <div class="details-item">
                        <div class="details-top">面试过程及内容</div>
                        <div class="details-list">
                            <div class="details-list-item flexacenter">
                                <div class="details-value describe" :class="{ 'unlock-unlock': !isdisplay }" v-if="info['message']">
                                    <div class="text" v-html="info['message']"></div>
                                    <div class="unlock-mask flexflex" style="width: 693px">
                                        <div class="unlock-text-box flexcenter" @click="handleLike">
                                            <div class="unlock-text">作者设置了浏览限制</div>
                                            <div class="unlock-text flexacenter">
                                                <div class="emphasis" @click="loginJudgment()">“评论/点赞”</div>
                                                后即可查看完整内容
                                            </div>
                                            <template v-if="respondListState">
                                                <div class="respond-list-mask" @click.stop="cutRespondState(false)"></div>
                                                <div class="respond-list-box" @click.stop="">
                                                    <div class="respond-list-title">选择你的回应：</div>
                                                    <div class="respond-list">
                                                        <template v-for="item in riposteoptions" :key="item">
                                                            <div class="respond-item" v-for="(item, key) in item.data" :key="key" v-html="jointriposte(key)" @click.stop="selectEomjiPop(key, true)"></div>
                                                        </template>
                                                    </div>
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="details-item">
                        <div class="details-top">申请信息</div>
                        <div class="details-list">
                            <div class="details-list-item flexacenter" v-if="info['school']">
                                <div class="details-name">学校</div>
                                <a class="details-value flex1" target="_blank" :href="info['school']?.['url']">{{ info["school"]?.name }}</a>
                            </div>
                            <div class="details-list-item flexacenter" v-if="info['profession']">
                                <div class="details-name">{{ info["project"] ? "" : "项目/" }}专业</div>
                                <div class="details-value flex1">{{ info["profession"] }}</div>
                            </div>
                            <div class="details-list-item flexacenter" v-if="info['project']">
                                <div class="details-name">项目{{ info["profession"] ? "" : "/专业" }}</div>
                                <div class="details-value flex1">{{ info["project"] }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="details-item">
                        <div class="details-top">面试时间</div>
                        <div class="details-list">
                            <div class="details-list-item flexacenter">
                                <div class="details-name">日期</div>
                                <div class="details-value date" v-if="info['interviewtime']">{{ timestampToDate(info["interviewtime"]) }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 回应 -->
                <div class="respond-area" v-if="false">
                    <div class="respond-title flexacenter" ref="respondtitle">
                        回应
                        <div class="value">{{ ripostecount.total || 0 }}</div>
                        <div v-if="ripostecount.user > 0" class="respond-list-btn" @click="openPopList">
                            共 <span class="respond-list-btn-amount">{{ ripostecount.user }}</span
                            >人回应
                            <img class="respond-list-btn-icon" src="@/assets/img/arrowsRight.svg" />
                        </div>
                    </div>
                    <div v-if="ripostelist.length == 0" class="respond-no-box flexacenter">
                        <div class="respond-no flex1">
                            <div v-for="item in randomEmojis" :key="item" class="code" v-html="jointriposte(item)" @click="selectEomji(item)"></div>
                        </div>
                        <RespondAdd></RespondAdd>
                    </div>
                    <div v-else class="respond-box">
                        <div v-for="(item, index) in ripostelist" :key="item" class="respond-item flexacenter" :class="{ pitch: item.selected }" @click="selectListEomji(index)">
                            <div class="code flexacenter" v-html="jointriposte(item.item)"></div>
                            {{ item.num }}
                        </div>
                        <div v-if="ripostelist.length < 3" class="respond-select flexflex">
                            <div class="respond-select-box flex1 flexflex">
                                <template v-for="(item, index) in randomEmojis" :key="item">
                                    <div v-if="index < 5" class="respond-select-item" v-html="jointriposte(item)" @click="selectEomji(item)"></div>
                                </template>
                            </div>
                            <RespondAdd></RespondAdd>
                        </div>
                        <RespondAdd v-else></RespondAdd>
                    </div>
                </div>

                <div v-if="emojiMaskState" class="emoji-box-mask" @click="closeEmoji()"></div>

                <!-- 讨论 -->
                <div class="comment-box" ref="commentBoxRef">
                    <!-- 编辑评论 -->
                    <div v-if="editCommentState" class="edit-comment flexcenter">
                        <div class="box">
                            <div class="text">编辑评论</div>
                            <div class="input-box">
                                <div class="top flexflex">
                                    <textarea ref="editInputRef" class="input-textarea flex1" maxlength="500" v-model="editInput" @focus="judgeLogin" @input="autoResize" @paste="handleInputPaste" placeholder="说说你的想法或疑问…"></textarea>
                                </div>
                                <div class="picture-box flexacenter" v-if="editPicture.length != 0">
                                    <div class="picture" v-for="item in editPicture" :key="item.url">
                                        <img class="close" @click="closeEditFileUpload(item.aid)" src="@/assets/img/close-icon.png" />
                                        <img class="img" @click="handleAnswerText" :src="item.url" />
                                    </div>
                                </div>

                                <div class="bottom flexacenter">
                                    <div class="operate flexacenter">
                                        <div class="item" :class="{ pitch: editEmojiState }" style="z-index: 2">
                                            <el-popover placement="left-start" popper-class="emoji-popover" :width="584" trigger="click" v-model:visible="editEmojiState" :teleported="false">
                                                <template #reference>
                                                    <img class="icon" src="@/assets/img/smiling-face.png" alt="" />
                                                </template>
                                                <div class="emoji-box">
                                                    <div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEditEmoji(item)">{{ item }}</div>
                                                </div>
                                            </el-popover>
                                        </div>
                                        <div class="item flexacenter" @click="handleEditFile()">
                                            <input class="file" type="file" @change="handleFileUpload($event)" accept=".png, .jpg, .jpeg" />
                                            <img class="icon" style="border-radius: 0" src="@/assets/img/picture-icon.png" alt="" />
                                            <span class="file-hint">最多可上传{{ maxPicture }}张图片，支持在输入框中直接粘贴图片。</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="btn-list flexacenter">
                                <div class="btn" @click="closeEdit()">取消</div>
                                <div class="btn send" @click="postEditComment()">发送</div>
                            </div>
                        </div>
                    </div>
                    <div class="comment-title flexacenter">
                        讨论
                        <div class="value">{{ commentComments || "" }}</div>
                    </div>
                    <!-- <div class="post-comment flexacenter" ref="postInputRef" :class="{ 'post-comment-focus': postCommentFocusState }" @click="loginJudgment()">
                        <div class="post-comment-input">
                            <el-input class="post-input flex1" type="textarea" :autosize="postCommentFocusState" :maxlength="500" show-word-limit placeholder="说说你的想法或疑问…" v-model="commentInputTop" @blur="postCommentFocusBlur" @focus="postCommentFocusState = true"></el-input>
                        </div>
                        <div class="post-ok flexcenter" @click="submitAnswerComments(commentInputTop)">发送</div>
                    </div> -->
                    <div class="input-box">
                        <div class="top flexflex">
                            <img class="avatar" v-if="user.avatar" :src="user.avatar" />
                            <textarea class="input-textarea flex1" maxlength="500" v-model="commentInputTop" @focus="judgeLogin" @input="autoResize" @paste="handleInputPaste" placeholder="说说你的想法或疑问…"></textarea>
                        </div>

                        <div class="picture-box flexacenter" v-if="picture.length != 0">
                            <div class="picture" v-for="(item, index) in picture" :key="index">
                                <img class="close" @click="closeFileUpload(item.aid)" src="@/assets/img/close-icon.png" />
                                <img class="img" @click="handleAnswerText" :src="item.url" />
                            </div>
                        </div>

                        <div class="bottom flexacenter">
                            <div class="operate flexacenter">
                                <div class="item" :class="{ pitch: emojiState }" style="z-index: 2">
                                    <el-popover placement="left" popper-class="emoji-popover" :width="625" trigger="click" v-model:visible="emojiState" :teleported="false">
                                        <template #reference>
                                            <img class="icon" src="@/assets/img/smiling-face.png" alt="" />
                                        </template>

                                        <div class="emoji-box">
                                            <div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item)">{{ item }}</div>
                                        </div>
                                    </el-popover>
                                </div>
                                <div class="item flexacenter" @click="judgeLogin()">
                                    <input class="file" type="file" @change="handleFileUpload($event)" accept=".png, .jpg, .jpeg" />
                                    <img class="icon" style="border-radius: 0" src="@/assets/img/picture-icon.png" alt="" />
                                    <span class="file-hint">最多可上传{{ maxPicture }}张图片，支持在输入框中直接粘贴图片。</span>
                                </div>
                            </div>
                            <div class="btn" @click="submitAnswerComments(commentInputTop)">发送</div>
                        </div>
                    </div>

                    <div class="empty-box" v-if="commentComments == 0">
                        <Empty hint="说说你的观点吧"></Empty>
                    </div>
                    <template v-else>
                        <div class="comment-list">
                            <div class="comment-item flexflex" v-for="(item, index) in commentList" :key="item.id">
                                <el-popover placement="bottom-start" :width="140" trigger="click" popper-class="avatar-box-popper" :show-arrow="false" v-model:visible="item['popoverState']">
                                    <template #reference>
                                        <img class="comment-avatar" :src="item.avatar || item.user['avatar']" />
                                    </template>

                                    <div class="avatar-box flexflex" v-if="item.uin || item.user['uin'] || item.uid || item.user['uid']">
                                        <a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(item.uniqid || item.user['uniqid'])">
                                            <img class="avatar-icon" src="@/assets/img/send-messages-icon.png" />
                                            发送信息
                                        </a>
                                        <a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(item.uniqid || item.user['uniqid'])">
                                            <img class="avatar-icon" src="@/assets/img/homepage-icon.png" />
                                            TA的主页
                                        </a>
                                    </div>
                                </el-popover>
                                <div class="comment-content flex1">
                                    <div class="comment-header flexacenter">
                                        <div class="comment-header-left flexacenter">
                                            <div class="comments-username" @click="openAvatarPopover(index)">{{ item.nickname || item.user["nickname"] || "匿名用户" }}</div>
                                            <div class="comments-time">{{ item["timestamp"] }}</div>
                                            <div class="comments-identity" v-if="item['isauthor']">作者</div>
                                            <img class="comments-title" v-if="item.groupimage || item?.user?.groupimage" :src="item.groupimage || item?.user?.groupimage" :alt="item?.user?.grouptitle" style="height: 18px" />
                                        </div>
                                        <div class="comment-header-right flexacenter">
                                            <div class="menu-box flexacenter">
                                                <img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" />
                                                <!-- <div class="report-box flexcenter" @click="report(item['token'])">举报</div> -->
                                                <div class="operate-box">
                                                    <div class="item flexcenter" @click="report(item['token'], 'comment')">举报</div>
                                                    <div class="item flexcenter" v-if="permissions.includes('comment.edit')" @click="openEdit(item['token'], index)">编辑</div>
                                                    <div class="item flexcenter" v-if="permissions.includes('comment.delete')" @click="commentDelete(item['token'], index)">删除</div>
                                                </div>
                                            </div>
                                            <img class="comment-icon" title="回复" @click="!item['childState'] ? openAnswerCommentsChild(index) : closeAnswerCommentsChild()" src="@/assets/img/comment-icon-gray.svg" />
                                            <div class="flexacenter like-box" @click="commentLike(index)">
                                                <img class="like-icon" v-if="item['islike'] == 1" src="@/assets/img/like-red-pitch.png" />
                                                <img class="like-icon" v-else src="@/assets/img/like-icon-gray.png" />
                                                <div class="like-quantity">{{ item["likenum"] || 0 }}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="comment-text" v-if="item['content']" @click="!item['childState'] ? openAnswerCommentsChild(index) : closeAnswerCommentsChild()" v-html="item['content']"></div>
                                    <div class="comments-img-box flexacenter" v-if="item.attachments?.images?.length != 0" style="overflow: auto; width: 719px">
                                        <img class="comments-img" v-for="(item, index) in item.attachments?.images" :key="index" @click="handleAnswerText" :src="item.thumb || item.url" />
                                    </div>
                                    <div class="input-box" v-if="item['childState']">
                                        <img class="cross" @click="closeAnswerCommentsChild()" src="@/assets/img/cross-icon.png" />
                                        <div class="top flexflex">
                                            <img class="avatar" v-if="user.avatar" :src="user.avatar" />
                                            <textarea class="input-textarea flex1" maxlength="500" placeholder="说说你的想法或疑问…" v-model="item['commentInput']" @focus="judgeLogin" @input="autoResize" @paste="handleInputPaste($event, index)"></textarea>
                                        </div>

                                        <div class="picture-box flexacenter" v-if="item?.picture?.length != 0">
                                            <div class="picture" v-for="it in item.picture" :key="it.url">
                                                <img class="close" @click="closeFileUpload(it.aid, index)" src="@/assets/img/close-icon.png" />
                                                <img class="img" @click="handleAnswerText" :src="it.url" />
                                            </div>
                                        </div>
                                        <div class="bottom flexacenter">
                                            <div class="operate flexacenter">
                                                <div class="item" :class="{ pitch: item.emojiState }" style="z-index: 2">
                                                    <el-popover placement="left" popper-class="emoji-popover" :width="625" trigger="click" v-model:visible="item.emojiState" :teleported="false">
                                                        <template #reference>
                                                            <img class="icon" src="@/assets/img/smiling-face.png" alt="" />
                                                        </template>

                                                        <div class="emoji-box">
                                                            <div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item, index)">{{ item }}</div>
                                                        </div>
                                                    </el-popover>
                                                </div>
                                                <div class="item flexacenter" @click="judgeLogin()">
                                                    <input class="file" type="file" @change="handleFileUpload($event, index)" accept=".png, .jpg, .jpeg" />
                                                    <img class="icon" style="border-radius: 0" src="@/assets/img/picture-icon.png" alt="" />
                                                    <span class="file-hint">最多可上传{{ maxPicture }}张图片，支持在输入框中直接粘贴图片。</span>
                                                </div>
                                            </div>
                                            <div class="btn" @click="submitAnswerComments(item['commentInput'], index)">发送</div>
                                        </div>
                                    </div>

                                    <!-- 子评论 -->
                                    <div class="child-comments" v-if="item['child'].length > 0">
                                        <div class="comment-item flexflex" v-for="(ite, i) in item['child']" :key="ite.id">
                                            <el-popover placement="bottom-start" :width="140" trigger="click" popper-class="avatar-box-popper" :show-arrow="false" v-model:visible="ite['popoverState']">
                                                <template #reference>
                                                    <img class="comment-avatar" :src="ite.avatar || ite.user['avatar']" />
                                                </template>

                                                <div class="avatar-box flexflex" v-if="ite.uniqid || ite.user['uniqid']">
                                                    <a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(ite.uniqid || ite.user['uniqid'])">
                                                        <img class="avatar-icon" src="@/assets/img/send-messages-icon.png" />
                                                        发送信息
                                                    </a>
                                                    <a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(ite.uniqid || ite.user['uniqid'])">
                                                        <img class="avatar-icon" src="@/assets/img/homepage-icon.png" />
                                                        TA的主页
                                                    </a>
                                                </div>
                                            </el-popover>
                                            <div class="comment-content flex1">
                                                <div class="comment-header flexacenter">
                                                    <div class="comment-header-left flexacenter">
                                                        <div class="comments-username" @click="openAvatarPopover(index, i)">{{ ite.nickname || ite.user["nickname"] || "匿名用户" }}</div>
                                                        <div class="comments-time">{{ ite["timestamp"] }}</div>
                                                        <div class="comments-identity" v-if="ite['isauthor']">作者</div>
                                                        <img class="comments-title" v-if="ite['groupimage']" :src="ite.groupimage" :alt="ite.grouptitle" style="height: 17px" />
                                                    </div>
                                                    <div class="comment-header-right flexacenter">
                                                        <div class="menu-box flexacenter">
                                                            <img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" />
                                                            <div class="operate-box">
                                                                <div class="item flexcenter" @click="report(ite['token'], 'comment')">举报</div>
                                                                <div class="item flexcenter" v-if="permissions.includes('comment.edit')" @click="openEdit(ite['token'], index, i)">编辑</div>
                                                                <div class="item flexcenter" v-if="permissions.includes('comment.delete')" @click="commentDelete(ite['token'], index, i)">删除</div>
                                                            </div>
                                                        </div>
                                                        <img class="comment-icon" title="回复" @click="!ite['childState'] ? openAnswerCommentsChild(index, i) : closeAnswerCommentsChild()" src="@/assets/img/comment-icon-gray.svg" />
                                                        <div class="flexacenter like-box" @click="commentLike(index, i)">
                                                            <img class="like-icon" v-if="ite['islike'] == 1" src="@/assets/img/like-red-pitch.png" />
                                                            <img class="like-icon" v-else src="@/assets/img/like-icon-gray.png" />
                                                            <div class="like-quantity">{{ ite["likenum"] || 0 }}</div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="comment-text" v-if="ite['content']" @click="!ite['childState'] ? openAnswerCommentsChild(index, i) : closeAnswerCommentsChild()">
                                                    <div class="comments-reply" v-if="ite?.reply?.nickname">@{{ ite?.reply?.nickname }}</div>
                                                    {{ ite["content"] }}
                                                </div>
                                                <div class="comments-img-box flexacenter" v-if="ite.attachments?.images?.length != 0" style="overflow: auto; width: 688px">
                                                    <img class="comments-img" v-for="(item, index) in ite.attachments?.images" :key="index" @click="handleAnswerText" :src="item.thumb || item.url" />
                                                </div>
                                                <div class="input-box" v-if="ite['childState']">
                                                    <img class="cross" @click="closeAnswerCommentsChild()" src="@/assets/img/cross-icon.png" />
                                                    <div class="top flexflex">
                                                        <textarea class="input-textarea flex1" maxlength="500" :placeholder="'回复“' + (ite['nickname'] || ite.user['nickname'] || '匿名用户') + '”：'" v-model="ite['commentInput']" @input="autoResize" @paste="handleInputPaste($event, index)"></textarea>
                                                    </div>
                                                    <div class="picture-box flexacenter" v-if="ite.picture?.length != 0" style="width: 688px">
                                                        <div class="picture" v-for="it in ite.picture" :key="it.url">
                                                            <img class="close" @click="closeFileUpload(it.aid, index, i)" src="@/assets/img/close-icon.png" />
                                                            <img class="img" @click="handleAnswerText" :src="it.url" />
                                                        </div>
                                                    </div>
                                                    <div class="bottom flexacenter">
                                                        <div class="operate flexacenter">
                                                            <div class="item" :class="{ pitch: ite.emojiState }" style="z-index: 2">
                                                                <el-popover placement="left" popper-class="emoji-popover" :width="625" trigger="click" v-model:visible="ite.emojiState" :teleported="false">
                                                                    <template #reference>
                                                                        <img class="icon" src="@/assets/img/smiling-face.png" alt="" />
                                                                    </template>

                                                                    <div class="emoji-box">
                                                                        <div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item, index, i)">{{ item }}</div>
                                                                    </div>
                                                                </el-popover>
                                                            </div>
                                                            <div class="item flexacenter" @click="judgeLogin()">
                                                                <input class="file" type="file" @change="handleFileUpload($event, index, i)" accept=".png, .jpg, .jpeg" />
                                                                <img class="icon" style="border-radius: 0" src="@/assets/img/picture-icon.png" alt="" />
                                                                <span class="file-hint">最多可上传{{ maxPicture }}张图片，支持在输入框中直接粘贴图片。</span>
                                                            </div>
                                                        </div>
                                                        <div class="btn" @click="submitAnswerComments(ite['commentInput'], index, i)">发送</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 还有几个 -->
                                    <div class="comments-also flexacenter" v-if="item['childnum'] > item['child'].length" @click="alsoCommentsData(index)">
                                        <div class="">还有{{ item["childnum"] - item["child"].length }}条回复</div>
                                        <img class="also-icon" src="@/assets/img/arrow-circular-gray.png" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="comment-end" v-if="commentPage == 0 && commentList.length != 0">· End ·</div>
                    </template>
                </div>
            </div>

            <div class="floor-area flexacenter" @click="closeAnswerCommentsChild()">
                <div class="floor-content flexacenter">
                    <div class="floor-right flexacenter" @mouseenter="handleFloorRight(true)" @mouseleave="handleFloorRight(false)">
                        手机查看该面经
                        <img class="arrows-icon" src="@/assets/img/arrows-icon.png" />
                        <el-popover placement="bottom" width="160px" trigger="hover" v-model:visible="floorRightState" popper-style="padding: 24px;border-radius: 18px;">
                            <template #reference>
                                <div class="QR-code-ball flexcenter">
                                    <img class="" src="@/assets/img/QR-code-icon.svg" />
                                </div>
                            </template>
                            <img class="examine-code" :src="qrcode" />
                        </el-popover>
                    </div>

                    <div class="floor-left flexacenter">
                        <ClientOnly>
                            <div class="item flexacenter" @click="handleLike">
                                <img class="icon pitch" v-if="islike == 1" src="@/assets/img/like-red-pitch.png" />
                                <img class="icon" v-else src="@/assets/img/like-icon.png" />
                                <div>{{ topicInfo["likes"] || "赞" }}</div>
                            </div>

                            <div class="item flexacenter" @click="handleCollect()">
                                <img class="icon" v-if="iscollection == 1" src="@/assets/img/collect-icon-colours.svg" />
                                <img class="icon" v-else src="@/assets/img/collect-icon.png" />
                                <div>{{ topicInfo["collections"] || "收藏" }}</div>
                            </div>

                            <div class="item flexacenter" style="cursor: auto"><img class="icon" src="@/assets/img/discuss-black-icon.png" />{{ commentComments }}</div>

                            <div class="item flexacenter" @click="openBi()">
                                <img class="icon" src="@/assets/img/bi-black-icon.png" />
                                <div class="coinText" id="coinText">{{ topicInfo.coins || "投币" }}</div>
                            </div>
                        </ClientOnly>

                        <ClientOnly>
                            <el-popover placement="bottom" width="628px" trigger="click" popper-style="padding: 0;border-radius: 10px;" v-model:visible="transmitBoxState">
                                <template #reference>
                                    <div class="item flexacenter" @click="handleShare"><img class="icon" src="@/assets/img/transmit-icon.png" />转发</div>
                                </template>

                                <div class="transmit-box flexflex">
                                    <img class="cross-icon" @click="transmitBoxState = false" src="@/assets/img/cross-icon.png" />
                                    <div class="transmit-left transmit-web">
                                        <div class="transmit-title">转发网页版</div>
                                        <div class="transmit-content">
                                            <div class="transmit-headline">{{ info["subject"] }}</div>
                                            <div class="transmit-url">{{ getFullUrl() }}</div>
                                        </div>
                                        <div class="transmit-web-btn flexcenter" @click="copyText(`${info['subject']} + ${getFullUrl()}`)">复制链接</div>
                                    </div>
                                    <div class="transmit-right transmit-mini">
                                        <div class="transmit-title">转发小程序版</div>
                                        <div class="transmit-content flexcenter">
                                            <img class="transmit-mini-img" :src="qrcode" />
                                            <div class="flexcenter">
                                                <img class="give-sweep" src="@/assets/img/give-sweep.png" />
                                                扫码转发该面经
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </el-popover>
                        </ClientOnly>
                    </div>
                </div>
            </div>
        </div>
        <Report v-if="reportAlertShow" :reportToken="reportToken" :reportType="reportType"></Report>
    </div>

    <!-- 投币操作 弹窗 -->
    <div class="pop-masking flexcenter" v-if="isInsertCoinsOperationShow">
        <div class="slit-pop-box" v-if="coinMybalance > 0" style="border-radius: 11px">
            <div class="slit-left" style="width: 50px">
                <img class="slit-left-icon" src="//app.gter.net/image/gter/offer/imgdetails/u620.png" style="margin-top: -8px" />
            </div>
            <div class="slit-box">
                <div class="slit-head" style="flex: 1; flex-direction: column; align-items: flex-start">
                    <div class="slit-head-title flexflex" style="width: 100%; justify-content: space-between">
                        <span>投币</span>
                        <div class="in-all">
                            你共有 <span>{{ coinMybalance }}</span> 寄托币
                        </div>

                        <!-- <a target="_blank" :href="coinConfig.strategy.url" style="font-weight: 100; font-size: 13px; text-decoration: underline;">{{ coinConfig.strategy.button }}</a> -->
                    </div>
                </div>
                <div class="coin-quantity flexacenter">
                    <div class="coin-quantity-item" :class="{ 'coin-pitch': coinAmount == item }" v-for="(item, index) in coinConfig.list" :key="index" @click="coinSelectAmountDispose(item)">
                        {{ item }} <span>{{ coinConfig.unit }}</span>
                    </div>
                </div>
                <el-input class="slit-input" v-model="coinAmount" placeholder="自定义投币金额" show-word-limit="false"> </el-input>
                <div class="message-box">
                    <div class="message-hint">顺便说点什么</div>
                    <el-input class="slit-input" style="font-size: 15px" v-model="coinMessage" placeholder="请输入" maxlength="500" show-word-limit> </el-input>
                </div>

                <div class="operation">
                    <div class="operation-item flexcenter" @click="isInsertCoinsOperationShow = !isInsertCoinsOperationShow">取消</div>
                    <div class="operation-item flexcenter greenBj" @click="postCoinSbmit()">确定</div>
                </div>
            </div>
        </div>
        <div class="no-jituobi-pop-box" v-else>
            <img class="no-jituobi-close" @click="isInsertCoinsOperationShow = !isInsertCoinsOperationShow" src="@/assets/img/cross-icon.png" />
            <div class="no-jituobi-head flexacenter">
                <img class="bi-icon" src="//app.gter.net/image/gter/offer/imgdetails/u620.png" style="margin-right: 12px" />
                <span style="margin-top: 10px">
                    {{ coinConfig?.strategy?.tips }}
                </span>
            </div>

            <a :href="coinConfig?.strategy?.url" target="_blank">
                <div class="strategy-btn greenBj flexcenter">{{ coinConfig?.strategy?.button }}<img class="strategy-icon" src="@/assets/img/strategy-icon.svg" /></div>
            </a>
        </div>
    </div>

    <!-- 投币 排行榜 -->
    <RankingBox v-if="coinrankingState" :coinrankingList="coinrankingList"></RankingBox>

    <div class="respond-pop-mask" v-if="respondPopListState">
        <div class="respond-pop">
            <div class="respond-pop-no" v-if="JSON.stringify(respondDetail) == '{}'">
                <img class="respond-title-icon" @click="closePopList()" src="@/assets/img/cross-grey.png" />
                <img src="@/assets/img/no-discussion.png" class="respond-pop-no-icon" />
                <div class="respond-pop-no-text">- 暂无数据 -</div>
            </div>
            <template v-else>
                <div class="respond-pop-title">
                    共<span class="respond-pop-amount">{{ ripostecount.user }}</span
                    >人回应
                    <img class="respond-title-icon" @click="closePopList()" src="@/assets/img/cross-grey.png" />
                </div>
                <div class="respond-list">
                    <div class="respond-item" v-for="(item, index) in respondDetail" :key="index">
                        <div class="respond-code" :class="{ pitch: item.selected }" v-html="jointriposte(item.item)" @click="selectEomjiListPop(item.item)"></div>
                        <div class="respond-content flex1">
                            <div class="respond-total">{{ item.user.length }} 人作此回应</div>
                            <div class="user-item" v-for="(item, index) in item.user" :key="index" @click="TAHomePage(item['uin'])">
                                <img class="user-avatar" :src="item.avatar" />
                                {{ item.nickname || item.username }}
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>

    <!-- 大图 -->
    <div class="detail-image-mask flexcenter" v-if="dialogSrc" @click="dialogSrc = ''">
        <div class="detail-image flexcenter">
            <img class="detail-img" :src="dialogSrc" />
        </div>
    </div>

    <el-dialog v-model="dialogVisible" title="提示" width="500">
        <span>确定隐藏该面经吗？</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleHide">确 定</el-button>
            </div>
        </template>
    </el-dialog>
    <Like v-if="isLikeGif"></Like>

    <bi-card :coins="topicInfo.coins" :token="topicToken" pagetpye="mj"></bi-card>
</template>

<script setup>
import { ElMessage } from "element-plus";
const route = useRoute();
let uniqid = route.params.id;
let user = inject("userInfo");
let isNeedLogin = inject("isNeedLogin");
const goLogin = inject("goLogin");

let openAttest = inject("openAttest");
const realname = inject("realname");

useHead({ script: [{ src: "https://app.gter.net/bottom?tpl=header&menukey=mj" }, { src: "https://app.gter.net/bottom?tpl=footer,popupnotification", body: true }, { src: "https://app.gter.net/image/gter/commonCom/bi/bi.js" }] });

let contentRightRef = ref(null);
let contentRightHeight = ref(null);

onMounted(() => {
    window.addEventListener("scroll", handleScroll);
    getDetails();
    // openObserverBottom()
    // 在元素挂载后执行回调函数
    nextTick(() => {
        // 创建 ResizeObserver 实例
        const observer = new ResizeObserver((entries) => {
            for (const entry of entries) {
                // 元素的高度变化
                contentRightHeight.value = entry.contentRect.height;
            }
        });
        // 监听元素的变化
        observer.observe(contentRightRef.value);
    });

    clearBottom();

    checkWConfig();
});

const maxPicture = ref(10);

const checkWConfig = () => {
    const wConfig = JSON.parse(localStorage.getItem("wConfig")) || {};
    if (wConfig.time) {
        const time = new Date(wConfig.time);
        const now = new Date();
        if (now - time > 24 * 60 * 60 * 1000) getWConfig();
        else {
            const config = wConfig.config || {};
            maxPicture.value = config.topic_image_count;
        }
    } else {
        getWConfig();
    }
};

const getWConfig = () => {
    getWConfigHttp().then((res) => {
        if (res.code != 200) return;
        let data = res["data"] || {};
        const config = data.config || {};

        maxPicture.value = config.topic_image_count;
        data.time = new Date().toISOString();
        localStorage.setItem("wConfig", JSON.stringify(data));
    });
};

let floorAreaState = ref(false); // 底部操作显示状态

watch(
    () => route.path,
    (newValue, oldValue) => {
        // 在这里处理route.path的变化
        if (typeof window !== "undefined" && route.path) {
            if (window._hmt) window._hmt.push(["_trackPageview", route.fullPath]);
            if (window._czc) {
                let location = window.location;
                let contentUrl = location.pathname + location.hash;
                let refererUrl = "/";
                window._czc.push(["_trackPageview", contentUrl, refererUrl]);
                window._czc.push(["_setAutoPageview", false]);
            }
        }
    }
);

// 开启一个监听最底部是否在可视窗口内
const openObserverBottom = () => {
    // 获取目标元素的引用
    const target = document.querySelector("section.index-footer");
    if (!target) {
        openObserverBottom();
        return;
    }

    // 创建一个 Intersection Observer 实例
    const observer = new IntersectionObserver(
        (entries, observer) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) floorAreaState.value = false;
                else floorAreaState.value = true;
            });
        },
        {
            root: null,
            threshold: 0.5,
        }
    );

    // 开始观察目标元素
    observer.observe(target);
};

// 清除底部的次数
let clearBottomCount = 0;

// 清除 底部
const clearBottom = () => {
    const indexFooter = document.querySelector("section.index-footer");
    if (!indexFooter) {
        clearBottomCount++;
        setTimeout(() => clearBottom(), 200);
        return;
    }
    if (clearBottomCount == 5) return;

    indexFooter.style.display = "none";
};

// 清空全部数据
const clearAllData = () => {
    uniqid = route.params.id;

    info.value = {};
    qrcode.value = "";
    iscollection.value = 0;
    isdisplay.value = true;
    islike.value = 0;
    ismyself.value = 0;

    relatedlist.value = [];
    relatedcount.value = 0;

    pitchIndex.value = null;

    seo.value = {};
    commentCount.value = 0;
    commentPage.value = 1;
    commentList.value = [];
    commentLoading = false;
    token = "";
};

let floorRightState = ref(false); // 右下角 的二维码显示状态

// 处理右下角 鼠标经过箭头 展示二维码
const handleFloorRight = (value) => {
    floorRightState.value = value;
};

// 转发弹窗 的 显示状态
let transmitBoxState = ref(false);

let info = ref({});
let qrcode = ref(""); // 分享二维码
let iscollection = ref(0); // 是否收藏
let isdisplay = ref(true); // 是否隐藏
let islike = ref(0); // 是否点赞
let ismyself = ref(0); // 是否是作者
let detailsLoading = ref(false); // 详情加载中

const getDetails = () => {
    if (detailsLoading.value) return;
    detailsLoading.value = true;

    detailsHttp({ uniqid }).then((res) => {
        if (res.code != 200) {
            ElMessage.error(res.message);
            setTimeout(() => goToURL("/index.html", false), 1000);
            return;
        }
        let data = res.data;
        token = data["token"];
        info.value = data["info"];
        seo.value = data.seo;
        iscollection.value = data.iscollection || 0;
        isdisplay.value = data.isdisplay;
        islike.value = data.islike;
        // ismyself.value = data.ismyself;
        // qrcode.value = data["share"]["qrcode"];

        if (relatedlist.value.length == 0) getRelatedlistHttp();
        else CalculateSelectedList();

        if (JSON.stringify(coinConfig.value) == "{}") getCoinInfo();

        detailsLoading.value = false;
        // getRiposte();

        console.log("data", data);

        const topic = data.topic;
        console.log("topic", topic);
        getTopicDetail(topic.uniqid);
    });
};

let topicToken = ref("");
let topicInfo = ref({});
let sectionn = ref([]);
let tags = ref([]);

provide("topicInfo", topicInfo);

provide("topicToken", topicToken);

let authorInfo = ref({});

const getTopicDetail = (uniqid) => {
    topicDetailHttp({ uniqid }).then((res) => {
        if (res.code != 200) {
            ElMessage.error(res.message);
            return;
        }
        let data = res.data;
        topicToken.value = data.token;
        authorInfo.value = data.authorInfo;

        const targetInfo = data.info;
        if (!targetInfo.hidden) targetInfo.hidden = 0;

        const sectionNameSet = new Set(targetInfo.sectionn.map((item) => item.name));
        if (targetInfo.tags) {
            const newTag = targetInfo?.tags.filter((tagName) => !sectionNameSet.has(tagName));
            tags.value = newTag;
        }

        sectionn.value = targetInfo.sectionn;

        topicInfo.value = targetInfo;

        ismyself.value = data.ismyself;

        getCommentListHttp();

        if (data.islogin) getTopicOperation();

        getQrcode();
    });
};

const getQrcode = () => {
    getQrcodeHttp({ token: topicToken.value }).then((res) => {
        if (res.code != 200) return;
        const data = res.data || [];
        qrcode.value = data.url || "";
    });
};

const getTopicOperation = () => {
    topicgetOperationHttp({
        token: topicToken.value,
        actions: ["like", "collection"],
    })
        .then((res) => {
            console.log("res", res);

            const data = res.data;
            const like = data.like;
            const collection = data.collection;

            islike.value = like.status;
            iscollection.value = collection.status;
        })
        .catch((err) => {
            console.log("err", err);
        });
};

// 计算选中的列表
const CalculateSelectedList = () => {
    let targetRelatedlist = [...relatedlist.value];
    targetRelatedlist.forEach((element, index) => {
        if (element["uniqid"] == uniqid) pitchIndex.value = index;
    });

    if (pitchIndex.value == null) {
        targetRelatedlist.unshift({
            avatar: info.value["avatar"],
            interviewtime: timestampToDate(info.value["interviewtime"]),
            profession: info.value["profession"],
            project: info.value["project"],
            releasetime: info.value["releasetime"],
            subject: info.value["subject"],
            uniqid: uniqid,
            username: info.value["nickname"],
        });
        relatedlist.value = targetRelatedlist;
        pitchIndex.value = 0;
    }
};

// 左侧列表数据
let relatedlist = ref([]);
let relatedcount = ref(0);
let relatedpage = ref(1);
let relatedloading = false;

let pitchIndex = ref(null); // 列表选中 index

const getRelatedlistHttp = () => {
    if (relatedloading || relatedpage.value == 0 || !token) return;

    relatedloading = true;
    relatedlistHttp({ token, page: relatedpage.value })
        .then((res) => {
            if (res.code != 200) return;

            let data = res.data;

            relatedlist.value = relatedlist.value.concat(data.data);
            relatedcount.value = data.count;

            if (relatedlist.value.length >= data["count"]) relatedpage.value = 0;
            else relatedpage.value++;

            CalculateSelectedList();
        })
        .finally(() => {
            relatedloading = false;
        });
};

let seo = ref({});
let commentCount = ref(0);
let commentComments = ref(0); // 所有的评论数
let commentPage = ref(1);
let commentList = ref([]);
let commentLoading = false;
let token = "";
let isEmptyState = ref(false); // 评论是否为空

// 获取详情评论数据
const getCommentListHttp = () => {
    if (commentPage.value == 0 || commentLoading || detailsLoading.value) return;
    commentLoading = true;

    if (commentPage.value != 1) getRelatedlistHttp();

    detailsCommentListHttp({
        page: commentPage.value,
        childlimit: 3,
        limit: 10,
        token: topicToken.value,
    })
        .then((res) => {
            if (res.code != 200) {
                isEmptyState.value = true;
                return;
            }

            let data = res.data;

            data.data.forEach((element, index) => {
                element.timestamp = strtimeago(element.created_at, 4);
                element["picture"] = [];
                element["isReplyBoxShow"] = 0;

                if (element.child.length > 0) {
                    element.child.forEach((el) => {
                        el["picture"] = [];
                        el.timestamp = strtimeago(el.created_at, 4);
                        el["isReplyBoxShow"] = 0;
                    });
                }
            });

            commentCount.value = data["count"];
            if (data["count"] == 0) isEmptyState.value = true;
            else isEmptyState.value = false;

            commentList.value = commentList.value.concat(data["data"]);

            commentComments.value = data["commentcount"];

            if (commentList.value.length == data["count"]) commentPage.value = 0;
            else commentPage.value++;
        })
        .finally(() => (commentLoading = false));
};

// 获取剩下的子评论
const alsoCommentsData = (index, ind) => {
    if (isNeedLogin.value) {
        goLogin();
        return;
    }

    let targetCommentItem = { ...commentList.value[index] };
    const parentid = targetCommentItem["id"];
    let page = targetCommentItem["childPage"] ?? 1;

    detailsChildCommentListHttp({
        childlimit: 3,
        limit: 2000,
        page,
        parentid,
        token: topicToken.value,
    }).then((res) => {
        if (res.code != 200) return;
        let data = res.data;

        data.data.forEach((element, index) => {
            element.timestamp = strtimeago(element.created_at, 4);
            element["isReplyBoxShow"] = 0;
            element["picture"] = [];
        });

        let merged = [...commentList.value[index]["child"], ...data.data.filter((item2) => !commentList.value[index]["child"].find((item1) => item1.id == item2.id))];

        commentList.value[index]["child"] = merged;

        // let childData = targetCommentItem.child.concat(data.data);

        // // 检查当前对象在数组中的第一个索引是否与当前索引相等
        // const filteredData = childData.filter((obj, index, self) => {
        //     return self.findIndex((item) => item.id == obj.id) == index;
        // });

        // targetCommentItem.child = filteredData;
        // targetCommentItem["childnum"] = data.count;

        // if (targetCommentItem.child.length == data["count"]) page = 0;
        // else page++;

        // targetCommentItem["childPage"] = page;

        // commentList.value[index] = targetCommentItem;
    });
};

// 全部的启动到底部
const handleCommentsScroll = (e) => {
    const el = e.target;
    if (el.scrollHeight - el.scrollTop >= el.clientHeight + 40) return;
    getCommentListHttp();
};

// 评论点赞
const commentLike = (index, i) => {
    if (realname.value == 0 && user.value.uin > 0) {
        openAttest();
        return;
    }

    if (isNeedLogin.value) {
        goLogin();
        return;
    }

    const targetCommentList = [...commentList.value];

    let token = "";
    if (i != null) token = targetCommentList[index]["child"][i].token;
    else token = targetCommentList[index].token;

    detailsLikeCommentHttp({ token }).then((res) => {
        if (res.code != 200) return;
        let data = res.data;

        const status = data["status"];

        if (i != null) {
            targetCommentList[index]["child"][i].islike = status;
            targetCommentList[index]["child"][i].likenum = data["count"];
        } else {
            targetCommentList[index].islike = status;
            targetCommentList[index].likenum = data["count"];
        }

        ElMessage.success(res.message);

        if (status) {
            isLikeGif.value = false;
            nextTick(() => {
                isLikeGif.value = true;
                setTimeout(() => (isLikeGif.value = false), 2000);
            });
        }
    });
};

let scrollTopValue = ref(0);

// 监听滚动到底部
const handleScroll = () => {
    // return
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    scrollTopValue.value = scrollTop;

    // return

    const scrollHeight = document.documentElement.scrollHeight;
    const clientHeight = document.documentElement.clientHeight;
    // 列表下 滑动到底部 获取新数据
    if (scrollTop + clientHeight >= scrollHeight - 40) {
        getCommentListHttp();
        // 整个页面滚动到底部时 判断左边是否有滚动条 没有则需要加载左边数据的下一页
        const mjList = document.querySelector(".content .left .mj-list");
        if (!(mjList.scrollHeight > mjList.clientHeight || mjList.scrollWidth > mjList.clientWidth)) getRelatedlistHttp();
    }
};

// 打开 回答-评论 的子评论
const openAnswerCommentsChild = (index, i) => {
    if (realname.value == 0 && user.value.uin > 0) {
        openAttest();
        return;
    }

    if (isNeedLogin.value) {
        goLogin();
        return;
    }

    closeAnswerCommentsChild();
    if (i == null) commentList.value[index]["childState"] = true;
    else commentList.value[index]["child"][i]["childState"] = true;
};

// 关闭 回答-评论 的子评论
const closeAnswerCommentsChild = () => {
    if (realname.value == 0 && user.value.uin > 0) {
        openAttest();
        return;
    }

    commentList.value.forEach((ele) => {
        ele["childState"] = false;
        if (ele["child"] && ele["child"].length != 0) ele["child"].forEach((el) => (el["childState"] = false));
    });

    // commentInput.value = "";
    // commentList.value.forEach((ele) => {
    //     ele["childState"] = false;
    //     ele["commentInput"] = ""; // 删除原本输入值
    //     if (ele["child"] && ele["child"].length != 0) {
    //         ele["child"].forEach((el) => {
    //             el["childState"] = false;
    //             el["commentInput"] = "";
    //         });
    //     }
    // });
};

// 讨论的输入框
let commentInputTop = ref("");
let commentInput = ref("");

// 提交回答-评论
const submitAnswerComments = (content, index, i) => {
    if (realname.value == 0 && user.value.uin > 0) {
        openAttest();
        return;
    }
    if (isNeedLogin.value) {
        goLogin();
        return;
    }

    const targetCommentList = [...commentList.value];
    let parentid = null;

    let image = [];

    if (i != null) {
        parentid = targetCommentList[index]["child"][i]["id"];
        image = commentList.value[index]["child"][i]["picture"] || [];
    } else if (index != null) {
        parentid = targetCommentList[index]["id"];
        image = commentList.value[index]["picture"] || [];
    } else image = picture.value;

    const attachments = {
        images: image,
    };

    detailsSubmitommentListHttp({
        content,
        token: topicToken.value,
        replyid: parentid,
        attachments,
    }).then((res) => {
        if (res.code != 200) {
            ElMessage.error(res.message);
            return;
        }

        let data = res.data;
        const timestamp = strtimeago(new Date());

        isdisplay.value = true;

        if (i != null) {
            targetCommentList[index]["child"][i]["commentInput"] = "";
            targetCommentList[index]["child"][i]["picture"] = [];
            let targetData = {
                id: data["commentid"],
                content,
                isauthor: 1,
                islike: 0,
                likenum: 0,
                reply: {
                    nickname: targetCommentList[index]["child"][i]["nickname"],
                },
                ...data,
                attachments,
                picture: [],
                timestamp,

                uin: user.value.uin,
                uid: user.value.uid,
            };

            targetCommentList[index]["child"].unshift(targetData);
            targetCommentList[index]["childnum"]++;
        } else {
            let targetData = {
                id: data["commentid"],
                content,
                isauthor: 1,
                islike: 0,
                likenum: 0,
                ...data,
                timestamp,
                child: [],
                attachments,
                uin: user.value.uin,
                uid: user.value.uid,
                picture: [],
                childnum: 0,
            };
            if (index != null) {
                targetCommentList[index]["commentInput"] = "";
                targetCommentList[index]["picture"] = [];
                targetCommentList[index]["child"].unshift(targetData);
                targetCommentList[index]["childnum"]++;
            } else {
                targetCommentList.unshift(targetData);
                commentCount.value++;
            }
        }
        commentComments.value++;
        commentList.value = targetCommentList;

        // 请求 输入框的数据
        commentInputTop.value = "";
        commentInput.value = "";
        isEmptyState.value = false; // 取消有可能的 没有评论

        closeAnswerCommentsChild();

        picture.value = [];

        ElMessage({
            message: res.message,
            type: "success",
        });

        if (!isdisplay.value) isdisplay.value = true;
    });
};

// 处理时间戳数据
const timestampToDate = (timestamp) => {
    const date = new Date(timestamp * 1000); // 如果你的时间戳是秒级的，需要乘以1000
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, "0"); // getMonth() 返回的月份是从0开始计数的
    const day = date.getDate().toString().padStart(2, "0");

    return `${year}-${month}-${day}`;
};

onUnmounted(() => window.removeEventListener("scroll", handleScroll));

// 获取完整 url
const getFullUrl = () => {
    if (typeof window === "undefined") return;
    return window.location.href;
};

// 复制
let copyText = (text) => {
    if (navigator.clipboard) {
        copyText = () => {
            navigator.clipboard.writeText(text);
            ElMessage({
                message: "复制成功",
                type: "success",
            });
        };
    } else {
        copyText = () => {
            var tempInput = document.createElement("input");
            tempInput.value = text;
            document.body.appendChild(tempInput);
            tempInput.select();
            document.execCommand("copy");
            document.body.removeChild(tempInput);
            ElMessage({
                message: "复制成功",
                type: "success",
            });
        };
    }
    copyText();
};

// 点赞
let isLikeGif = ref(false);

// 点击点赞
const handleLike = () => {
    if (realname.value == 0 && user.value.uin > 0) {
        openAttest();
        return;
    }
    if (islike.value) {
        ElMessage.error("不可取消点赞");
        return;
    }
    if (isNeedLogin.value) {
        goLogin();
        return;
    }
    operateLikeHttp({ token: topicToken.value }).then((res) => {
        if (res.code != 200) {
            ElMessage.error(res.message);
            return;
        }

        let data = res.data;
        const status = data["status"];

        topicInfo.value["likes"] = data["likes"];
        islike.value = status;

        isdisplay.value = true;
        ElMessage.success(res.message);

        if (status) {
            isLikeGif.value = false;
            nextTick(() => {
                isLikeGif.value = true;
                setTimeout(() => (isLikeGif.value = false), 2000);
            });
        }
    });
};

let topHeadRef = ref(null);

// 点击 收藏
const handleCollect = () => {
    if (isNeedLogin.value) {
        goLogin();
        return;
    }

    topHeadRef.value.count = {};

    operateCollectHttp({ token: topicToken.value }).then((res) => {
        if (res.code != 200) {
            ElMessage.error(res["message"]);
            return;
        }
        let data = res.data;

        topicInfo.value["collections"] = data["collections"];
        iscollection.value = data["status"];

        ElMessage.success(res["message"]);
    });
};

const router = useRouter();

// 处理点击列表
const handleItem = (uni) => {
    // if (uni == route?.params?.id) return
    // router.push(`/details/${uni}`)
    // console.log(uniqid, uni);
    if (uniqid == uni) return;

    uniqid = uni;
    // info.value = {}
    info.value["message"] = "";
    info.value["subject"] = "";
    info.value["profession"] = "";

    qrcode.value = "";
    iscollection.value = 0;
    isdisplay.value = true;
    islike.value = 0;
    ismyself.value = 0;

    commentCount.value = 0;
    commentPage.value = 1;
    commentList.value = [];
    commentLoading = false;
    token = "";
    // clearAllData()

    nextTick(() => getDetails());

    replaceState(uni);

    window.scrollTo({
        top: 0,
        behavior: "smooth",
    });
};

// 修改 url
const replaceState = (uni) => {
    if (typeof window === "undefined") return;
    const location = JSON.parse(JSON.stringify(window.location));
    // 替换当前URL，但不刷新页面
    window.history.pushState({}, "", `${window.location.origin}/details/${uni}`);

    if (location.pathname.indexOf(uni) == -1) XSTAT.trackNewPage();
};

let show = ref(false);
let ismanager = inject("ismanager");
const cutShow = () => {
    show.value = !show.value; // 修改为切换显示状态
};

let reportAlertShow = ref(false);
let reportToken = ref("");
let reportType = ref("");

// 点击打开举报
const report = (token, type) => {
    if (isNeedLogin.value) {
        goLogin();
        return;
    }

    reportToken.value = token;
    reportType.value = type;
    reportAlertShow.value = true;
};

// 隐藏
const hide = () => {
    const target = topicInfo.value;
    managerHide(topicToken.value, target.hidden, "interviewexperience").then((value) => {
        target.hidden = value;
        topicInfo.value = target;
        cutShow();
    });
};

// 推荐
const recommend = () => {
    const target = topicInfo.value;
    managerRecommend(topicToken.value, target.recommend).then((value) => {
        target.recommend = value;
        topicInfo.value = target;
        cutShow();
    });
};

// 精华
const essence = () => {
    const target = topicInfo.value;
    managerEssence(topicToken.value, target.best).then((value) => {
        target.best = value;
        topicInfo.value = target;
        cutShow();
    });
};

// 删除
const deleteItem = () => {
    managerDelete(topicToken.value)
        .then(() => redirectToExternalWebsite("/", "_self"))
        .finally(() => cutShow());
};

provide("reportAlertShow", reportAlertShow);
provide("clearAllData", clearAllData);
provide("getDetails", getDetails);

const { $cache } = useNuxtApp();

// seo的
if (process.server && process.env.NODE_ENV != "development") {
    try {
        const detailKey = `details_${uniqid}`;
        const cachedData = $cache.get(detailKey);
        // console.log(cachedData ? "缓存数据已存在" : "缓存数据不存在");
        if (cachedData) {
            const infoData = cachedData["info"] || {};
            info.value = infoData;
            seo.value = cachedData.seo;
            iscollection.value = cachedData.iscollection;
            isdisplay.value = cachedData.isdisplay;
            islike.value = cachedData.islike;
            ismyself.value = cachedData.ismyself;
            // qrcode.value = cachedData["share"]["qrcode"];
        } else {
            await detailsHttp({ uniqid }).then((res) => {
                if (res.code == 200) {
                    let data = res.data;
                    token = data["token"];
                    const infoData = data["info"] || {};
                    info.value = infoData;
                    seo.value = data.seo;
                    iscollection.value = data.iscollection;
                    isdisplay.value = data.isdisplay;
                    islike.value = data.islike;
                    ismyself.value = data.ismyself;
                    // qrcode.value = data["share"]["qrcode"];

                    // if (relatedlist.value.length == 0) getRelatedlistHttp();
                    // else CalculateSelectedList();
                    // detailsLoading.value = false;
                    // getCommentListHttp();
                    $cache.set(detailKey, data, 3600);
                }
            });
        }

        await relatedlistHttp({ token, page: 1 }).then((res) => {
            if (res.code != 200) return;
            let data = res.data;
            relatedlist.value = data.data;
            relatedcount.value = data.count;
            // CalculateSelectedList();
        });
    } catch (error) {}
}

const isBrowser = computed(() => {
    return process.client; // 使用 process.client 判断是否在浏览器环境下
});

// 点击发送信息
const sendMessage = (token) => {
    if (typeof messagePrivateItem == "function") messagePrivateItem({ token });
    else redirectToExternalWebsite(`https://f.gter.net/u/${token}`);
};

// 点击ta的主页
const TAHomePage = (token) => redirectToExternalWebsite(`https://f.gter.net/u/${token}`);

// 跳转 url
const redirectToExternalWebsite = (url, target = "_blank") => {
    const link = document.createElement("a");
    link.href = url;
    link.target = target;
    link.click();
};

// 全部的启动到底部
const handleListScroll = (e) => {
    const el = e.target;
    if (el.scrollHeight - el.scrollTop >= el.clientHeight + 40) return;
    getRelatedlistHttp();
};

const commentBoxRef = ref(null);
// 点进滚动到评论
const handleScrollComments = () => {
    const element = commentBoxRef.value;
    if (!element) return;

    window.scrollTo({
        top: element.offsetTop - 85 || 0,
        behavior: "smooth",
    });
    return;

    const rect = element.getBoundingClientRect();

    let elementTop = 0;
    elementTop = rect.top - window.innerHeight / 2;
    if (rect.top > window.innerHeight) {
        elementTop = rect.top - window.innerHeight / 2;
        window.scrollTo({
            top: elementTop || 0,
            behavior: "smooth",
        });
    } else {
        elementTop = window.innerHeight / 2 + rect.top / 2;
        window.scrollTo({
            top: elementTop || 0,
            behavior: "smooth",
        });
    }

    // window.scrollTo({
    //     top: elementTop,
    //     behavior: "smooth",
    // })
};

// 打开评论的 信息框
const openAvatarPopover = (index, i) => {
    if (i != null) commentList.value[index]["child"][i]["popoverState"] = true;
    else commentList.value[index]["popoverState"] = true;
};

let isInsertCoinsOperationShow = ref(false); // 投票弹窗
let coinMybalance = ref({}); // 我的寄托币数量
let coinConfig = ref({}); // 投币的配置
let coinConnum = ref(0); // 寄托币数量
let coinRanklist = ref({}); // 投币排行榜
let coinAmount = ref(null); // 投币选择的金额
let coinCustomAmount = ref(null); // 投币自定义的金额
let defaultcoinnum = ref(0); // 投币金额默认寄托币数
let coinMessage = ref(""); // 投币时的说点什么
let postCoinSbmitState = false; // 投币中

// 获取寄托币
const getCoinInfo = () => {
    coinHttp({ token }).then((res) => {
        if (res.code != 200) return;
        let data = res.data;
        coinConfig.value = data.config;
        coinMybalance.value = data.mybalance;
        coinRanklist.value = data.ranklist;
        defaultcoinnum.value = data.defaultcoinnum;
    });
};

// 打开寄托币弹窗
const openCoinOperation = () => {
    if (isNeedLogin.value) {
        goLogin();
        return;
    }
    isInsertCoinsOperationShow.value = true;
};

// 处理投币的选择选项
const coinSelectAmountDispose = (amount) => {
    coinAmount.value = amount;
};

// 提交寄托币
const postCoinSbmit = () => {
    if (postCoinSbmitState) return;
    postCoinSbmitState = true;
    coinsubmitHttp({
        token,
        coinnum: coinAmount.value,
        message: coinMessage.value,
    })
        .then((res) => {
            if (res.code != 200) {
                ElMessage.error(res.message);
                return;
            }
            let data = res.data;

            info.value.coins = info.value.coins + data["coinnum"];
            coinMybalance.value = coinMybalance.value - data["coinnum"];

            coinAmount.value = null;
            isInsertCoinsOperationShow.value = false;
            ElMessage.success(res.message);
            if (data.comment) {
                const userInfoWin = window.userInfoWin || {};
                commentComments.value = data.comment.count;

                let newComment = {
                    avatar: userInfoWin["avatar"],
                    child: [],
                    childnum: 0,
                    content: coinMessage.value,
                    id: parseInt(data.comment.commentid),
                    ...data.comment,
                    islike: 0,
                    likenum: 0,
                    nickname: userInfoWin["nickname"] || "匿名用户",
                    parentid: 0,
                    reply: [],
                    timestamp: generateTime(),
                };
                commentList.value.unshift(newComment);
            }
            coinMessage.value = "";

            coinrankingList.value = [];
        })
        .finally(() => (postCoinSbmitState = false));
};

let coinrankingList = ref([]); // 投币排行榜数据
let coinrankingState = ref(false); // 投币排行榜 弹窗状态
let coinrankingLoading = false; // 投币排行榜加载中

const getCoinranking = () => {
    if (coinrankingLoading) return;
    coinrankingLoading = true;
    coinrankingHttp({ token })
        .then((res) => {
            if (res.code != 200) return;
            const data = res.data;
            coinrankingList.value = data;
            coinrankingState.value = true;
        })
        .finally(() => (coinrankingLoading = false));
};

// 打开寄托币排行榜
const openCoinRankList = () => {
    if (info.value.coins == 0) return;

    if (coinrankingList.value.length == 0) getCoinranking();
    else coinrankingState.value = true;
};

// 生成时间
const generateTime = () => {
    let date = new Date();
    let Y = date.getFullYear() + "-";
    let M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
    let D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
    let h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
    let m = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    return "" + Y + M + D + h + m;
};

provide("coinrankingState", coinrankingState);
provide("openCoinOperation", openCoinOperation);

// 处理点击转发统计
const handleShare = () => shareHttp({ token });

// 登录判断
const loginJudgment = () => {
    if (isNeedLogin.value) goLogin();
};

// 取消了同页面的收藏
const unbookmarkSamePage = () => {
    iscollection.value = 0;
    info.value.favnum--;
};

provide("unbookmarkSamePage", unbookmarkSamePage);

let labelObj = {
    offer: "Offer",
    vote: "投票",
    mj: "面经",
    thread: "帖子",
    ask: "回答",
};

let postCommentFocusState = ref(false);

const postInputRef = ref(null);

const postCommentFocusBlur = () => {
    const refref = postInputRef.value;
    setTimeout(() => {
        postCommentFocusState.value = false;
        nextTick(() => {
            let targetDom = refref.querySelector(".el-textarea__inner");
            targetDom.style.height = "41px";
        });
    }, 200);
};

let ripostelist = ref([]);
let ripostecount = ref({});
let riposteoptions = ref({});

provide("riposteoptions", riposteoptions);

const getRiposte = () => {
    getRiposteHttp({ token }).then((res) => {
        console.log("getRiposte", res);
        if (res.code != 200) return;
        let data = res.data;
        ripostecount.value = data.count || {};
        ripostelist.value = data.list || [];
        riposteoptions.value = data.options || [];

        if (ripostelist.value.length <= 3) randomEmoji();
    });
};

let randomEmojis = ref([]); // 随机 五个 emoji
provide("randomEmojis", randomEmojis);

// 随机 7 个Emoji
const randomEmoji = () => {
    let emojiList = ripostelist.value;
    // 需要排除的 Emoji
    let exclude = [];
    emojiList.forEach((element) => {
        exclude.push(element.item);
    });

    let selectedList = []; // 待选择 Emoji To be selected
    // 默认是有点赞的
    for (const key in riposteoptions.value[0].data) {
        if (key != "c150") selectedList.push(key);
    }

    const random = [];
    if (!exclude.includes("c150")) random.push("c150"); // 添加第一个点赞 emoji
    selectedList = selectedList.filter((itemB) => !exclude.includes(itemB));

    // 生成随机索引，确保不重复
    let indexes = [];
    while (indexes.length < 7) {
        let randomIndex = Math.floor(Math.random() * selectedList.length);
        if (indexes.indexOf(randomIndex) === -1) {
            indexes.push(randomIndex);
            random.push(selectedList[randomIndex]);
        }
    }
    randomEmojis.value = random;
};

// 拼接 回应需要的 字符
const jointriposte = (item) => {
    return `&#x${item};`;
};

provide("jointriposte", jointriposte);

let riposteHttpState = false; // 回应加载中

// 选择 emoji
const selectEomji = (item) => {
    if (isNeedLogin.value) {
        goLogin();
        return;
    }

    if (riposteHttpState) return;
    riposteHttpState = true;
    riposteSubmitHttp({ token, item })
        .then((res) => {
            if (res.code != 200) {
                ElMessage.error(res.message);
                return;
            }
            let data = res.data;
            handleEmojiData(data);
        })
        .finally(() => {
            riposteHttpState = false;
        });
};

provide("selectEomji", selectEomji);

// 选中 在 Emoji 弹窗中 选择
const selectEomjiPop = (key, isroll) => {
    if (isNeedLogin.value) {
        goLogin();
        return;
    }
    let emojiList = ripostelist.value;
    // 判断 是否已经 有了
    const index = emojiList.findIndex((item) => item.item == key);
    if (index != -1 && emojiList[index].selected) return;
    if (riposteHttpState) return;
    riposteHttpState = true;
    riposteSubmitHttp({ token, item: key })
        .then((res) => {
            if (res.code != 200) {
                ElMessage.error(res.message);
                return;
            }

            if (isroll) {
                rollRiposte();
            }
            let data = res.data;
            respondListState.value = false;
            handleEmojiData(data);
        })
        .finally(() => {
            riposteHttpState = false;
        });
};

provide("selectEomjiPop", selectEomjiPop);

// 专门处理 展示列表的 数据结构
const handleEmojiData = (data) => {
    let emojiList = ripostelist.value;
    let isnew = true;
    emojiList.forEach((element, index) => {
        if (element.item == data.item) {
            isnew = false;
            if (element.selected) element.num--;
            else element.num++;
            element.selected = !element.selected;
        }
    });

    // 代表是新数据
    if (isnew) {
        emojiList.push({
            item: data.item,
            num: 1,
            selected: true,
        });
    }

    let newArray = [];
    emojiList.forEach((item) => {
        if (item.num > 0) newArray.push(item);
    });

    if (newArray.length < 3) randomEmoji();

    ripostecount.value = data.count;
    ripostelist.value = newArray;

    if (!isdisplay.value) isdisplay.value = true;
};

// 选择回应
const selectListEomji = (index) => {
    if (isNeedLogin.value) {
        goLogin();
        return;
    }
    let emojiList = ripostelist.value;
    let target = emojiList[index];
    if (riposteHttpState) return;
    riposteHttpState = true;
    riposteSubmitHttp({ token, item: target.item })
        .then((res) => {
            if (res.code != 200) {
                ElMessage.error(res.message);
                return;
            }
            let data = res.data;
            handleEmojiData(data);
        })
        .finally(() => {
            riposteHttpState = false;
        });
};

let respondPopListState = ref(false); // 回应列表弹窗状态
let respondDetail = ref({}); // 已回应列表

// 打开回应弹窗列表
const openPopList = () => {
    respondPopListState.value = true;
    getRespondDetail();
};

// 关闭回应弹窗列表
const closePopList = () => {
    respondPopListState.value = false;
};

// 回应详情
const getRespondDetail = () => {
    riposteDetailHttp({ token }).then((res) => {
        if (res.code != 200) return;
        respondDetail.value = res.data;
    });
};

// 点击回应列表的
const selectEomjiListPop = (key) => {
    // let respondDetail = respondDetail.value

    let target = respondDetail.value[key];

    riposteSubmitHttp({ token, item: target.item }).then((res) => {
        if (res.code != 200) {
            ElMessage.error(res.message);
            return;
        }
        let data = res.data;

        handleEmojiData(data);

        if (target.selected) {
            target.user = target.user.filter((item) => item.uin != data.uin);
        } else {
            target.user.push(data);
        }

        let emojiList = ripostelist.value;

        if (target.user.length == 0) {
            emojiList = emojiList.filter((item) => item.item != key);
            delete respondDetail.value[key];
        } else {
            target.selected = !target.selected;
            respondDetail.value[key] = target;
        }

        ripostelist.value = emojiList;
    });
};

let respondListState = ref(false);

// 切换限制回应的弹窗
const cutRespondState = (value) => {
    respondListState.value = value;
};

const respondtitle = ref(null);

const rollRiposte = () => {
    const respondBox = respondtitle.value;
    // 获取元素的位置信息
    const rect = respondBox.getBoundingClientRect();

    // 计算节点距离浏览器视口顶部的距离
    const distanceToViewportTop = rect.top + window.scrollY - 60;
    window.scrollTo({
        top: distanceToViewportTop,
        behavior: "smooth",
    });
};

let picture = ref([]);

let emojiState = ref(false);
let emojiMaskState = ref(false);

// const emojiData = ["😀", "😁", "😆", "😅", "😂", "😉", "😍", "🥰", "😋", "😜", "🤪", "😎", "🤩", "🥳", "😔", "🙁", "😭", "😡", "😳", "🤗", "🤔", "🤭", "🤫", "😯", "😵", "🙄", "🥴", "🤢", "🤑", "🤠", "👌", "✌️", "🤟", "🤘", "🤙", "👍", "👎", "✊", "👏", "🤝", "🙏", "💪", "❤️", "💔", "🌹", "🥀", "🎉", "🎁", "🧧", "🌙", "⭐", "🌍", "💌", "📬", "🚗", "🚕", "🚲", "🛵", "🚀", "🚁", "⛵", "🚢", "🍎", "🍐", "🍊", "🍉", "🍓", "🍑", "🍔", "🍟", "🍕", "🥪", "🍜", "🍡", "🍨", "🍦", "🎂", "🍰", "🍭", "🍿", "🍩", "🧃", "🍹"];
const emojiData = ["😀", "😁", "😆", "😅", "😂", "😉", "😍", "🥰", "😘", "🤥", "😪", "😵‍💫", "🤓", "🥺", "😋", "😜", "🤪", "😎", "🤩", "🥳", "😔", "🙁", "😭", "😡", "😳", "🤗", "🤔", "🤭", "🤫", "😯", "😵", "🙄", "🥴", "🤢", "🤑", "🤠", "👌", "✌️", "🤟", "🤘", "🤙", "👍", "👎", "✊", "👏", "🤝", "🙏", "💪", "❎️", "✳️", "✴️", "❇️", "#️⃣", "*️⃣", "1️⃣", "2️⃣", "3️⃣", "4️⃣", "5️⃣", "6️⃣", "7️⃣", "8️⃣", "9️⃣", "🔟", "🆗", "🈶", "🉐", "🉑", "🌹", "🥀", "🌸", "🌺", "🌷", "🌲", "☘️", "🍀", "🍁", "🌙", "⭐", "🌍", "☀️", "⭐️", "🌟", "☁️", "🌈", "☂️", "❄️", "☃️", "☄️", "🔥", "💧", "🍎", "🍐", "🍊", "🍉", "🍓", "🍑", "🍔", "🍟", "🍕", "🥪", "🍜", "🍡", "🍨", "🍦", "🎂", "🍰", "🍭", "🍿", "🍩", "🧃", "🍹", "🍒", "🥝", "🥒", "🥦", "🥨", "🌭", "🥘", "🍱", "🍢", "🥮", "🍩", "🍪", "🧁", "🍵", "🍶", "🍻", "🥂", "🧋", "🎉", "🎁", "🧧", "🎃", "🎄", "🧨", "✨️", "🎈", "🎊", "🎋", "🎍", "🎀", "🎖️", "🏆️", "🏅", "💌", "📬", "🚗", "🚕", "🚲", "🛵", "🚀", "🚁", "⛵", "🚢", "🔮", "🧸", "🀄️"];

// 打开 Emoji
const openEmoji = (index, i) => {
    if (isNeedLogin.value) {
        goLogin();
        return;
    }
    if (i != undefined) commentList.value[index].child[i]["emojiState"] = true;
    else if (index != undefined) commentList.value[index]["emojiState"] = true;
    else {
        closeEmoji();
        closeAnswerCommentsChild();
        emojiState.value = true;
    }

    emojiMaskState.value = true;
};

// 关闭 Emoji
const closeEmoji = (index, i) => {
    commentList.value.forEach((ele) => {
        ele["emojiState"] = false;
        if (ele["child"] && ele["child"].length != 0) {
            ele["child"].forEach((el) => {
                el["emojiState"] = false;
            });
        }
    });

    emojiState.value = false;
    emojiMaskState.value = false;
    editEmojiState.value = false;
};

// 选择 Emoji
const selectEmoji = (key, index, i) => {
    closeEmoji();
    if (i != undefined) {
        if (!commentList.value[index]["child"][i]["commentInput"]) commentList.value[index]["child"][i]["commentInput"] = "";
        commentList.value[index]["child"][i]["commentInput"] += key;
    } else if (index != undefined) {
        if (!commentList.value[index]["commentInput"]) commentList.value[index]["commentInput"] = "";
        commentList.value[index]["commentInput"] += key;
    } else {
        commentInputTop.value += key;
    }
};

// 自动输入框增高
const autoResize = (e) => {
    e.target.style.height = "auto"; // 重置高度
    e.target.style.height = `${e.target.scrollHeight}px`; // 设置为内容高度
};

const maxSize = 20 * 1024 * 1024; // 20MB

const handleInputPaste = (event, index, ii) => {
    const items = event.clipboardData.items; // 获取粘贴的内容

    for (let i = 0; i < items.length; i++) {
        const item = items[i];
        if (item.type.startsWith("image/")) {
            event.preventDefault();
            const file = item.getAsFile(); // 获取文件

            if (file.size > maxSize) {
                ElMessage({
                    message: "文件大小不能超过 20MB",
                    type: "error",
                });
                return;
            }

            let target = [];
            if (editCommentState.value) target = editPicture.value;
            else {
                if (ii != undefined) target = commentList.value[index].child[ii]["picture"];
                else if (index != undefined) target = commentList.value[index]["picture"];
                else target = picture.value;
            }

            if (target.length >= maxPicture.value) {
                creationAlertBox("error", `最多只能上传 ${maxPicture.value} 张图片`);
                return;
            }

            const reader = new FileReader();
            reader.onload = (e) => {
                const base64 = e.target.result;

                uploadImg(file).then((res) => {
                    const obj = {
                        aid: res.aid || "",
                        url: res.url || "",
                    };

                    target.push(obj);

                    if (editCommentState.value) editPicture.value = target;
                    else {
                        if (ii != undefined) commentList.value[index].child[ii]["picture"] = target;
                        else if (index != undefined) commentList.value[index]["picture"] = target;
                        else picture.value = target;
                    }

                    ElMessage.success("上传成功");
                });
            };
            reader.readAsDataURL(file);
        }
    }
};

const handleFileUpload = (event, index, i) => {
    closeEmoji();
    const file = event.target.files[0]; // 获取选择的文件

    if (!file) return;

    if (file.size > maxSize) {
        ElMessage({
            message: "文件大小不能超过 20MB",
            type: "error",
        });
        return;
    }

    console.log(index, i);
    let target = [];
    if (editCommentState.value) target = editPicture.value;
    else {
        if (i != undefined) target = commentList.value[index].child[i]["picture"];
        else if (index != undefined) target = commentList.value[index]["picture"];
        else target = picture.value;
    }

    console.log("target", target);

    if (target.length >= maxPicture.value) {
        creationAlertBox("error", `最多只能上传 ${maxPicture.value} 张图片`);
        return;
    }

    const reader = new FileReader();
    reader.onload = (e) => {
        const base64 = e.target.result;
        uploadImg(file).then((res) => {
            const obj = {
                aid: res.aid || "",
                url: res.url || "",
            };

            target.push(obj);

            if (editCommentState.value) editPicture.value = target;
            else {
                if (i != undefined) commentList.value[index].child[i]["picture"] = target;
                else if (index != undefined) commentList.value[index]["picture"] = target;
                else picture.value = target;
            }

            console.log("picture.value", picture.value);

            ElMessage.success("上传成功");
        });
    };
    reader.readAsDataURL(file);
};

// 删除上传的图片
const closeFileUpload = (aid, index, i) => {
    let target = [];

    if (i != undefined) target = [...commentList.value[index].child[i]["picture"]];
    else if (index != undefined) target = [...commentList.value[index]["picture"]];
    else target = [...picture.value];

    let sub = target.findIndex((item) => item.aid == aid);
    if (sub != -1) target.splice(sub, 1);
    if (i != undefined) commentList.value[index].child[i]["picture"] = target;
    else if (index != undefined) commentList.value[index]["picture"] = target;
    else picture.value = target;
};

// 上传图片 获取图片url
const uploadImg = (file) => {
    return new Promise((resolve, reject) => {
        const upload = () => {
            let config = uploadConfig;
            const formData = new FormData();
            formData.append(config.requestName, file); // 文件数据
            formData.append("type", "image"); // 文件名
            formData.append("data", config.params.data); // 文件名
            commonUploadHttp(config.url, formData).then((res) => {
                if (res.code != 200) {
                    ElMessage.error(res.message || "上传失败");
                    return;
                }
                let data = res.data;
                resolve(data);
            });
        };
        if (uploadConfig) upload();
        else getUploadConfig().then(() => upload());
    });
};

let uploadConfig = null;

const getUploadConfig = () => {
    return new Promise((resolve, reject) => {
        commonUploadConfigHttp().then((res) => {
            let data = res.data;
            uploadConfig = data;
            resolve();
        });
    });
};

let dialogSrc = ref(""); // 大图的src

// 处理点击答案图片 展开大图
const handleAnswerText = (e) => {
    if (e.target.tagName === "IMG") {
        var src = e.target.getAttribute("src");
        dialogSrc.value = src;
        window.addEventListener("keydown", handleKeydown);
    }
};

// 大图的监听 esc 键盘按钮
const handleKeydown = (event) => {
    if (event.key !== "Escape") return;
    dialogSrc.value = "";
    window.removeEventListener("keydown", handleKeydown); // 取消监听
};

let permissions = inject("permissions");

let dialogVisible = ref(false);

const openHide = () => (dialogVisible.value = true);

// 点击隐藏
const handleHide = () => {
    mjHideHttp({ token }).then((res) => {
        dialogVisible.value = false;
        ElMessage.success(res.message || "隐藏成功");
        router.replace("/index.html");
    });
};

// 点击删除
const commentDelete = (token, index, i) => {
    commentDeleteHttp({
        token,
    }).then((res) => {
        if (res.code != 200) {
            ElMessage.error(res.message);
            return;
        }

        if (i >= 0) {
            commentList.value[index].child.splice(i, 1);
            commentList.value[index].childnum -= 1;
            console.log("childnum", commentList.value[index]);
        } else {
            commentComments.value -= commentList.value[index].childnum;
            commentList.value.splice(index, 1);
        }

        commentComments.value -= 1;
    });
};

const judgeLogin = () => {
    if (isNeedLogin.value) goLogin();
};

let editCommentState = ref(false);
let editToken = "";
let editPicture = ref([]);
let editInput = ref("");
let editEmojiState = ref(false);
const editInputRef = ref(null);

const openEdit = (token, index, i) => {
    const list = JSON.parse(JSON.stringify(commentList.value));
    let target = {};
    if (i != null) target = list[index]["child"][i];
    else target = list[index];
    console.log(token, index, i, target);
    editToken = target.token || "";
    editInput.value = target.content || "";
    editPicture.value = target.attachments?.images || [];

    editCommentState.value = true;

    nextTick(() => {
        editInputRef.value.style.height = `${editInputRef.value.scrollHeight}px`;
    });
};

const closeEdit = () => {
    editPicture.value = [];
    editToken = "";
    editInput.value = "";
    editCommentState.value = false;
};

// 打开 Emoji
const openEditEmoji = (index, i) => {
    if (isNeedLogin.value) {
        goLogin();
        return;
    }
    editEmojiState.value = true;
};

const selectEditEmoji = (key) => {
    closeEmoji();
    editInput.value += key;
};

const postEditComment = () => {
    if (isNeedLogin.value) {
        goLogin();
        return;
    }

    const image = editPicture.value;
    const attachments = {
        images: image,
    };

    commentsEditSubmit({
        content: editInput.value,
        token: editToken,
        attachments,
    }).then((res) => {
        if (res.code != 200) {
            ElMessage.error(res.message);
            return;
        }

        commentList.value.forEach((element) => {
            if (element.token == editToken) {
                element["content"] = editInput.value;
                element["attachments"] = attachments;
            }
            element.child &&
                element.child.forEach((ele) => {
                    if (ele.token == editToken) {
                        ele["content"] = editInput.value;
                        ele["attachments"] = attachments;
                    }
                });
        });

        editPicture.value = [];
        editToken = "";
        editCommentState.value = false;
        editEmojiState.value = false;
        ElMessage.success(res.message);
    });
};

const closeEditEmoji = () => (editEmojiState.value = false);

const handleEditFile = () => {
    editEmojiState.value = false;
    judgeLogin();
};

const closeEditFileUpload = (aid) => {
    let target = editPicture.value;
    let sub = target.findIndex((item) => item.aid == aid);
    if (sub != -1) target.splice(sub, 1);
    console.log("target", target);

    editPicture.value = target;
};

const openBi = () => {
    if (isNeedLogin.value) {
        goLogin();
        return;
    }

    BiComponent.initComponent();
};
</script>

<style lang="less" scoped>
@import url(@/assets/css/details.css);
</style>

<style lang="less">
@import url(@/assets/css/detailsPop.css);

.el-popper.emoji-popover {
    box-sizing: border-box;

    * {
        box-sizing: border-box;
    }

    padding: 0px !important;
    border-radius: 10px !important;
    border: 1px solid #ebebeb !important;

    .el-popper__arrow {
        z-index: 1;

        &:before {
            background-color: #fff;
            border-top-color: #fff !important;
            border-left-color: #fff !important;
        }
    }
}
</style>
