<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 数据统计&音乐偏好 -->
<div class="author-content" th:fragment="statistics-map">
    <div class="about-statistic author-content-item"
         style="background: url(https://bu.dusays.com/2023/03/12/640dc8c72f623.webp);">
        <div class="card-content">
            <div class="author-content-item-tips">数据</div>
            <span class="author-content-item-title">访问统计</span>
            <div id="statistic"></div>
            <div class="post-tips">统计信息来自 <a href="https://invite.51.la/1NzKqTeb?target=V6" rel="noopener nofollow"
                                                   target="_blank">51la网站统计</a></div>
            <div class="banner-button-group"><a class="banner-button" onclick="pjax.loadUrl('/archives')"
                                                data-pjax-state=""><i class="haofont hao-icon-circle-arrow-up-right-1"></i><span
                    class="banner-button-text">文章隧道</span></a></div>
        </div>
    </div>


    <div class="author-content-item-group column mapAndInfo">
        <div class="author-content-item map single" style="padding: 0;">
            <div id="mapContainer" style="height: 100%;"></div>
            <span class="map-title">我现在住在
                <b>[[${theme.config.about.map.StrengthenTitle}]]</b></span>
        </div>
        <div class="author-content-item selfInfo single"
             th:if="${not #lists.isEmpty(theme.config.about.map.authorInfo)}"
             th:with="texts = ${theme.config.about.map.authorInfo}">
            <div th:if="${theme.config.about.map.authorInfo.size()}>'0'"><span class="selfInfo-title"
                                                                               th:text="${texts[0].authorInfoTitle}">生于</span><span class="selfInfo-content"
                                                                                                                                      id="selfInfo-content-year" th:style="'color:' + ${texts[0].authorInfoColor}"
                                                                                                                                      th:text="${texts[0].authorInfoContent}">2000</span>
            </div>
            <div th:if="${theme.config.about.map.authorInfo.size()}>'1'"><span class="selfInfo-title"
                                                                               th:text="${texts[1].authorInfoTitle}">太原理工大学</span><span class="selfInfo-content"
                                                                                                                                              th:style="'color:' + ${texts[1].authorInfoColor}"
                                                                                                                                              th:text="${texts[1].authorInfoContent}">计算机科学</span>
            </div>
            <div th:if="${theme.config.about.map.authorInfo.size()}>'2'"><span class="selfInfo-title"
                                                                               th:text="${texts[2].authorInfoTitle}">现在职业</span><span class="selfInfo-content"
                                                                                                                                          th:style="'color:' + ${texts[2].authorInfoColor}"
                                                                                                                                          th:text="${texts[2].authorInfoContent}">BI工程师</span>
            </div>
        </div>
    </div>
    <style>
        .author-content-item.map {
            background: none !important;
            min-height: 160px;
            max-height: 400px;
            position: relative;
            overflow: hidden;
            margin-bottom: 0.5rem;
            height: 60%;
            background-size: 100%;
            transition: 1s ease-in-out;
        }

        [data-theme=dark] .author-content-item.map {
            background: none !important;
            background-size: 100%;
        }
    </style>
    <script>
        // 链接替换即可，不需要后面的参数
        fetch("https://v6-widget.51.la/v6/[[${theme.config.about.LingQueMonitorID}]]/quote.js")
            .then(res => res.text())
            .then(data => {
                let title = ["最近活跃", "今日人数", "今日访问", "昨日人数", "昨日访问", "本月访问", "总访问量"];
                // let num = data.match(/(?<=<\/span><span>).*?(?=<\/span><\/p>)/g)
                let num = data.match(/(<\/span><span>).*?(\/span><\/p>)/g);

                num = num.map(el => {
                    let val = el.replace(/(<\/span><span>)/g, "");
                    let str = val.replace(/(<\/span><\/p>)/g, "");
                    return str;
                });

                let statisticEl = document.getElementById("statistic");

                // 自定义不显示哪个或者显示哪个，如下为不显示 最近活跃访客 和 总访问量
                let statistic = [];
                for (let i = 0; i < num.length; i++) {
                    if (!statisticEl) return;
                    if (i == 0) continue;
                    statisticEl.innerHTML +=
                        "<div><span>" + title[i] + "</span><span id=" + title[i] + ">" + num[i] + "</span></div>";
                    queueMicrotask(() => {
                        statistic.push(
                            new CountUp(title[i], 0, num[i], 0, 2, {
                                useEasing: true,
                                useGrouping: true,
                                separator: ",",
                                decimal: ".",
                                prefix: "",
                                suffix: "",
                            })
                        );
                    });
                }

                let statisticElement = document.querySelector(".about-statistic.author-content-item");
                function statisticUP() {
                    if (!statisticElement) return;

                    const callback = (entries, observer) => {
                        entries.forEach(entry => {
                            if (entry.isIntersecting) {
                                for (let i = 0; i < num.length; i++) {
                                    if (i == 0) continue;
                                    queueMicrotask(() => {
                                        statistic[i - 1].start();
                                    });
                                }
                                observer.disconnect(); // 停止观察元素，因为不再需要触发此回调
                            }
                        });
                    };

                    const options = {
                        root: null,
                        rootMargin: "0px",
                        threshold: 0
                    };
                    const observer = new IntersectionObserver(callback, options);
                    observer.observe(statisticElement);
                }
                statisticUP()
            });
    </script>
    <script defer>
        var t = new TMap.LatLng([[${ theme.config.about.map.mapLocation }]])
            , n = new TMap.Map(document.getElementById("mapContainer"), {
            center: t,
            zoom: 12,
        });
        n.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM),
            n.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION),
            n.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE),
            new TMap.MultiMarker({
                map: n,
                styles: {
                    marker: new TMap.MarkerStyle({
                        width: 20,
                        height: 30,
                        anchor: {
                            x: 10,
                            y: 30
                        }
                    })
                },
                geometries: [{
                    id: "marker",
                    position: t
                }]
            })

        // 去除logo及水印
        var a = document.querySelector('canvas+div:last-child')
        a.style.display = 'none'
    </script>
</div>

</html>