// ==UserScript==
// @name         哔哩哔哩推荐-
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  哔哩哔哩推荐模块
// @author       You
// @match        https://*.bilibili.com/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';
   /**
     * 秒 转 可阅读的时长
     * @param secondDuration
     */
    function utilSecond2StrChinese(secondDuration = 0) {
        let day = Math.floor(secondDuration / (60 * 60 * 24));
        secondDuration -= day * (60 * 60 * 24);
        let hour = Math.floor(secondDuration / (60 * 60));
        secondDuration -= hour * (60 * 60);
        let minute = Math.floor(secondDuration / (60));
        secondDuration -= minute * (60);
        return (day ? day + '天' : '')
            + (hour ? hour + '时' : '')
            + (minute ? minute + '分' : '')
            + (secondDuration ? secondDuration + '秒' : '');
    }
    /**
     * 播放量 转 几万播放量
     * @param secondDuration
     */
    function utilPlayTimes2TenThousands(playTimes = 0) {
        if (playTimes < 10000) {
            return playTimes;
        }
        return (playTimes / 10000).toFixed(1) + '万';
    }
    /*时间(今年的没年份)*/
    function utilDate2Str(date) {
        let curDate = new Date();
        return !date ? ''
            : (date.getFullYear() === curDate.getFullYear() ? '' : date.getFullYear() + '年')
            + (date.getMonth() + 1) + '月'
            + date.getDate() + '日';
    }

    let html = `
<a class="btn contact-help" id="open-my-recommend" onclick="document.getElementById('my-bilibili-recommend').style.display='block'">推荐页</a>
<div id="my-bilibili-recommend" style="display:none;">
    <a class="btn" id="close-my-recommend">返回</a>
    <a class="btn" id="refresh-my-recommend">刷新</a>
    <div class="recommend-content" style="text-align: center;">
    </div>
</div>
    `;
    let style = `
    <style>
        #open-my-recommend {
            height: 60px;
            top: calc(50% - 100px);
        }

        div#my-bilibili-recommend {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            background: #FFF;
            z-index: 10000;
            overflow: auto;
        }

        #my-bilibili-recommend .recommend-video {
            width: 360px;
            height: 120px;
            overflow: hidden;
            position: relative;
            margin: 5px;
            display: inline-block;
            text-align: left;
        }

        #my-bilibili-recommend .recommend-video .recommend-video-img {
            width: calc(100% - 150px);
            overflow: hidden;
            height: 100%;
            float: left;
        }

        #my-bilibili-recommend .recommend-video img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        #my-bilibili-recommend a.recommend-video-info {
            display: block;
            float: left;
            width: 150px;
            height: 100%;
            position: relative;
        }

        #my-bilibili-recommend a.recommend-video-info > div {
            padding: 0 5px;
        }

        #my-bilibili-recommend .recommend-video-user {
            position: absolute;
            bottom: 0;
            left: 0;
        }

        #my-bilibili-recommend .recommend-video-time {
            position: absolute;
            bottom: 0;
            right: 0;
        }

        #my-bilibili-recommend .recommend-video-play-times {
            position: absolute;
            bottom: 17px;
        }

        #my-bilibili-recommend .recommend-video-duration {
            position: absolute;
            bottom: 34px;
        }

        #my-bilibili-recommend .recommend-video-play-tags {
            position: absolute;
            bottom: 17px;
            right: 0;
        }
    </style>
    `
    let div = document.createElement('div');
    document.body.append(div);
    div.innerHTML += html + style;
    function getVideoHtml(video) {
        if (document.querySelector('.recommend-video[videoId="'+video.id+'"]') != null) {
            return ``;
        }
        return `
        <div class="recommend-video" title="${video.title}" videoId="${video.id}">
            <div class="recommend-video-img"><a href="${video.uri}" target="_blank"><img src="${video.pic}"></a></div>
            <a class="recommend-video-info" href="${video.uri}" target="_blank">
                <div class="recommend-video-title">${video.title.substring(0, 40)}</div>
                <div class="recommend-video-play-times">${utilPlayTimes2TenThousands(video.stat.view)}</div>
                <div class="recommend-video-user">${video.owner.name}</div>
                <div class="recommend-video-duration">${utilSecond2StrChinese(video.duration)}</div>
            </a>
        </div>
        `
    }
    function eleCommendContent() {
        return document.querySelector('#my-bilibili-recommend .recommend-content');
    }

    document.getElementById('open-my-recommend').onclick = document.getElementById('close-my-recommend').onclick = function () {
        let recommend = document.getElementById('my-bilibili-recommend');
        if (recommend.style.display === 'none') {
            recommend.style.display = 'block';
            document.documentElement.style.overflow = 'hidden';
            if (containerTooLess()) {
                RestGetVideoList();
            }
        } else {
            recommend.style.display = 'none';
            document.documentElement.style.overflow = 'auto';
        }
    };
    document.getElementById('refresh-my-recommend').onclick = function () {
        eleCommendContent().innerHTML = '';
        RestGetVideoList();
    };

    RestGetVideoList();
    function RestGetVideoList() {
        let request = new XMLHttpRequest();
        request.open('GET', 'https://api.bilibili.com/x/web-interface/index/top/rcmd?fresh_type=3&fresh=' + Math.random());
        request.setRequestHeader("If-Modified-Since","0"); // 清除缓存
        request.setRequestHeader('Content-Type', 'application/json');
        request.withCredentials = true;
        // request.setRequestHeader('cookie', document.cookie);
        request.addEventListener('load', function () {
            let newHtml = '';
            for (let video of JSON.parse(this.responseText).data.item) {
                newHtml += getVideoHtml(video);
            }
            eleCommendContent().innerHTML += newHtml;
            if (containerTooLess()) {
                RestGetVideoList()
            }
        })
        request.send();
    }

    document.getElementById('my-bilibili-recommend').onscroll = function (event) {
        let scrollTop = document.getElementById('my-bilibili-recommend').scrollTop;
        let height = document.getElementById('my-bilibili-recommend').clientHeight;
        let contentHeight = 0;
        for (let child of document.getElementById('my-bilibili-recommend').children) {
            contentHeight += child.clientHeight;
        }
        if (scrollTop + height + 50 >= contentHeight) {
            RestGetVideoList();
        }
    };

    function containerTooLess() {
        let height = document.getElementById('my-bilibili-recommend').clientHeight;
        let contentHeight = 0;
        for (let child of document.getElementById('my-bilibili-recommend').children) {
            contentHeight += child.clientHeight;
            if (contentHeight > height) {
                return false;
            }
        }
        return contentHeight < height;
    }
    // Your code here...
})();