// ==UserScript==
// @name         随机生成一句话
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  随机生成一句话，用来学习脚本中使用vue。以及如何调用接口
// @author       You
// @match        *://*/*
// @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";
// 引入element,这个样式一会显示一会不显示，很迷，所以我没用，这里记录一下。到时候什么问题再说
document.documentElement.appendChild(script);
let link= document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.href= "https://unpkg.com/element-plus/dist/index.css";
document.documentElement.appendChild(link);
let elscript= document.createElement('script');
elscript.setAttribute('type', 'text/javascript');
elscript.src = "https://unpkg.com/element-plus";
document.documentElement.appendChild(elscript);

window.onload=()=>{
let text=`<div id="app">
       <div class="search">
            <button @click="search">点击随机生成</button>
            <div>
                <textarea  cols="30" rows="10" >{{textContent}}</textarea>
            </div>
       </div>
    </div>`

var el=document.createElement('div')
el.innerHTML=text;
document.body.append(el)
      const App = {
        data() {
          return {
            input: "",
            textContent:"嗨嗨嗨"
          };
        },
        methods: {
            // 这里注意一下this的指向,注意一下就行。最好直接把里面写成箭头函数
            // onload是回调函数，指向的应该是关于xhr的东西
            search(){
                console.log(this);
                let that = this;
                GM_xmlhttpRequest({
                method: "GET",
                responseType: "json",
                url: "https://api.szfx.top/yiyan",
                onload: function (xhr) {
                    console.log(xhr);
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        console.log(xhr.responseText);
                        console.log(this);
                        that.textContent = xhr.responseText;
                    } else {
                        console.log("获取数据失败");
                    }
                 },
                });
            }
        }
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
}

GM_addStyle(`
  #app {
       position: absolute;
       top: 0vh;
       right: 10vw;
       background: #fb7d7d;
       width: 220px;
       height: 200px;
       z-index:999;
  }
  .search input {
      height:30px;
  }
`)