<template>
    <div class="answer-discuss">
        <!-- 编辑评论 -->
        <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" v-if="editPicture.url">
                        <div class="picture">
                            <img class="close" @click="closeEditFileUpload()" src="@/img/close-icon.png" />
                            <img class="img" @click="handleAnswerText" :src="editPicture.base64 || editPicture.url" />
                        </div>
                    </div>

                    <div class="bottom flexacenter">
                        <div class="operate flexacenter">
                            <div class="item" :class="{ pitch: editEmojiState }">
                                <img class="icon" src="@/img/smiling-face.png" @click="openEditEmoji()" alt="" />
                                <div class="emoji-box">
                                    <div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEditEmoji(item)">{{ item }}</div>
                                </div>
                            </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="@/img/picture-icon.png" alt="" />
                                <span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</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="header flexacenter">
            回答&讨论
            <span class="num">{{ commentTotalCount || "" }}</span>
        </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="inputTextarea" @focus="judgeLogin" @input="autoResize" @paste="handleInputPaste" placeholder="说说你的看法…"></textarea>
            </div>
            <div class="picture-box" v-if="picture.url">
                <div class="picture">
                    <img class="close" @click="closeFileUpload()" src="/img/close-icon.png" />
                    <img class="img" @click="handleAnswerText" :src="picture.base64 || picture.url" />
                </div>
            </div>

            <div class="bottom flexacenter">
                <div class="operate flexacenter">
                    <div class="item" :class="{ pitch: emojiState }">
                        <img class="icon" src="/img/smiling-face.png" @click="openEmoji()" alt="" />
                        <div class="emoji-box">
                            <div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item)">{{ item }}</div>
                        </div>
                    </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="/img/picture-icon.png" alt="" />
                        <span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span>
                    </div>
                </div>
                <div class="btn" @click="submitAnswerComments()">发送</div>
            </div>
        </div>

        <div class="comments-box">
            <div class="comments-item" v-for="(item, index) in commentList" :key="index">
                <div class="comments-header flexacenter">
                    <div class="comments-header-left flexacenter">
                        <img class="comments-avatar" @click="openUserInfo(index)" :src="item['avatar']" />
                        <div class="comments-username" @click="openUserInfo(index)">{{ item["nickname"] || "匿名用户" }}</div>
                        <div class="comments-time">{{ handleDate(item["timestamp"]) }}</div>
                        <div class="comments-identity" v-if="item['isauthor'] == 1">提问者</div>
                        <img class="comments-title" v-if="item['groupimage']" :src="item.groupimage" :alt="item.grouptitle" style="height: 17px" />

                        <div class="avatar-box flexflex" v-if="item['avatarState']">
                            <a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(item['uin'])">
                                <img class="avatar-icon" src="@/img/send-messages-icon.png" />
                                发送信息
                            </a>
                            <a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(item['uin'])">
                                <img class="avatar-icon" src="@/img/homepage-icon.png" />
                                TA的主页
                            </a>
                            <div class="avatar-mask" @click="closeUserInfo(index)"></div>
                        </div>
                    </div>
                    <div class="comments-header-right flexacenter">
                        <div class="menu-box flexacenter">
                            <img class="menu-icon" src="/img/menu-icon-gray.svg" />
                            <div class="operate-boxx">
                                <div class="item flexcenter" @click="openMenuState(index)">举报</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" @click="openAnswerCommentsChild(index)" src="/img/comment-icon-gray.svg" />
                        <div class="flexacenter like-box" @click="operateAnswerCommentsLike(item.token, index)">
                            <img class="like-icon" v-if="item['islike'] == 0" src="/img/like-icon-gray.png" />
                            <img class="like-icon" v-else src="/img/like-icon-colours.png" />
                            <div class="like-quantity">{{ item["likenum"] || "" }}</div>
                        </div>
                    </div>
                </div>
                <div class="comments-content">
                    <div class="comments-text" v-html="item['content']"></div>
                    <img class="comments-img" @click="handleAnswerText" :src="item.image?.base64 || item.image?.url" v-if="item.image?.url" />
                    <div class="input-box" v-if="item['childState']">
                        <img class="cross" @click="closeAnswerCommentsChild(index)" src="/img/cross-icon.png" />
                        <div class="top flexflex">
                            <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" v-if="item.picture?.url">
                            <div class="picture">
                                <img class="close" @click="closeFileUpload(index)" src="/img/close-icon.png" />
                                <img class="img" @click="handleAnswerText" :src="item.picture.base64 || item.picture.url" />
                            </div>
                        </div>
                        <div class="bottom flexacenter">
                            <div class="operate flexacenter">
                                <div class="item" :class="{ pitch: item.emojiState }">
                                    <img class="icon" src="/img/smiling-face.png" @click="openEmoji(index)" alt="" />
                                    <div class="emoji-box">
                                        <div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item, index)">{{ item }}</div>
                                    </div>
                                </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="/img/picture-icon.png" alt="" />
                                    <span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span>
                                </div>
                            </div>
                            <div class="btn" @click="submitAnswerComments(index)">发送</div>
                        </div>
                    </div>
                </div>
                <div class="child-comments" v-if="item['child'].length != 0">
                    <div class="comments-item" v-for="(ite, i) in item['child']" :key="ite.id">
                        <div class="comments-header flexacenter">
                            <div class="comments-header-left flexacenter">
                                <img class="comments-avatar" @click="openUserInfo(index, i)" :src="ite['avatar']" />
                                <div class="comments-username" @click="openUserInfo(index, i)">{{ ite["nickname"] || "匿名用户" }}</div>
                                <div class="comments-time">{{ handleDate(ite["timestamp"]) }}</div>
                                <!-- <div class="comments-identity" v-if="ite['questioner'] == 1">提问者</div> -->
                                <!-- <div class="comments-identity" v-else-if="ite['isauthor'] == 1">回答者</div> -->
                                <div class="comments-identity" v-if="ite['isauthor'] == 1">提问者</div>
                                <img class="comments-title" v-if="ite['groupimage']" :src="ite.groupimage" :alt="ite.grouptitle" style="height: 17px" />
                                <div class="avatar-box flexflex" v-if="ite['avatarState']">
                                    <a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(ite['uin'])">
                                        <img class="avatar-icon" src="@/img/send-messages-icon.png" />
                                        发送信息
                                    </a>
                                    <a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(ite['uin'])">
                                        <img class="avatar-icon" src="@/img/homepage-icon.png" />
                                        TA的主页
                                    </a>
                                    <div class="avatar-mask" @click="closeUserInfo(index, i)"></div>
                                </div>
                            </div>
                            <div class="comments-header-right flexacenter">
                                <div class="menu-box flexacenter">
                                    <img class="menu-icon" src="/img/menu-icon-gray.svg" />
                                    <div class="operate-boxx">
                                        <div class="item flexcenter" @click="openMenuState(index, i)">举报</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" @click="openAnswerCommentsChild(index, i)" src="/img/comment-icon-gray.svg" />
                                <div class="flexacenter like-box" @click="operateAnswerCommentsLike(ite.token, index, i)">
                                    <img class="like-icon" v-if="ite['islike'] == 0" src="/img/like-icon-gray.png" />
                                    <img class="like-icon" v-else src="/img/like-icon-colours.png" />
                                    <div class="like-quantity">{{ ite["likenum"] || "" }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="comments-content">
                            <div class="comments-text">
                                <!-- <div class="comments-reply" v-if="JSON.stringify(ite['reply']) != '[]'">@{{ ite["reply"]["nickname"] }}</div> -->
                                <div class="comments-reply" v-if="ite?.reply?.nickname">@{{ ite["reply"]["nickname"] || "匿名用户" }}</div>
                                <span v-html="ite['content']"></span>
                            </div>
                            <img class="comments-img" @click="handleAnswerText" :src="ite.image?.base64 || ite.image?.url" v-if="ite.image?.url" />
                            <div class="input-box" v-if="ite['childState']">
                                <img class="cross" @click="closeAnswerCommentsChild(index)" src="/img/cross-icon.png" />
                                <div class="top flexflex">
                                    <textarea class="input-textarea flex1" maxlength="500" v-model="ite['commentInput']" :placeholder="'回复“' + (ite['nickname'] || '匿名用户') + '”：'" @focus="judgeLogin" @input="autoResize" @paste="handleInputPaste($event, index, i)"></textarea>
                                </div>
                                <div class="picture-box" v-if="ite.picture?.url">
                                    <div class="picture">
                                        <img class="close" @click="closeFileUpload(index, i)" src="/img/close-icon.png" />
                                        <img class="img" @click="handleAnswerText" :src="ite.picture.base64 || ite.picture.url" />
                                    </div>
                                </div>
                                <div class="bottom flexacenter">
                                    <div class="operate flexacenter">
                                        <div class="item" :class="{ pitch: ite.emojiState }">
                                            <img class="icon" src="/img/smiling-face.png" @click="openEmoji(index, i)" alt="" />
                                            <div class="emoji-box">
                                                <div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item, index, i)">{{ item }}</div>
                                            </div>
                                        </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="/img/picture-icon.png" alt="" />
                                            <span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span>
                                        </div>
                                    </div>
                                    <div class="btn" @click="submitAnswerComments(index, i)">发送</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="comments-also flexacenter" v-if="item['childnum'] > item['child'].length" @click="alsoCommentsData(index, i)">
                        <div class>还有{{ item["childnum"] - item.child.length }}条回复</div>
                        <img class="also-icon" src="/img/arrow-circular-gray.png" />
                    </div>
                </div>
            </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="confirmCommentDelete">确 定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
const props = defineProps({
    token: String,
});

onMounted(() => {
    // getComment()
});
let permissions = ref([]);

onMounted(() => {
    setTimeout(() => {
        // permissions.value = window["permissions"] || [];
        // if (process.env.NODE_ENV !== "production") permissions.value = ["comment.edit", "comment.delete"];
        // else
        permissions.value = window["permissions"] || [];
    }, 1000);
});

const emit = defineEmits();

const $ajax = inject("$ajax");
const $ajaxGET = inject("$ajaxGET");
const detailsToken = inject("detailsToken");
const handleDate = inject("handleDate");
const isNeedLogin = inject("isNeedLogin");
const handleMsg = inject("handleMsg");
const uploadImg = inject("uploadImg");
const handleAnswerText = inject("handleAnswerText");
const emojiMaskState = inject("emojiMaskState");
const user = inject("user");
const goLogin = inject("goLogin");

const detailLoading = inject("detailLoading");

// 点击ta的主页
const TAHomePage = (uin) => {
    redirectToExternalWebsite(`https://bbs.gter.net/home.php?mod=space&uid=${uin}`);
};

// 点击发送信息
const sendMessage = (uin) => {
    if (uin && typeof messagePrivateItem == "function") {
        messagePrivateItem({ uin: uin });
        return;
    } else redirectToExternalWebsite(`https://bbs.gter.net/home.php?mod=space&showmsg=1&uid=${uin}`);
};

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

const commentList = ref([]);
let commentCount = ref(0);
let commentTotalCount = ref(0);
let commentPage = ref(1);
let isgetCommentSate = false; // 请求评论状态
let alreadyCommentIdList = [];

const getComment = () => {
    if (commentPage.value == 0 || isgetCommentSate) return;
    isgetCommentSate = true;
    $ajax("/api/comment/lists", {
        token: detailsToken.value,
        page: commentPage.value,
        limit: 1500,
    })
        .then((res) => {
            if (res.code != 200) return;
            let data = res.data;

            data.data.forEach((element, index) => {
                element["isReplyBoxShow"] = 0;
                // element.timestamp = util.timeformat(element.timestamp, 2)
                if (element.child.length > 0) {
                    element.child.forEach((el) => {
                        // el.timestamp = util.timeformat(el.timestamp, 2)
                        el["isReplyBoxShow"] = 0;
                    });
                }
            });

            if (commentPage.value > 1) {
                let alreadyCommentIdList = alreadyCommentIdList;
                for (let index = 0; index < data.data.length; index++) {
                    if (alreadyCommentIdList.includes(data.data[index].id)) {
                        data.data.splice(index, 1);
                        index--;
                    }
                }
            }

            commentList.value = commentList.value.concat(data.data);
            // console.log("commentList", commentList.value)

            commentCount.value = data.count;
            commentTotalCount.value = data.comments;
            commentPage.value = data.count > commentList.length ? commentPage.value + 1 : 0;

            // console.log("commentList", commentList)
            // this.setData({
            //     commentList,
            //     commentCount: data.count,
            //     commentTotalCount: data.comments,
            //     commentPage: data.count > commentList.length ? this.data.commentPage + 1 : 0,
            // })
        })
        .finally(() => {
            isgetCommentSate = false;
        });
};

let picture = ref({});

// 监听 detailsToken 的变化
watch(
    detailsToken,
    (newValue, oldValue) => {
        if (newValue !== oldValue) {
            commentPage.value = 1;
            commentList.value = [];
            picture.value = {};
            commentTotalCount.value = 0;
            commentCount.value = 0;
            alreadyCommentIdList = [];
            getComment();
        }
    },
    { immediate: true }
);

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

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

    if (!file) return;

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

    const reader = new FileReader();
    reader.onload = (e) => {
        const base64 = e.target.result;
        uploadImg(base64).then((res) => {
            const obj = {
                base64,
                ...res,
            };

            if (editCommentState.value) editPicture.value = obj;
            else {
                if (i != undefined) commentList.value[index].child[i]["picture"] = obj;
                else if (index != undefined) commentList.value[index]["picture"] = obj;
                else picture.value = obj;
            }
            handleMsg("success", "上传成功");
        });
    };
    reader.readAsDataURL(file);
};

// 删除上传的图片
const closeFileUpload = (index, i) => {
    if (i != undefined) commentList.value[index].child[i]["picture"] = {};
    else if (index != undefined) commentList.value[index]["picture"] = {};
    else picture.value = {};
};

//
let emojiState = ref(false);

const emojiData = ["😀", "😁", "😆", "😅", "😂", "😉", "😍", "🥰", "😋", "😜", "🤪", "😎", "🤩", "🥳", "😔", "🙁", "😭", "😡", "😳", "🤗", "🤔", "🤭", "🤫", "😯", "😵", "🙄", "🥴", "🤢", "🤑", "🤠", "👌", "✌️", "🤟", "🤘", "🤙", "👍", "👎", "✊", "👏", "🤝", "🙏", "💪", "❤️", "💔", "🌹", "🥀", "🎉", "🎁", "🧧", "🌙", "⭐", "🌍", "💌", "📬", "🚗", "🚕", "🚲", "🛵", "🚀", "🚁", "⛵", "🚢", "🍎", "🍐", "🍊", "🍉", "🍓", "🍑", "🍔", "🍟", "🍕", "🥪", "🍜", "🍡", "🍨", "🍦", "🎂", "🍰", "🍭", "🍿", "🍩", "🧃", "🍹"];

// 打开 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;
};

defineExpose({
    closeEmoji,
});

// 选择 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 {
        inputTextarea.value += key;
    }
};

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

const handleInputPaste = (event, index, ii) => {
    if (isNeedLogin.value) {
        goLogin();
        return;
    }

    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) {
                handleMsg("error", "文件大小不能超过 20MB");
                return;
            }

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

                uploadImg(base64).then((res) => {
                    const obj = {
                        base64,
                        ...res,
                    };
                    if (editCommentState.value) editPicture.value = obj;
                    else {
                        if (ii != undefined) commentList.value[index].child[ii]["picture"] = obj;
                        else if (index != undefined) commentList.value[index]["picture"] = obj;
                        else picture.value = obj;
                    }
                    handleMsg("success", "上传成功");
                });
            };
            reader.readAsDataURL(file);
        }
    }
};

let inputTextarea = ref("");

// 提交回答-评论
const submitAnswerComments = (index, i) => {
    if (isNeedLogin.value) {
        goLogin();
        return;
    }

    let content = "";
    let parentid = null;
    let token = detailsToken.value;
    let image = {};

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

    detailLoading.value = true;

    $ajax("/api/comment/submit", {
        content,
        token,
        parentid,
        image: image ? { aid: image.aid, url: image.url } : null,
    })
        .then((res) => {
            if (res.code != 200) {
                handleMsg("error", res["message"]);
                return;
            }
            let data = res.data;

            if (i != null) {
                let targetData = {
                    id: data["commentid"],
                    content,
                    isauthor: 1,
                    islike: 0,
                    likenum: 0,
                    reply: {
                        nickname: commentList.value[index]["child"][i]["nickname"],
                    },
                    ...data,
                    image,
                };

                commentList.value[index]["child"].push(targetData);
                commentList.value[index]["childnum"]++;
            } else if (index != null) {
                let targetData = {
                    id: data["commentid"],
                    content,
                    isauthor: 1,
                    islike: 0,
                    likenum: 0,
                    reply: [],
                    ...data,
                    image,
                };
                commentList.value[index]["child"].unshift(targetData);
                commentList.value[index]["childnum"]++;
            } else {
                let targetData = {
                    id: data["commentid"],
                    content,
                    isauthor: 1,
                    islike: 0,
                    likenum: 0,
                    ...data,
                    child: [],
                    image,
                };
                commentList.value.unshift(targetData);
                // commentCount.value++
                inputTextarea.value = "";
                picture.value = {};
            }

            commentTotalCount.value = data.count || 0;

            emit("updateAnswers", data.count);

            // targetAnswerList[index]["commentnum"] = data["count"]

            closeAnswerCommentsChild();

            handleMsg("success", res["message"] || "操作成功");
        })
        .finally(() => {
            detailLoading.value = false;
        });
};

// 回答-评论 点赞
const operateAnswerCommentsLike = (token, index, i) => {
    if (isNeedLogin.value) {
        goLogin();
        return;
    }

    $ajax("/api/comment/like", {
        token,
    }).then((res) => {
        if (res.code != 200) return;
        let data = res.data;

        if (i != undefined) {
            commentList.value[index].child[i]["islike"] = data["status"];
            commentList.value[index].child[i]["likenum"] = data["likenum"];
        } else {
            commentList.value[index]["islike"] = data["status"];
            commentList.value[index]["likenum"] = data["likenum"];
        }

        handleMsg("success", res["message"] || "操作成功");
    });
};

// 打开 回答-评论 的子评论
const openAnswerCommentsChild = (index, i) => {
    // console.log("isNeedLogin", isNeedLogin)

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

    closeAnswerCommentsChild();

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

// 关闭 回答-评论 的子评论
const closeAnswerCommentsChild = () => {
    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"] = "";
            });
        }
    });
};

// 获取剩下的子评论
const alsoCommentsData = (index, i) => {
    // const targetAnswerList = [...answerList.value]
    const parentid = commentList.value[index]["id"];
    const token = detailsToken.value;

    $ajax("/api/comment/childrenList", {
        token,
        parentid,
        limit: 2000,
        page: 1,
        childlimit: 3,
    }).then((res) => {
        if (res.code != 200) return;
        let data = res.data;

        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;
        // answerList.value = targetAnswerList
    });
};

const handleMenuState = inject("handleMenuState");

const openMenuState = (index, i) => {
    if (isNeedLogin.value) {
        goLogin();
        return;
    }
    let reportToken = "";
    if (i === undefined) reportToken = commentList.value[index]["token"];
    else reportToken = commentList.value[index]["child"][i]["token"];
    handleMenuState(reportToken);
};

const openUserInfo = (index, i) => {
    if (i != undefined && commentList.value[index].child[i]["uin"] > 0) commentList.value[index].child[i]["avatarState"] = true;
    else if (i == undefined && index != undefined && commentList.value[index]["uin"] > 0) commentList.value[index]["avatarState"] = true;
};

const closeUserInfo = (index, i) => {
    if (i != undefined) commentList.value[index].child[i]["avatarState"] = false;
    else if (index != undefined) commentList.value[index]["avatarState"] = false;
};

// 点击删除
// const commentDelete = (token, index, i) => {
//     $ajax("/api/comment/commentDelete", {
//         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;
//         } else {
//             commentTotalCount.value -= commentList.value[index].childnum;
//             commentList.value.splice(index, 1);
//         }

//         commentTotalCount.value -= 1;
//     });
// };

let dialogVisible = ref(false);
let commemtDelete = {};
// 点击删除
const commentDelete = (token, index, i) => {
    commemtDelete = {
        token,
        index,
        i,
    };
    dialogVisible.value = true;
};

const confirmCommentDelete = () => {
    $ajax("/api/comment/commentDelete", {
        token: commemtDelete.token,
    }).then((res) => {
        if (res.code != 200) {
            ElMessage.error(res.message);
            return;
        }

        if (commemtDelete.i >= 0) {
            commentList.value[commemtDelete.index].child.splice(commemtDelete.i, 1);
            commentList.value[commemtDelete.index].childnum -= 1;
        } else {
            commentTotalCount.value -= commentList.value[commemtDelete.index].childnum;
            commentList.value.splice(commemtDelete.index, 1);
        }

        commentTotalCount.value -= 1;
        dialogVisible.value = false;

        ElMessage.success(res.message || "操作成功");
    });
};

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

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.image || {};

    editCommentState.value = true;

    nextTick(() => {
        console.log("editInput.value", editInputRef.value);
        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;
    $ajax("/api/comment/commentsEditSubmit", {
        content: editInput.value,
        token: editToken,
        image: image ? { aid: image.aid, url: image.url } : null,
    }).then((res) => {
        if (res.code != 200) {
            ElMessage.error(res.message);
            return;
        }

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

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

const closeEditFileUpload = () => (editPicture.value = {});
</script>