// ==UserScript==
// @name         Q-note【网站备忘录】
// @namespace    http://tampermonkey.net/
// @version      1.2.0
// @description  一个超超超好用的备忘录/记事本/笔记本～再也不用担心忘记什么啦！自动通过域名分类，适用于全部网站～超实用的生产力工具～
// @author       Priate
// @match        *://*/*
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_addStyle
// @grant        GM_setClipboard
// @require      https://cdn.jsdelivr.net/npm/vue
// @icon         https://priate.oss-cn-beijing.aliyuncs.com/products/picture/icon/q-note.png
// @require      https://cdn.jsdelivr.net/npm/sweetalert@2.1.2/dist/sweetalert.min.js
// @supportURL   https://greasyfork.org/zh-CN/scripts/421876/feedback
// @source       https://github.com/PriateXYF
// @license      MIT
// ==/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,
                left : 20,
                top : 100
            })
        }
    }

    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'>Q-note</b><p style='margin: 0 0'>by Priate</p>
<button @click="showAdd">添加</button>
<button @click='hideScript'>隐藏</button>
<button id='readme' @click="clearHostData" v-show="filterData.length > 0">清空</button>
<button @click='resetScript'>重置</button>
</br>
<table v-show="filterData.length > 0">
<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 style='color:#337ab7' @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><textarea v-on:keydown.enter="submitAddNote" v-model="note.content" placeholder="添加笔记"></textarea></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;
background-color: rgba(240, 223, 175, 0.9);
color : #660000;
text-align : center;
padding: 10px;
z-index : 2147483647;
border-radius : 20px;
border:2px solid black;
}
#priate_script_div:hover{
box-shadow: 5px 5px 5px #000000;
transition: box-shadow 0.3s;
}
.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 #660000;
margin: 5px auto;
padding: 2px;
border-collapse: collapse;
}
/*表格框样式*/
#priate_script_div td{
border:2px solid #660000;
padding: 8px 12px;
max-width : 300px;
word-wrap : break-word;
}
/*表头样式*/
#priate_script_div th{
border:2px solid #660000;
padding: 8px 12px;
}

/*脚本按钮样式*/
#priate_script_div button{
display: inline-block;
border-radius: 4px;
border: 1px solid #660000;
background-color: transparent;
color: #660000;
text-decoration: none;
padding: 5px 10px;
margin : 5px 10px;
}
/*脚本按钮悬浮样式*/
#priate_script_div button:hover{
cursor : pointer;
color: rgb(240, 223, 175);
background-color: #660000;
}
/*右下角显示按钮*/
#priate_script_div .hide-button{
z-index: 2147483647;
width: 32px;
height: 32px;
cursor: pointer;
position: fixed;
left: 0px;
bottom: 0px;
color: #660000;
text-align: center;
line-height: 32px;
margin: 10px;
border-width: 1px;
border-style: solid;
border-color: #660000;
border-image: initial;
border-radius: 100%;
}
/*右下角显示按钮悬浮样式*/
#priate_script_div .hide-button:hover{
background-color : rgba(240, 223, 175, 0.9);
}
/*输入框样式*/
#priate_script_div textarea{
height : 50px;
width : 200px;
background-color: #fff;
border:1px solid #000000;
padding: 4px;
}
`);
        document.querySelector("html").appendChild(priate_script_div)
        var setting = GM_getValue('priate_script_note_setting')
        document.getElementById("priate_script_div").style.left = (setting.left || 20)  + "px";
        document.getElementById("priate_script_div").style.top = (setting.top || 100)  + "px";
    }

    function dragFunc(id) {
        var Drag = document.getElementById(id);
        var setting = GM_getValue('priate_script_note_setting')
        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;
                setting.left = ev.clientX - disX
                Drag.style.left = setting.left  + "px";
                setting.top = ev.clientY - disY
                Drag.style.top = setting.top + "px";
                Drag.style.cursor = "move";
                GM_setValue('priate_script_note_setting', setting)
            };
        };
        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)
                swal("已隐藏!可以在左下角重新召唤出来哦～", {
                    icon: "success",
                    buttons: false,
                    timer: 1500,
                });
            },
            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
            },
            clearNote(){
                this.note = {
                    content : "",
                    // 是否隐藏
                    isHide : false,
                }
            },
            addNote(){
                if(this.note.content.trim() == ""){
                    swal("你还没有填写内容哦～", {
                        icon: "warning",
                        buttons: false,
                        timer: 1500,
                    });
                    return
                }
                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)
                this.clearNote()
            },
            // 重置脚本数据
            resetScript(){
                var _this = this
                swal({
                    title: "是否重置全部脚本数据？",
                    text: "重置后将清空全部数据并将设置变为默认!",
                    icon: "warning",
                    buttons: true
                }).then((willDelete) => {
                    if (willDelete) {
                        swal("重置成功!", {
                            icon: "success",
                            buttons: false,
                            timer: 1000,
                        });
                        GM_setValue('priate_script_note_data', [])
                        GM_setValue('priate_script_note_setting', {
                            hide : true,
                            number : 0,
                            left : 20,
                            top : 100
                        })
                        // 重新渲染样式和数据
                        _this.data = []
                        document.getElementById("priate_script_div").style.left = "20px";
                        document.getElementById("priate_script_div").style.top = "100px";
                    }
                })
            },
            deleteNote(id){

                swal({
                    title: "确定删除?",
                    text: "删除后将无法恢复数据!",
                    icon: "warning",
                    buttons: true,
                }).then((willDelete) => {
                    if (willDelete) {
                        swal("删除成功!", {
                            icon: "success",
                            buttons: false,
                            timer: 1000,
                        });
                        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(){
                swal({
                    title: "是否清空数据？？",
                    text: "将会清空当前站点【" + location.host + "】下的全部数据！",
                    icon: "warning",
                    buttons: true
                }).then((willDelete) => {
                    if (willDelete) {
                        swal("清除成功!", {
                            icon: "success",
                            buttons: false,
                            timer: 1000,
                        });
                        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
                        var item = this.data[index]
                        // 恢复隐藏状态
                        setTimeout(function(){
                            item.isHide = true
                        }, 1000)
                        break
                    }
                }
            },
            copyNote(content){
                console.log(content)
                GM_setClipboard(content)
                swal("复制成功!", {
                    icon: "success",
                    buttons: false,
                    timer: 1000,
                });
            },
            //快捷键功能
            submitAddNote(e) {
                if (e.metaKey || e.altKey) {
                    this.addNote()
                }
            },
        },
        computed: {
            filterData(){
                return this.data.filter((item)=> item.host == location.host)
            },
            hideTipe(){
                return this.filterData.length
            }
        }
    })
    //设置div可拖动
    dragFunc("priate_script_div");
})();