const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch } = Vue;
import { itemForum } from "../component/item-forum/item-forum.js";

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

            init();
            handpick();
            getTags();
            getList();
        });

        let sectionList = ref([]);
        let section = ref("Lz9aimSLXeim");

        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 = insertLineBetweenCategories(data, "cid");
            });
        };

        // 将版块按 cid 分格开
        const insertLineBetweenCategories = (arr) => {
            if (!arr.length) return [];

            const sortedArr = [...arr].sort((a, b) => {
                if (a["cid"] < b["cid"]) return -1;
                if (a["cid"] > b["cid"]) return 1;
                return 0;
            });

            const result = [sortedArr[0]];
            let prevCategory = sortedArr[0]["cid"];

            for (let i = 1; i < sortedArr.length; i++) {
                const current = sortedArr[i];
                const currentCategory = current["cid"];

                if (currentCategory !== prevCategory) {
                    result.push({
                        key: "line",
                    });
                    prevCategory = currentCategory;
                }
                result.push(current);
            }

            return result;
        };

        let info = ref({});

        const init = () => {
            ajaxget(`/v2/api/forum/getSectionDetails?sectionid=${section.value}`).then((res) => {
                if (res.code != 200) return;
                const data = res.data || {};
                info.value = data;
            });
        };

        let handpickList = ref([]);
        const handpick = () => {
            ajaxget(`/v2/api/forum/topicHandpicked?sectionid=${section.value}`).then((res) => {
                let data = res.data || [];
                handpickList.value = data;
            });
        };

        let tagsList = ref([]);
        const getTags = () => {
            ajaxget(`/v2/api/forum/sectionTags?sectionid=${section.value}`).then((res) => {
                if (res.code != 200) return;
                const data = res.data || {};
                tagsList.value = data;
            });
        };

        let loading = false;
        let page = ref(1);
        let count = ref(0);
        let list = ref([]);
        const getList = () => {
            if (loading || page.value == 0) return;
            loading = true;
            ajaxget(`/v2/api/forum/topicLists?type=thread&page=${page.value || 1}&sectionid=${section.value}`)
                .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;
                    count.value = data.count;
                    loading = false;
                    console.log(list.value[0]);
                    
                })
                .catch((err) => {
                    console.log("err", err);

                    err = err.data;
                    if (err.code == 401) openLoginBtnState();
                    loading = false;
                });
        };

        return { signInAlreadyState, sectionList, section, info, handpickList, tagsList, list };
    },
});
appSectionIndex.component("item-forum", itemForum);
appSectionIndex.mount("#sectionIndex");