{{ $base_url := .site.TemplatePath }}
<div id="list-match-upcomming">
    <div class="match_filter_roll">
        <ul id="match_filter" class="match_filter">
            <li class="tabs match_filter_item active" data-type="0"><a href="#">全部比赛</a>
            </li>
            <li class="tabs match_filter_item" data-type="3"><a href="#">今日热门</a></li>
            <li class="tabs match_filter_item" data-type="1"><a href="#">足球</a></li>
            <li class="tabs match_filter_item" data-type="2"><a href="#">篮球</a></li>
        </ul>
    </div>
    <div class="main-tab-content">
        <div class="list-match-table">
            <div class="match-table-item">
                <div class="match-table-content">
                    <div id="match_wrapper" class="list-match-container upcoming" style="min-height: 300px;">
                       <!-- 防止布局位移的占位符 -->
                    </div>
                    <p class="zb-area_btn load_more" style="width: 100%; 
                        border-radius: 5px;
                        text-align: center;
                        padding: .4rem;
                        cursor: pointer;
                        border: solid 1px #f6f6f6;
                        color: #000;
                        background: #f6f6f6;box-sizing: border-box;margin-top: 10px;display: none;">显示更多比赛</p>
                </div>
            </div>
        </div>
    </div>

</div>
<script>

    document.addEventListener('DOMContentLoaded', function () {
        // 仅需 DOM 结构加载完成时执行（无需等待图片等资源）
        console.log('DOM 加载完成');

        // 示例操作：快速初始化交互功能
        setupDropdownMenu();
    });
    const setupDropdownMenu = () => {
        let controller = new AbortController();
        let loading = false;

        const tabs = document.getElementById("match_filter");
        const wrapper = document.getElementById("match_wrapper");
        console.log(wrapper, 'wrapper')
        const data = [];

        /**缓存 */
        const cache = new Map();

        /**
         * 更新方法
         * @param { AbortController } controller 控制器
         * @param { Record<string,unknown>[] } data 数据
         * @param { number } end 长度
         */
        const update = async (controller, data, end) => {
            console.log(controller, data, end, 'controller, data, end')
            loading = true;
            console.time("update");
            await new Promise((resolve) => window.requestAnimationFrame(resolve));

            const render = async (data) => {
                for (let i = 0; i < data.length; i++) {
                    const $item = data[i];
                    const $key = `${$item.sportId}_${$item.id}`;
                    const $item_el = (() => {
                        if (cache.has($key)) {
                            return cache.get($key);
                        } else {
                            /**@type {HTMLLIElement} */
                            const $item_el = new DOMParser().parseFromString(`
                             <a href="/${ $item.router }" class="match-row" data-type="${ $item.sportId }"
                            data-Competitionid="${ $item.competitionId }">
                            <div class="time-league-wrapper">
                                <div class="match-time-wrapper">
                                    <span class="match-time">${String($item.matchTs.getMonth() + 1).padStart(2, "0")}-${String($item.matchTs.getDate()).padStart(2, "0")} ${String($item.matchTs.getHours()).padStart(2, "0")}:${String($item.matchTs.getMinutes()).padStart(2, "0")}</span>
                                </div>
                                <div class="match-league-wrapper">
                                    <div class="league-name">
                                        ${ $item.comp }
                                    </div>
                                </div>
                            </div>
                            <div class="right-row">
                                <div class="list-team-wrapper">
                                    <div class="item-team team-a">
                                        <div class="club-name-wrapper">
                                            <div class="club-name">
                                                ${ $item.home }
                                            </div>
                                        </div>
                                        <img src="${ $item.homeLogo }" loading="lazy" alt="${$item.home }" class="club-image">
                                    </div>
                                    <div class="score-wrapper ">
                                        ${ $item.homeScores } - ${ $item.awayScores }
                                    </div>
                                    <div class="item-team team-b">
                                        <img src="${ $item.awayLogo }" loading="lazy" alt="${$item.away }" class="club-image">
                                        <div class="club-name-wrapper">
                                            <div class="club-name">
                                                ${ $item.away }
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button
                                    class="bt-view">${$item.buttonName }</button>
                            </div>
                        </a>
                            `, "text/html").body.children.item(0);
                            const live = () => {
                                /**@type {HTMLAnchorElement} */
                                const anchor = $item_el.querySelector(".bt-view");
                                anchor.classList.add("start");
                                return anchor;
                            };
                            const play = () => {
                                /**@type {HTMLAnchorElement} */
                                const anchor = $item_el.querySelector(".bt-view");
                                anchor.classList.add("begin");
                                return anchor;
                            };
                            const back = () => {
                                /**@type {HTMLAnchorElement} */
                                const anchor = $item_el.querySelector(".bt-view");
                                anchor.classList.add("recoad");
                                return anchor;
                            };
                            switch ($item.sportId) {
                                case 1: /* 足球 */{
                                    if ($item.statusId >= 2 && $item.statusId < 8) live(); else if ($item.statusId === 8) back(); else play();
                                    break;
                                }
                                case 2: /* 篮球 */{
                                    if ($item.statusId >= 2 && $item.statusId < 10) live(); else if ($item.statusId === 10) back(); else play();
                                    break;
                                }
                            }
                            cache.set($key, $item_el);
                            return $item_el;
                        }
                    })();

                    if (controller.signal.aborted) break;
                    if ($item.isTop === 1) {
                        $item_el.classList.add("is_top");
                        for (const $el of wrapper.children) {
                            if ($el.classList.contains("is_top")) continue;
                            wrapper.insertBefore($item_el, $el);
                            break;
                        }
                    } else wrapper.appendChild($item_el);
                    await new Promise((resolve) => window.setTimeout(resolve, 0, void 0));
                    if (controller.signal.aborted) break;
                }
                return data.length
            }

            let start = 0;
            console.log(wrapper, 'wrapper')
            start += await render(data.slice(0, end)).then((length) => (wrapper.nextElementSibling.style.setProperty("display", (data.length > (start + length) ? "block" : "none")), length));

            controller.signal.addEventListener("abort", () => wrapper.nextElementSibling.style.setProperty("display", "none"), { once: true });
            wrapper.nextElementSibling.addEventListener("click", async ($event) => {
                $event.preventDefault();
                start += await render(data.slice(start, start + 200)).then((length) => (wrapper.nextElementSibling.style.setProperty("display", (data.length > (start + length) ? "block" : "none")), length));
            }, { signal: controller.signal });


            console.timeEnd("update");
            loading = false;
        }

        tabs.addEventListener("click", async ($event) => {
            for (const item of tabs?.querySelectorAll(".match_filter_item")) {
                if (item.contains($event.target)) {
                    for (const el of tabs?.querySelectorAll(".match_filter_item.active")) el.classList.remove("active");
                    item.classList.add("active");
                    /* 调用更新方法 */
                    const $controller = new AbortController();
                    controller.abort();
                    while (loading) {
                        await new Promise((resolve) => window.requestAnimationFrame(resolve));
                    }
                    controller = $controller;

                    for (let i = wrapper.children.length - 1; i >= 0; i--) wrapper.removeChild(wrapper.children[i]);
                    const type = item instanceof HTMLElement ? item.getAttribute("data-type") : "0";
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].type === type) {
                            const list = data[i].list;
                            let end = 0;
                            if (list.length) {
                                const max = Math.min(...list.map((v) => v.matchTs.getTime())) + (3.6e+6 * 4);
                                while (list[end] && list[end].matchTs.getTime() <= max) end++;
                            }
                            update($controller, list, end);
                            break;
                        }
                    }
                    break;
                }
            }
        });
        /**首次更新 => update() */
        const hot_id = [/* {{ range $index, $item := .hotCompetitionList }} */"competition_id={{ $item.Id | urlencode }}&sport_id={{ $item.SportId | urlencode }}",/* {{ end }} */];
        const api_src = new URL("/getMatchListJsonp", location.origin);
        api_src.searchParams.set("days", "1");
        fetch(api_src).then((response) => response.json()).then(({ matchLiveList }) => {
            const list = [];
            for (let i = 0; i < matchLiveList.length; i++) list.push({ ...matchLiveList[i], matchTs: new Date(matchLiveList[i].matchTs * 1000) });
            list.sort((a, b) => a.matchTs.getTime() - b.matchTs.getTime());
            const contest_all = [];
            const contest_football = [];
            const contest_basketball = [];
            const contest_hot = [];
            for (let i = 0; i < list.length; i++) {
                if (list[i].sportId === 1) contest_football.push(list[i]);
                if (list[i].sportId === 2) contest_basketball.push(list[i]);
                if (hot_id.includes(`competition_id=${encodeURIComponent(list[i].competitionId)}&sport_id=${encodeURIComponent(list[i].sportId)}`)) contest_hot.push(list[i]);
            }

            data.unshift({ type: "3", list: contest_hot });
            data.unshift({ type: "2", list: contest_basketball });
            data.unshift({ type: "1", list: contest_football });
            data.unshift({ type: "0", list });

            ((item) => {
                for (let i = wrapper.children.length - 1; i >= 0; i--) wrapper.removeChild(wrapper.children[i]);
                const type = item instanceof HTMLElement ? item.getAttribute("data-type") : "0";
                for (let i = 0; i < data.length; i++) {
                    if (data[i]?.type === type) {
                        const list = data[i].list;
                        let end = 0;
                        if (list.length) {
                            const max = Math.min(...list.map((v) => v.matchTs.getTime())) + (3.6e+6 * 4);
                            while (list[end] && list[end].matchTs.getTime() <= max) end++;
                        }
                        update(controller, list, end);
                        console.log('yyy')
                        break;
                    }
                }
            })(tabs?.querySelector(".match_filter_item.active"));
        });
    };
</script>