// ==UserScript==
// @name         网站备忘录
// @namespace    http://tampermonkey.net/
// @version      1.0.5
// @description  超好用的备忘录～再也不用担心忘记什么啦！
// @author       Priate
// @match        *://*/*
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_addStyle
// @grant        GM_notification
// @grant        GM_setClipboard
// @require      https://cdn.jsdelivr.net/npm/vue
// @supportURL   https://greasyfork.org/zh-CN/scripts/421876/feedback
// @source       https://github.com/PriateXYF
// @license      MIT
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    function initSetting(){
        if (!GM_getValue('priate_script_note_data')) {
            GM_setValue('priate_script_note_data', [])
        }
        if (!GM_getValue('priate_script_note_setting')) {
            GM_setValue('priate_script_note_setting', {
                hide : true,
                number : 0,
            })
        }
    }

    function injectDiv(){
        var priate_script_div = document.createElement("div")
        priate_script_div.innerHTML = `
<div id="priate_script_div" :class="setting.hide || add ? '' : 'priate_script_hide'">
<span v-show="!setting.hide" @click="showScript" class="hide-button">{{hideTipe}}</span>
<div v-show="setting.hide">
<b style='font-size:30px; margin: 0 0'>网站备忘录</b><p style='margin: 0 0'>by Priate</p>
<button @click="showAdd">添加</button>
&nbsp&nbsp
<button @click='hideScript'>隐藏</button>
&nbsp&nbsp
<button id='readme' @click="clearHostData">清空</button>
&nbsp&nbsp
<button @click='resetScript'>重置</button>
</br>
<table>
<thead><tr><th>内容</th><th>时间</th><th>操作</th></tr></thead>
<tbody id="priate_script_table">
<tr v-for="(item, index) in filterData" key="index">
<td v-show="!item.isHide"><a @click="copyNote(item.content)">{{item.content}}</a></td>
<td v-show="item.isHide"><a style='color:blue' @click="showNote(item.id)">显示</a> | <a style='color:red' @click="copyNote(item.content)">复制</a></td>
<td>{{item.time}}</td>
<td><a style='color:#993333' @click="deleteNote(item.id)">删除</a> | <a style='color:green'>修改</a></td>
</tr>
</tbody>
</table>
</div>
<div id="add_note" v-show="add">
<h2>添加记录</h2>
<table>
<tr><td><input v-model="note.content" placeholder="添加笔记"></td></tr>
<tr><td>隐藏文本<input v-model="note.isHide" type="checkbox"></td></tr>
<tr><td><button @click="hideAdd">取消</button> <button @click="addNote">确定</button></td></tr>
</table>
</div>
</div>
`
        GM_addStyle(`
#priate_script_div{
font-size : 15px;
position: fixed;
left: 20px;
top:100px;
background-color: rgba(254, 244, 139, 0.8);
text-align : center;
padding: 10px;
z-index : 2147483647;
border-radius : 20px;
border:2px solid black;
box-shadow: 5px 5px 5px #000000;
}
.priate_script_hide{
padding: 0 !important;
border:none !important;
}
a{
cursor : pointer;
text-decoration : none;
}
/*表格样式*/
#priate_script_div table{
text-align: center;
border:2px solid #000000;
margin: 5px auto;
padding: 2px;
border-collapse: collapse;
}
/*表格框样式*/
#priate_script_div td{
border:2px solid #000000;
padding: 8px 12px;
}
/*表头样式*/
#priate_script_div th{
border:2px solid #000000;
padding: 8px 12px;
}
/*脚本按钮样式*/
#priate_script_div button{
display: inline-block;
border-radius: 4px;
border: 1px solid #3b8070;
background-color: transparent;
color: #3b8070;
text-decoration: none;
padding: 5px 10px;
}
/*脚本按钮悬浮样式*/
#priate_script_div button:hover{
cursor : pointer;
color: #ffffff;
background-color: #3b8070;
}
/*右下角显示按钮*/
#priate_script_div .hide-button{
z-index: 2147483647;
width: 32px;
height: 32px;
cursor: pointer;
position: fixed;
left: 0px;
bottom: 0px;
color: rgb(32, 150, 243);
text-align: center;
line-height: 32px;
margin: 10px;
border-width: 1px;
border-style: solid;
border-color: rgb(32, 150, 243);
border-image: initial;
border-radius: 100%;
}
#priate_script_div .hide-button:hover{
background-color: rgb(32, 150, 243);
color: #fff;
}
`);
        document.querySelector("html").appendChild(priate_script_div)
    }

    function dragFunc(id) {
        var Drag = document.getElementById(id);
        Drag.onmousedown = function(event) {
            var ev = event || window.event;
            event.stopPropagation();
            var disX = ev.clientX - Drag.offsetLeft;
            var disY = ev.clientY - Drag.offsetTop;
            document.onmousemove = function(event) {
                var ev = event || window.event;
                Drag.style.left = ev.clientX - disX + "px";
                Drag.style.top = ev.clientY - disY + "px";
                Drag.style.cursor = "move";
            };
        };
        Drag.onmouseup = function() {
            document.onmousemove = null;
            this.style.cursor = "default";
        };
    };

    // 获取当前时间
    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = month + seperator1 + strDate + " " + date.getHours() + seperator2 + date.getMinutes()
        return currentdate;
    }

    //初始化脚本设置
    initSetting()
    //注入脚本div
    injectDiv()
    // 处理数据等逻辑
    var vm = new Vue({
        el: '#priate_script_div',
        data: {
            setting: GM_getValue('priate_script_note_setting'),
            add: false,
            //添加的内容
            note : {
                content : "",
                // 是否隐藏
                isHide : false,
            },
            data: GM_getValue('priate_script_note_data'),
        },
        methods : {
            hideScript(){
                this.setting.hide = false
                GM_setValue('priate_script_note_setting', this.setting)
            },
            showScript(){
                this.setting.hide = true
                this.add = false
                GM_setValue('priate_script_note_setting', this.setting)
            },
            showAdd(){
                this.add = true
                this.setting.hide = false
            },
            hideAdd(){
                this.add = false
                this.setting.hide = true
            },
            addNote(){
                var origan_data = GM_getValue('priate_script_note_data')
                this.note.id = this.setting.number++
                this.note.time = getNowFormatDate()
                this.note.host = location.host
                origan_data.push(this.note)
                GM_setValue('priate_script_note_data', origan_data)
                this.data = origan_data
                this.hideAdd()
                GM_setValue('priate_script_note_setting', this.setting)
            },
            // 重置脚本数据
            resetScript(){
                const flag = confirm("是否重置全部脚本数据？")
                if(flag){
                    GM_setValue('priate_script_note_data', [])
                    GM_setValue('priate_script_note_setting', {
                        hide : true,
                        number : 0,
                    })
                    GM_notification("已清除全部数据，请刷新页面。", "操作成功!");
                }
            },
            deleteNote(id){
                var origan_data = GM_getValue('priate_script_note_data')
                var new_data = origan_data.filter((item)=> item.id != id)
                GM_setValue('priate_script_note_data', new_data)
                this.data = new_data
            },
            // 清空站点全部记录
            clearHostData(){
                const flag = confirm("是否清空【该站点】下的全部数据？")
                if(flag){
                    var origan_data = GM_getValue('priate_script_note_data')
                    var new_data = origan_data.filter((item)=> item.host != location.host)
                    GM_setValue('priate_script_note_data', new_data)
                    this.data = new_data
                }
            },
            // 显示隐藏的内容
            showNote(id){
                for(var index in this.data){
                    if(this.data[index].id == id){
                        this.data[index].isHide = false
                        break
                    }
                }
            },
            copyNote(content){
                GM_setClipboard(content)
            }
        },
        computed: {
            filterData(){
                return this.data.filter((item)=> item.host == location.host)
            },
            hideTipe(){
                return this.filterData.length
            }
        }
    })
    //设置div可拖动
    dragFunc("priate_script_div");
})();