// ==UserScript==
// @name         油猴中文网文章的分页功能以及显示总页数
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  为了方便看道总的文章，要不然绝逼不写。首先我们需要第一次把所有的页面先点击一次。只需要一次。然后存储到localStorage。之后就不需要。点开直接看就好了
// @author       You
// @match        https://bbs.tampermonkey.net.cn/*
// @icon         https://www.google.com/s2/favicons?domain=tampermonkey.net.cn
// @grant        unsafeWindow
// @run-at document-start
// @grant        GM_addStyle
// @connect      api.szfx.top
// @grant        GM_xmlhttpRequest
// ==/UserScript==

// 引入vue3.js
let script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.src = "https://cdn.jsdelivr.net/npm/vue@next";
document.documentElement.appendChild(script);


//   <button @click="search">显示当前页面的数据(以前我之前页面的数据)</button>
window.onload=()=>{
let text=`<div id="app">
       <div class="search">
            <button @click="displayArticleList">显示/隐藏</button>
            <button @click="displayContent">仅仅显示我localStorage里面的数据</button>
            <button @click="search">显示当前页面的数据(以前我之前页面的数据)</button>
            <button @click="clearYeMianContent">清空页面显示的内容而不是清除localStorage</button>
            <button @click="clearContent">清除localStorage里面的内容</button>
            <div class="articleList">
                <div>发表的文章<div>
                <span>当前{{currentPage}}页</span>
                <button  @click="pre">上一页</button>
                <button  @click="next">下一页</button>
                <span>共{{totalPage}}页</span>
                <ol >
                    <li v-for="(item, index) in articleList ">
                        <Fragment v-if="index < currentPage*20 && index >= (currentPage-1) * 20">
                          {{index+1}}-<span v-html="item">{{item}}<span>
                        </Fragment>  
                    </li>
                <ol>  
            </div>
       </div>
    </div>`

var el=document.createElement('div')
el.innerHTML=text;
document.body.append(el)
      const App = {
        data() {
          return {
            articleList: [],
            totalPage: 1,
            currentPage: 1,
          };
        },
        methods: {
            search(){
                // 因为每个用户的uid是不一样的，所以我这样存储一下，每个用户的就以key-value的形式存到键值对里面
                let uid;
                // 通过url地址拿到uid
                let url = window.location.href;
                try{
                    let urlArr = url.split("&");
                    uid = urlArr[1].split("=")[1];
                }
                catch(err){
                    console.log("该页面脚本没有相应的功能")
                }
                if(localStorage.getItem("allAuthorArticleList")){
                    // 点击的时候先拿到我之前存到localStorage里面的值
                    let preArticleList = JSON.parse(localStorage.getItem("allAuthorArticleList"));
                    // 因为我里面存了多个用户了所有要这样判断一下
                    for(var index in preArticleList){
                        if(index == uid){
                            this.totalPage = Math.ceil(preArticleList[uid].length/20);
                            // 然后把前面的先存进去
                            this.articleList = preArticleList[uid];
                        }
                    } 
                }
               
                // 拿到当前页面的内容并放到articleList数组里面
                let thContentList = document.getElementsByTagName("th");
                for(let i=0; i < thContentList.length;i++){
                   if(i == 0 ){
                      
                   }else {
                       this.articleList.push(thContentList[i].innerHTML);
                   }
                   
                }
                // 所有读者的列表，最后以key-value存储到localStorage里面
                let allAuthorArticleList = {};
                allAuthorArticleList[uid] = this.articleList;
                localStorage.setItem("allAuthorArticleList",JSON.stringify(allAuthorArticleList));  
                // 这样总页数就会马上更新
                this.displayContent();
                // let that = this;
                // GM_xmlhttpRequest({
                // method: "GET",
                // responseType: "json",
                // url: "https://bbs.tampermonkey.net.cn/home.php?mod=space&uid=2&do=thread&view=me&order=dateline&from=space",
                // onload: function (xhr) {
                //     console.log(xhr);
                //     // 参考文章https://www.cnblogs.com/huoan/p/9600561.html
                //     if (xhr.readyState === 4 && xhr.status === 200) {
                //         // 拿到整个页面
                //         let allHtmlContent = xhr.responseText;
                //         let reg = /<th>[^<]*<\/th>/g; 
                //         let contentList = allHtmlContent.match(reg);
                //         console.log(contentList)
                //     } else {
                //         console.log("获取数据失败");
                //     }
                //  },
                // });
            },
            clearContent(){
                localStorage.clear();  
            },
            clearYeMianContent(){
                this.articleList = []
            },
            displayContent(){
                // 因为每个用户的uid是不一样的，所以我这样存储一下，每个用户的就以key-value的形式存到键值对里面
                let uid;
                // 通过url地址拿到uid
                let url = window.location.href;
                try{
                    let urlArr = url.split("&");
                    uid = urlArr[1].split("=")[1];
                    let preArticleList = JSON.parse(localStorage.getItem("allAuthorArticleList"));
                    for(var index in preArticleList){
                        if(index == uid){
                            this.totalPage = Math.ceil(preArticleList[uid].length/20);
                            // 然后把前面的先存进去
                            this.articleList = preArticleList[uid];
                            console.log(preArticleList[uid])
                        }
                    } 
                }
                catch(err){
                    console.log("localStorage里面没有allAuthorArticleList属性，是不是你刚才清除了")
                }
                 
            },
            //控制articleList盒子的显示和隐藏
            displayArticleList(){
                let divHeZi = document.getElementsByClassName("articleList")[0];
                if(divHeZi.style.display == "" || divHeZi.style.display == "block"){
                    divHeZi.style.display = "none";
                } else {
                    divHeZi.style.display = "block";
                }
            },
            //上一页
            pre(){
               if(this.currentPage == 1){
                   alert("默认就是从第一页开始的别点了")
               } else {
                   this.currentPage = this.currentPage - 1;
               }
            },
            // 下一页
            next(){
                this.currentPage = this.currentPage + 1;
            }     
        }
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
}

GM_addStyle(`
  #app {
       position: absolute;
       top: 0vh;
       right: 0vw;
       background: skyblue;
       width: 220px;
       z-index:999;
       overflow:scroll;
  }
  .articleList {
      display: block;
      height:100%;
  }
  
`)