// ==UserScript==
// @name         b站首页改造
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  这是一个清爽版b站首页的脚本，可以使得首页只有首页推荐
// @author       Waflare
// @match        https://www.bilibili.com/
// @icon         https://www.google.com/s2/favicons?domain=bilibili.com
// @grant        GM_addStyle
// @grant        GM_xmlhttpRequest
// @require      https://code.jquery.com/jquery-3.6.0.js
// @license      MIT
// @downloadURL none
// ==/UserScript==

(function() {
  'use strict';
  function getFrontPage() {
    let url = 'https://api.bilibili.com/x/web-interface/index/top/rcmd?fresh_type=3';
    return new Promise((resolve, reject) => {
      GM_xmlhttpRequest({
        method: 'GET',
        url: url,
        onload: (r) => {
          let result = JSON.parse(r.response).data.item;
          resolve(result);
        }
      })
    })
  }

  function getTemplate(item) {
    return `
      <div class='w_item' id='${item.bvid}'>
        <img src='${item.pic}' />
        <div class='w_detail'>
          <div class='w_up'>${item.owner.name}</div>
          <div class='w_stat'>
            <div>[播放] ${item.stat.view}</div>
            <div>[点赞] ${item.stat.like}</div>
          </div>
          <div class='w_title'>${item.title}</div>
        </div>
      </div>
    `
  }

  function gotoPage(url) {
    let _url = url;
    return function() {
      console.log(_url);
      window.open(_url, '_blank');
    }
  }

  async function formatData() {
    let data_1 = await getFrontPage();
    let data_2 = await getFrontPage();
    let data = [...data_1, ...data_2];
    console.log(data);
    $('#internationalHeader').after(`
      <div id="w_body">
        <div id="w_content"></div>
      </div>
    `);
    for (let item of data) {
      $('#w_content').append(getTemplate(item));
      $(`#${item.bvid}`).on('click', gotoPage(item.uri));
    }
    $('#w_content').append('<div id="w_btn">更多</div>');
    $('#w_btn').on('click', moreVideo);
  }

  async function moreVideo() {
    let data = await getFrontPage();
    for (let item of data) {
      $('#w_btn').before(getTemplate(item));
      $(`#${item.bvid}`).on('click', gotoPage(item.uri));
    }
  }

  formatData();


  GM_addStyle(`
    .international-home .storey-box {
      display: none;
    }
    .international-home .first-screen {
      display: none;
    }
    #w_body {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }

    @media screen and (max-width: 1870px) {
      #w_content {
        width: 1414px;
      }
      .w_item {
        width: 186px !important;
      }
      #w_btn {
        width: 186px !important;
        height: 193px !important;
        line-height: 193px !important;
      }
    }

    @media screen and (max-width: 1654px) {
      #w_content {
        width: 1198px;
      }
      .w_item {
        width: 186px !important;
      }
      #w_btn {
        width: 186px !important;
        height: 193px !important;
        line-height: 193px !important;
      }
    }

    @media screen and (max-width: 1438px) {
      #w_content {
        width: 999px;
      }
      .w_item {
        width: 186px !important;
      }
      #w_btn {
        width: 186px !important;
        height: 193px !important;
        line-height: 193px !important;
      }
    }

    #w_content {
      max-width: 1630px;
      display: flex;
      justify-content: flex-start;
      flex-flow: wrap;
    }
    .w_item {
      width: 255px;
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      margin-left: 10px;
    }
    .w_item:hover {
      cursor: pointer;
    }
    .w_item > img{
      width: 100%;
    }
    .w_item > .w_detail {
      width: 100%;
    }
    .w_detail > .w_title {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      font-size: 14px;
      line-height: 20px;
    }
    .w_detail > .w_up {
      font-size: 14px;
      font-weight: bolder;
      color: #f1739a;
    }
    .w_detail > .w_stat {
      font-size: 12px;
      font-weight: bolder;
      color: #22397e;
      display: flex;
      justify-content: space-between;
    }
    #w_btn {
      width: 255px;
      height: 235px;
      border: 2px #e0e0e0 dashed;
      border-radius: 8px;
      line-height: 235px;
      font-size: 16px;
      text-align: center;
      color: #e0e0e0;
      margin-left: 10px;
    }
    #w_btn:hover {
      cursor: pointer;
    }
  `)
})();