const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide } = Vue;

const { itemForum } = await import(withVer("../component/item-forum/item-forum.js"));
const { itemOffer } = await import(withVer("../component/item-offer/item-offer.js"));
const { itemSummary } = await import(withVer("../component/item-summary/item-summary.js"));
const { itemVote } = await import(withVer("../component/item-vote/item-vote.js"));
const { itemMj } = await import(withVer("../component/item-mj/item-mj.js"));
const { itemTenement } = await import(withVer("../component/item-tenement/item-tenement.js"));
const { headTop } = await import(withVer("../component/head-top/head-top.js"));
const { loadBox } = await import(withVer("../component/load-box/load-box.js"));
const { itemProject } = await import(withVer("../component/item-project/item-project.js"));
const { latestList } = await import(withVer("../component/latest-list/latest-list.js"));

const appIndex = createApp({
    setup() {
        onMounted(() => {
            getUserInfoWin();
            // const preLoader = document.getElementById("pre-loader");
            // if (preLoader) preLoader.style.display = "none";
        });

        let isLogin = ref(false);
        let realname = ref(0); // 是否已经实名
        let userInfoWin = ref({});

        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"]) isLogin.value = true;
                else ajax_login();
            } else ajax_login();
        };

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

        let pastList = ref([]);

        onMounted(() => {
            offerListScrolling();
            getSectionList();

            getList();

            window.addEventListener("scroll", handleScroll);

            getTalkingRecommend();
            getTopicHandpicked();
            getTopicLatest();

            document.querySelectorAll(".vuehide").forEach((item) => (item.style.display = "none"));
        });

        let ongoingbj = ref({}); // 话题数据

        const getTalkingRecommend = () => {
            ajaxGet("/v2/api/forum/talkingRecommend").then((res) => {
                if (res.code != 200) return;
                let data = res["data"] || [];
                const ongoing = data.ongoing || [];

                ongoing.forEach((item) => {
                    if (Array.isArray(item.commentUser)) item.commentUser = item.commentUser.slice(0, 4);
                });

                const getTargetItem = (arr) => {
                    const target = arr.find((item) => item.state === 1);
                    return target !== undefined ? target : arr.length > 0 ? arr[Math.floor(Math.random() * arr.length)] : null; // 随机返回一个
                };

                ongoingbj.value = getTargetItem(ongoing || []) || {};
                const past = data.past || [];
                pastList.value = past.sort(() => Math.random() - 0.5).slice(0, 5);
            });
        };

        let topicHandpickedList = ref([]); // 精选列表
        const getTopicHandpicked = (uniqid) => {
            ajaxGet(`/v2/api/forum/topicHandpicked?limit=16`).then((res) => {
                if (res.code != 200) return;
                let data = res["data"] || [];
                topicHandpickedList.value = data;
            });
        };

        let offer = ref([]); // 面经列表
        let vote = ref([]); // 面经列表
        let interviewexperience = ref([]); // 面经列表
        const getTopicLatest = () => {
            ajaxGet(`/v2/api/forum/getTopicLatest?limit=4`).then((res) => {
                const data = res.data || [];

                data.vote.forEach((item) => {
                    if (!item.title) {
                        item.title = item.content;
                        item.content = "";
                    }
                });

                offer.value = data.offer;
                vote.value = data.vote;
                interviewexperience.value = data.interviewexperience;

                nextTick(() => {});
            });
        };

        const sidebarFixed = ref(false);

        const handleScroll = () => {
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            const clientHeight = window.innerHeight;

            // 列表下 滑动到底部 获取新数据
            if (scrollTop + clientHeight >= scrollHeight - 200) getList();

            // // 侧边栏滚动固定
            // if (scrollTop >= matterRef.value.offsetTop + sidebarRef.value.offsetHeight - clientHeight) sidebarFixed.value = true;
            // else sidebarFixed.value = false;

            sidebarHeight.value = -(sidebarRef.value.offsetHeight - window.innerHeight);

            if (sidebarHeight.value > 0) sidebarHeight.value = 12;
        };

        let offerlist = ref([]); // offer 列表滚动 数据

        const offerListRef = ref(null);
        const custom_2AdvRef = ref(null);

        // 处理 offer 列表滚动
        const offerListScrolling = (data) => {
            ajaxGet("https://api.gter.net/v2/api/forum/getDynamic").then((res) => {
                if (res.code == 200) {
                    let data = res["data"] || [];

                    data.forEach((item) => (item.date = strtimeago(item.created_at)));

                    let targetValue = [];
                    targetValue = [...data, ...data.slice(0, 6)];

                    offerlist.value = targetValue;
                    nextTick(() => autoOfferListScroll());
                }
            });
        };

        let offerTimer = null;

        let scrollup = null;
        // offer list 滚动
        const autoOfferListScroll = () => {
            console.log("autoOfferListScroll");

            if (typeof ScrollText !== "function") {
                setTimeout(() => autoOfferListScroll(), 500);
                return;
            }
            console.log("scrollup");

            if (scrollup) return;
            scrollup = new ScrollText("offer-box");
            scrollup.LineHeight = 56;
            scrollup.Amount = 1;
            scrollup.Delay = 1;
            scrollup.Start();
            scrollup.Direction = "up";
        };

        // 鼠标移入
        const offerMouseover = (event) => {
            if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) clearInterval(offerTimer);
        };

        // 鼠标移出
        const offerMouseout = (event) => {
            if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) autoOfferListScroll();
        };

        let sectionList = ref([]);
        const getSectionList = () => {
            ajaxGet("/v2/api/forum/getSectionList").then((res) => {
                if (res.code != 200) return;
                const data = res.data || [];
                let obj = {};
                data.forEach((element) => (obj[element.cid] = element));
                sectionList.value = groupByCid(data);
            });
        };

        const groupByCid = (arr) => {
            const groups = arr.reduce((acc, item) => {
                const cid = item.cid ?? "default"; // 若 cid 不存在，归为 'default' 组
                if (!acc[cid]) {
                    acc[cid] = [];
                }
                acc[cid].push(item);
                return acc;
            }, {});

            return Object.values(groups);
        };

        let loading = ref(false);
        let page = ref(1);
        let list = ref([]);
        const getList = () => {
            if (loading.value || page.value == 0) return;
            loading.value = true;
            ajaxGet(`/v2/api/forum/topicLists?page=${page.value || 1}`)
                .then((res) => {
                    if (res.code != 200) return;
                    let data = res.data;
                    list.value = list.value.concat(data.data);
                    page.value = data.count > data.limit * data.page ? page.value + 1 : 0;

                    loading.value = false;
                })
                .catch((err) => {
                    err = err.data;
                    if (err.code == 401) goLogin();
                    loading.value = false;
                });
        };

        const sidebarRef = ref(null);
        const matterRef = ref(null);

        let sidebarHeight = ref(0);

        const handleCheckAttest = (e) => {
            if (!isLogin.value) {
                goLogin();
                e.preventDefault(); // 阻止默认跳转（即使 href 为链接，也强制拦截）
                return;
            }
            if (realname.value === 0 && userInfoWin.value?.uin > 0) {
                openAttest();
                e.preventDefault(); // 阻止默认跳转（即使 href 为链接，也强制拦截）
            }
        };

        onMounted(() => {
            SignInComponent.initComponent()
        })

        return { handleCheckAttest, sidebarHeight, matterRef, sidebarFixed, sidebarRef, loading, interviewexperience, vote, offer, topicHandpickedList, list, sectionList, custom_2AdvRef, ongoingbj, pastList, offerMouseover, offerMouseout, offerlist, offerListRef };
    },
});

appIndex.component("headTop", headTop);
appIndex.component("itemForum", itemForum);
appIndex.component("itemOffer", itemOffer);
appIndex.component("itemSummary", itemSummary);
appIndex.component("itemVote", itemVote);
appIndex.component("itemMj", itemMj);
appIndex.component("itemTenement", itemTenement);
appIndex.component("itemProject", itemProject);
appIndex.component("latestList", latestList);
appIndex.component("load-box", loadBox);

appIndex.mount("#appIndex");