// ==UserScript==
// @name         孤独狂饮Test_VUE
// @namespace    [url=mailto:741227905@qq.com]741227905@qq.com[/url]
// @version      0.2
// @description  本脚本自带 VUE 和 element-ui 属性，可以更方便的添加各种功能
// @author       gdky005
// @match        *://www.80s.tw/*
// @require      https://unpkg.com/vue/dist/vue.js
// @require      https://unpkg.com/element-ui/lib/index.js
// @grant        GM_addStyle
// @grant        GM_getValue
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...

    var header_link = '<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">';
    //将以上拼接的html代码插入到网页里的ul标签中
    var header_link_tag = $("head");
    if (header_link_tag) {
       header_link_tag.append(header_link);
    }




    var vue_code = '<div id="app" style="text-align:center">'

    vue_code+='{{ message }}'

    vue_code+='<el-popover placement="top-start" title="" width="100" trigger="hover" content="这是 WangQing 的订阅内容。">'
    vue_code+='<el-button type="primary" size="medium" slot="reference" @click="btnOnClick">订阅按钮</el-button>'
    vue_code+='</el-popover>'

    vue_code+='<el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>'
    vue_code+='<span>{{ dialogText }}</span>'
    vue_code+='<span slot="footer" class="dialog-footer">'
    vue_code+='<el-button @click="centerDialogVisible = false">取 消</el-button>'
    vue_code+='<el-button type="primary" @click="requestData">确 定</el-button>'
    vue_code+='</span>'
    vue_code+='</el-dialog>'

    vue_code+='</div>'


    var ul_tag = $("div.img");
    if (ul_tag) {
       ul_tag.append(vue_code);
    };


    new Vue({
        el: '#app',
        data: function () {
            return {
                message: "",
                dialogText: "是否真的要订阅？",
                dialogVisible: false,
                centerDialogVisible: false
            }
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                    done();
                }).catch(_ => {});
            },
            btnOnClick() {
                this.centerDialogVisible = true;

                var url = document.URL;
                var name = $("h1.font14w")[0].innerText;
                var id = url.substring(url.lastIndexOf("/") + 1, url.length);
                var msg = "url 是：" + url + ",\n名字：" + name + ",\nid：" + id;

                console.log(msg);
                this.dialogText = msg;
            },
            requestData() {
                this.centerDialogVisible = false;
            }
        }
    })

    //var down_btn_html = '<button>订阅</button>';
    //将以上拼接的html代码插入到网页里的ul标签中
    //var ul_tag = $("div.info>h1");
    //if (ul_tag) {
     //   ul_tag.append(down_btn_html);
    //};
})();