// ==UserScript==
// @name         BiliBili 商城首图下载
// @namespace    https://paul.ren
// @version      0.1
// @description  下载透明手办图片到本地，可供上传到网站
// @author       You
// @match        https://mall.bilibili.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
// @grant        none
// ==/UserScript==

(function () {
  'use strict';

  const styles = document.createElement("style");
  styles.innerHTML = "body { max-width: 600px; margin: auto; }";
  document.body.appendChild(styles);

  function downloadFile(url, filename) {
    var xhr = new XMLHttpRequest();

    xhr.open('GET', url, true);
    xhr.responseType = 'blob';

    xhr.onload = function () {
      if (xhr.status === 200) {
        var blob = xhr.response;
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = filename;
        link.click();
      }
    };

    xhr.send();
  }

  const getFirstImg = async () => {
    await new Promise((resolve) => setTimeout(() => resolve(), 500));

    const btn = document.querySelector(".bili-callapp-btn");

    if (btn) {
      const newBtn = document.createElement("div");
      newBtn.className = "bili-callapp-btn";

      btn.style = "display: none !important;";
      newBtn.setAttribute('data-v-e55eac76', 1);
      btn.parentElement.append(newBtn);

      newBtn.innerHTML = "下载首图";
      newBtn.onclick = (ev) => {
        ev.preventDefault();
        const img = document.querySelector(".silde-item");
        const url = img.style.backgroundImage.replace("url(\"", "").replace("\")", "");

        const href = new URL(location.href.replace("#noReffer", "&noReffer"));
        const itemsId = href.searchParams.get("itemsId");

        downloadFile(url, `${itemsId}.webp`);

      }
    }
  }

  if (location.href.includes("detail.html")) {
    getFirstImg();
  }
})();