// ==UserScript==
// @name         显示哔哩哔哩番剧出差
// @namespace    http://tampermonkey.net/
// @version      0.1.10
// @description  动态页面显示哔哩哔哩番剧出差
// @author       溶酶菌
// @match        *://t.bilibili.com*
// @icon         https://www.bilibili.com/favicon.ico
// @grant        none
// @downloadURL none
// ==/UserScript==

(function () {
  'use strict';
  let offset = ''
  function dateFormat(fmt, date) {
    let ret;
    const opt = {
      "Y+": date.getFullYear().toString(),        // 年
      "m+": (date.getMonth() + 1).toString(),     // 月
      "d+": date.getDate().toString(),            // 日
      "H+": date.getHours().toString(),           // 时
      "M+": date.getMinutes().toString(),         // 分
      "S+": date.getSeconds().toString()          // 秒
      // 有其他格式化字符需求可以继续添加，必须转化成字符串
    };
    for (let k in opt) {
      ret = new RegExp("(" + k + ")").exec(fmt);
      if (ret) {
        fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
      };
    };
    return fmt;
  }
  let loadData = function () {
    let originCt = document.querySelector("#app > div > div.home-page.f-clear > div.home-container > div > div.center-panel > div.card-list > div.feed-card > div:nth-child(2)")
    originCt.style.display = 'none'
    fetch(`https://api.vc.bilibili.com/dynamic_svr/v1/dynamic_svr/w_dyn_personal?host_uid=11783021&offset=${offset}`, {
      "headers": {
        "accept": "application/json, text/plain, */*",
        "accept-language": "zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7",
        "sec-ch-ua": "\" Not;A Brand\";v=\"99\", \"Google Chrome\";v=\"91\", \"Chromium\";v=\"91\"",
        "sec-ch-ua-mobile": "?0",
        "sec-fetch-dest": "empty",
        "sec-fetch-mode": "cors",
        "sec-fetch-site": "same-site"
      },
      "referrer": "https://t.bilibili.com/",
      "referrerPolicy": "strict-origin-when-cross-origin",
      "body": null,
      "method": "GET",
      "mode": "cors",
      "credentials": "include"
    }).then(res => res.json())
      .then(res => {
        let adct = document.querySelector('.addtional-content')
        let str = '';
        offset = res.data.offset
        res.data.cards.forEach(card => {
          let face = card.desc.user_profile.info.face
          let uname = card.desc.user_profile.info.uname
          let action = card.display.usr_action_txt
          let time = new Date(1625942281)
          let vCard = JSON.parse(card.card)
          let { pic, redirect_url, title } = vCard
          let { coin, danmaku, dislike, favorite, his_rank, like, now_rank, reply, share, view } = vCard.stat
          let itemDom = `<div data-v-60a2097c="" data-did="546051838395596670" class="card" style="margin-bottom: 8px;">
          <a data-v-60a2097c="" target="_blank" class="user-head c-pointer" href="//bangumi.bilibili.com/anime/38221" style="background-image: url(&quot;${face}@48w_48h.webp&quot;); border-radius: 12px;"></a>
          <div data-v-60a2097c="" class="main-content" style="padding-bottom: 0px;"><a data-v-60a2097c="" href="//bangumi.bilibili.com/anime/timeline" target="_blank" class="d-i-block type-label c-pointer">番剧</a>
          <div data-v-60a2097c="" class="user-name fs-16 ls-0 d-i-block"><a data-v-60a2097c="" href="//bangumi.bilibili.com/anime/38221" target="_blank" class="c-pointer">${uname}</a></div>
          <div data-v-60a2097c="" class="time fs-12 ls-0 tc-slate"><span data-v-60a2097c=""></span><span data-v-60a2097c=""> ${action}</span></div><div data-v-5bc56d64="" data-v-60a2097c="" class="card-content">
          <div data-v-5bc56d64="" data-ori-did="0" class="post-content"><div data-v-5bc56d64="" class="original-card-content"><div data-v-6d8fee64="" data-v-5bc56d64="" class="bangumi-container can-hover">
          <a data-v-2b044bfb="" data-v-6d8fee64="" target="_blank" href="${redirect_url}"><div data-v-6d8fee64="" data-v-2b044bfb="">
          <div data-v-6d8fee64="" data-v-2b044bfb="" class="image-area">
          <img data-v-6d8fee64="" data-v-2b044bfb="" src="${pic}@203w_127h_1e_1c.webp">
          <div data-v-6d8fee64="" data-v-2b044bfb="" class="tag">番剧</div></div><div data-v-6d8fee64="" data-v-2b044bfb="" class="text-area"><div data-v-6d8fee64="" data-v-2b044bfb="" class="title">${title}</div>
          <div data-v-6d8fee64="" data-v-2b044bfb="" class="content"></div><div data-v-6d8fee64="" data-v-2b044bfb="" class="view-danmaku"><div data-v-6d8fee64="" data-v-2b044bfb="">
          <i data-v-6d8fee64="" data-v-2b044bfb="" class="bp-icon-font icon-play-a"></i><span data-v-6d8fee64="" data-v-2b044bfb="" class="view">${view}</span></div><div data-v-6d8fee64="" data-v-2b044bfb="">
          <i data-v-6d8fee64="" data-v-2b044bfb="" class="bp-icon-font icon-danmu-a"></i><span data-v-6d8fee64="" data-v-2b044bfb="" class="danmaku">${danmaku}</span></div></div></div></div></a></div>
          </div></div><div data-v-5bc56d64=""></div></div><div data-v-60a2097c="" class="button-bar tc-slate"><div data-v-60a2097c="" class="single-button c-pointer">
          <span data-v-60a2097c="" class="text-bar"><i data-v-60a2097c="" class="bp-svg-icon single-icon transmit"></i><span data-v-60a2097c="" class="text-offset">
            ${share}
          </span></span></div><div data-v-60a2097c="" class="single-button c-pointer"><span data-v-60a2097c="" class="text-bar"><i data-v-60a2097c="" class="bp-svg-icon single-icon comment"></i><span data-v-60a2097c="" class="text-offset">
            ${reply}
          </span></span></div><div data-v-60a2097c="" class="single-button c-pointer p-rel"><span data-v-60a2097c="" class="text-bar"><i data-v-60a2097c="" class="custom-like-icon zan"></i><span data-v-60a2097c="" class="text-offset">${like}</span></span>
          </div></div></div><div data-v-60a2097c="" class="panel-area" style="display: none;"></div></div>`
          let cardWrap = document.createElement('div')
          cardWrap.innerHTML = itemDom
          adct.append(cardWrap)

        });

      });
  }


  window.onload = function () {
    let fc = document.querySelector("#app > div > div.home-page.f-clear > div.home-container > div > div.center-panel > div.card-list > div.feed-card")
    if (!fc) {
      return
    }
    let additonalContent = document.createElement('div')
    additonalContent.classList.add('addtional-content')
    additonalContent.classList.add('content')
    additonalContent.style.display = 'none'
    fc.append(additonalContent)

    
    let loadMore = document.createElement('div')
    loadMore.style.display = 'none'
    loadMore.innerHTML = `<div style="text-align: center;border-radius: 4px;padding: 16px;background: #FFF;color: #00b5e5"><span id="load-more-btn" style="cursor: pointer;font-size: 16px;">加载更多</span></div>`
    fc.append(loadMore)

    let actionbar = document.createElement('div')
    actionbar.innerHTML =
      `<div style="margin-top: 8px;border-radius: 4px;position: sticky;top: 8px;background: #FFF;padding: 16px;display: flex;">
        <div class="avatar" style="border-radius: 50%;height: 48px;width:48px;background-size: 48px 48px;background-image: url(&quot;https://i0.hdslb.com/bfs/face/9f10323503739e676857f06f5e4f5eb323e9f3f2.jpg@96w_96h_100Q_1c.webp&quot;);"></div>
        <div style="margin-left: 8px;">
          <div>哔哩哔哩番剧出差</div>
          <div style="margin-top: 4px;font-size: 12px;color: #00b5e5">
            <span id="show-abroad" style="cursor: pointer">显示</span><span id="hide-abroad" style="cursor: pointer;display: none">隐藏</span>
          </div>
        </div>
    </div>`

    let left = document.querySelector("#app > div > div.home-page.f-clear > div.home-container > div > div.left-panel > div.adaptive-scroll > div.scroll-content")
    left.append(actionbar)


    setTimeout(() => {
      let showBtn = document.querySelector('#show-abroad')
      let hideBtn = document.querySelector('#hide-abroad')
      let loadMoreBtn = document.querySelector('#load-more-btn')
      let mostViewPanel = document.querySelector("#app > div > div.home-page.f-clear > div.home-container > div > div.center-panel > div.card-list > div.most-viewed-panel")
      let tabbar = document.querySelector("#app > div > div.home-page.f-clear > div.home-container > div > div.center-panel > div.card-list > div.feed-card > div.tab-bar")
      let content = document.querySelector("#app > div > div.home-page.f-clear > div.home-container > div > div.center-panel > div.card-list > div.feed-card > div.content")
      let backtop = () =>document.querySelector("#app > div > div.home-page.f-clear > div.back-top").click()
      showBtn.onclick = function () {
        content.style.display = 'none'
        additonalContent.style.display = 'block'
        showBtn.style.display = 'none'

        hideBtn.style.display = 'inline'
        mostViewPanel.style.display = 'none'
        tabbar.style.display = 'none'
        loadMore.style.display = 'block'
        backtop()
        loadData()
      }
      hideBtn.onclick = function () {
        content.style.display = 'block'
        additonalContent.style.display = 'none'
        showBtn.style.display = 'inline'

        hideBtn.style.display = "none"
        loadBtn.style.display = 'none'
        mostViewPanel.style.display = 'flex'
        tabbar.style.display = 'block'
        loadMore.style.display = 'none'
        backtop()
      }

      loadMoreBtn.onclick = loadData
      
    }, 0)
  }
})();