const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide } = Vue;
import { itemForum } from "../component/item-forum/item-forum.js";
import { itemOffer } from "../component/item-offer/item-offer.js";
import { itemSummary } from "../component/item-summary/item-summary.js";
import { itemVote } from "../component/item-vote/item-vote.js";
import { itemMj } from "../component/item-mj/item-mj.js";
import { itemTenement } from "../component/item-tenement/item-tenement.js";
import { latestList } from "../component/latest-list/latest-list.js";
import { slideshowBox } from "../component/slideshow-box/slideshow-box.js";
import { like } from "../component/like/like.js";

const appSectionIndex = createApp({
    setup() {
        let signInAlreadyState = ref(false);

        let permissions = ref([]);

        onMounted(() => {
            getUserInfoWin();

            setTimeout(() => (permissions.value = window["permissions"] || []), 1000);
        });

        let isLogin = ref(true);
        let realname = ref(1); // 是否已经实名
        let userInfoWin = ref({
            authority: ["comment.edit", "comment.delete", "offercollege.hide", "offersummary.hide", "mj.hide", "topic:manager", "topic:hide"],
            avatar: "https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WFVSEKWOikN42jDKLNjtax7HL4xtfMOJSdU9oWFhY2E~/middle?random=1761733169",
            groupid: 3,
            nickname: "肖荣豪",
            realname: 1,
            token: "01346a38444d71aaadb3adad52b52c39",
            uid: 500144,
            uin: 4238049,
        });

        const getUserInfoWin = () => {
            const checkUser = () => {
                const user = window.userInfoWin;
                if (!user) return;
                document.removeEventListener("getUser", checkUser);
                realname.value = user.realname;
                userInfoWin.value = user;
                if (user?.uin > 0 || user?.uid > 0) isLogin.value = true;
            };
            document.addEventListener("getUser", checkUser);
        };

        const openAttest = () => {
            const handleAttestClose = () => {
                document.removeEventListener("closeAttest", handleAttestClose);
                realname.value = window.userInfoWin?.realname || 0;
            };
            // 启动认证流程时添加监听
            document.addEventListener("closeAttest", handleAttestClose);
            loadAttest(2);
        };

        // 跳转登录
        const goLogin = () => {
            if (typeof window === "undefined") return;
            if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) {
                if (window["userInfoWin"]["uid"]) isNeedLogin.value = false;
                else ajax_login();
            } else ajax_login();
        };

        provide("isLogin", isLogin);
        provide("userInfoWin", userInfoWin);
        provide("realname", realname);
        provide("openAttest", openAttest);
        provide("goLogin", goLogin);

        let authorInfo = ref({});
        let info = ref({});
        let ismyself = ref(false);

        let timestamp = ref("");
        let updatedTime = ref("");
        let token = "";
        let uniqid = "";

        let sectionn = ref([]);
        let tags = ref([]);

        onMounted(() => {
            const params = getUrlParams();
            uniqid = params.uniqid || "";

            init();
        });

        const init = () => {
            ajaxget(`/v2/api/forum/getTopicDetails?uniqid=${uniqid}`).then((res) => {
                const data = res.data;

                let targetInfo = data.info;

                if (!targetInfo.hidden) targetInfo.hidden = 0;

                // 替换换行
                targetInfo.content = targetInfo.content?.replace(/\n/g, "<br>") || "";

                if (!targetInfo.content) {
                    targetInfo.content = targetInfo.title;
                    targetInfo.title = "";
                }

                authorInfo.value = Array.isArray(data.authorInfo) ? null : data.authorInfo;
                ismyself.value = data.ismyself || false;

                sectionn.value = targetInfo.sectionn;
                tags.value = targetInfo.tags;

                timestamp.value = strtimeago(targetInfo.release_at, 4);
                updatedTime.value = targetInfo.updated_at ? strtimeago(targetInfo.updated_at, 4) : null;
                info.value = targetInfo;

                token = data.token;

                getAuthorInfo();
                getTopicOperation();

                getCoinConfig();

                getRelatedTopics();

                getComment();
            });
        };

        let count = ref(0);
        let medal = ref([]);
        const getAuthorInfo = () => {
            ajaxget(`/v2/api/forum/getSpaceDetail?uid=${authorInfo.value.uid || 0}&uin=${authorInfo.value.uin || 0}`).then((res) => {
                const data = res.data;
                const countList = data.count || [];
                count.value = countList.reduce((sum, item) => {
                    const currentCount = Number(item.count) || 0;
                    return sum + currentCount;
                }, 0);

                medal.value = data.medal || [];
                authorInfo.value = data.info;
                getCreationList(data.token);
            });
        };

        let recentlyList = ref([]);
        const getCreationList = (token) => {
            ajaxget(`/v2/api/forum/getSpaceTopicList?token=${token}&simple=1`).then((res) => {
                const data = res.data;
                recentlyList.value = data.data || [];
                recentlyList.value = recentlyList.value.slice(0, 8);
            });
        };

        let islike = ref(0);
        let iscollect = ref(0);

        const getTopicOperation = () => {
            ajax(`/v2/api/forum/getTopicOperation`, {
                token,
                actions: ["like", "collection"],
            }).then((res) => {
                const data = res.data;
                const like = data.like;
                const collection = data.collection;

                islike.value = like.status;
                iscollect.value = collection.status;
            });
        };

        let isLikeGif = ref(false);

        const likeClick = () => {
            ajax(`/v2/api/forum/postTopicLike`, {
                token,
            }).then((res) => {
                if (res.code != 200) {
                    creationAlertBox("error", res.message);
                    return;
                }
                const data = res.data;
                islike.value = data.status;
                info.value.likes = data.likes;

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

        const collectClick = () => {
            ajax(`/v2/api/forum/postTopicCollect`, {
                token,
            }).then((res) => {
                if (res.code != 200) {
                    creationAlertBox("error", res.message);
                    return;
                }
                const data = res.data;
                iscollect.value = data.status;
                info.value.collections = data.collections;
            });
        };

        let strategy = ref("");
        let mybalance = ref(0);
        let defaultcoinnum = 0;

        const getCoinConfig = () => {
            ajaxget(`/v2/api/forum/getCoinConfig`).then((res) => {
                const data = res.data;
                strategy.value = data.config.strategy.url || 0;
                mybalance.value = data.mybalance || 0;
                defaultcoinnum = data.defaultcoinnum || 0;
            });
        };

        let coinsState = ref(false);
        const openCoinBox = () => {
            coinsState.value = true;
            document.body.style.overflow = "hidden";
            if (!coinListRequest) getCoinRankList();
        };

        const closeCoinBox = () => {
            coinsState.value = false;
            document.body.style.overflow = "auto";
        };

        let coinAmount = ref("");

        const coinSubmit = () => {
            const num = Number(coinAmount.value || defaultcoinnum) || 0;
            ajax(`/v2/api/forum/postTopicCoin`, {
                token,
                num,
            })
                .then((res) => {
                    if (res.code == 200) creationAlertBox("success", res.message);
                    else creationAlertBox("error", res.message);

                    if (res.code != 200) return;

                    let data = res.data;

                    mybalance.value = mybalance.value - num || 0;
                    coinAmount.value = "";
                    info.value.coins = data.coins || 0;

                    coinNubmer.value = 0;
                    coinList.value = [];
                    getCoinRankList();
                })
                .finally(() => {
                    // wx.hideLoading();
                });
        };

        let coinNubmer = ref(0);
        let coinList = ref([]);
        let coinListRequest = false; // 控制请求次数
        const getCoinRankList = () => {
            ajaxget(`/v2/api/forum/getCoinRankList?token=${token}&limit=1000`).then((res) => {
                const data = res.data;
                coinNubmer.value = data.nubmer;
                coinList.value = data.data;
                coinListRequest = true;
            });
        };

        let relatedList = ref([]);
        let relatedTime = ref("");
        const getRelatedTopics = () => {
            ajaxget(`/v2/api/forum/getRelatedTopics?uniqid=${uniqid}&limit=8`).then((res) => {
                const data = res.data;
                relatedTime.value = data.updated_at || "";
                relatedList.value = data.list || [];
            });
        };

        let alreadyCommentIdList = [];
        let commentPage = ref(1);
        let isgetCommentSate = false;
        let commentList = ref([]);
        let commentTotalCount = ref(0);

        const getComment = () => {
            if (commentPage.value == 0 || isgetCommentSate) return;
            isgetCommentSate = true;
            ajaxget(`/v2/api/forum/getCommentList?token=${token}&page=${commentPage.value}&limit=1500`)
                .then((res) => {
                    if (res.code != 200) {
                        creationAlertBox("error", res.message || "");
                        return;
                    }
                    let data = res.data;

                    data.data.forEach((element, index) => {
                        element.timestamp = strtimeago(element.created_at, 4);

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

                    if (commentPage.value > 1) {
                        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);
                    commentTotalCount.value = data.count;

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

                    commentPage.value = data.count > commentList.value.length ? commentPage.value + 1 : 0;
                })
                .finally(() => {
                    isgetCommentSate = false;
                });
        };

        let picture = ref({});

        return { permissions, commentList, commentPage, commentTotalCount, picture, userInfoWin, relatedList, relatedTime, coinNubmer, coinList, coinAmount, coinSubmit, strategy, mybalance, coinsState, openCoinBox, closeCoinBox, isLikeGif, likeClick, collectClick, islike, iscollect, recentlyList, medal, count, sectionn, tags, signInAlreadyState, authorInfo, info, timestamp, updatedTime };
    },
});

appSectionIndex.component("itemForum", itemForum);
appSectionIndex.component("itemOffer", itemOffer);
appSectionIndex.component("itemSummary", itemSummary);
appSectionIndex.component("itemVote", itemVote);
appSectionIndex.component("itemMj", itemMj);
appSectionIndex.component("itemTenement", itemTenement);
appSectionIndex.component("latestList", latestList);
appSectionIndex.component("slideshowBox", slideshowBox);
appSectionIndex.component("like", like);

appSectionIndex.mount("#details");