// ==UserScript==
// @name         重要事件倒计时
// @namespace    https://example.com/
// @version      0.0.2
// @license      GNU-GPLv3
// @description  提醒你距离目标时间节点的精确剩余时间
// @author       Lemostic
// @match        http*://*/*
// @grant        GM_addStyle
// ==/UserScript==

// 默认样式变量
const defaultColor = "rgba(40, 82, 181, 0.8)";
const defaultFontSize = "1vw";
const defaultMarginTop = 70
const defaultMarginRight = 10

// 定义倒计时的事件名称
let eventName = "春节放假"
// 年
let targetTimeYear = 2024
// 月
let targetTimeMonth = 2
// 日
let targetTimeDay = 6
// 时
let targetTimeHour = 18
// 分
let targetTimeMinute = 0
// 秒
let targetTimeSecond = 0


// 用户自定义样式变量（如果为空，则采用默认值）
let userDefinedColor = null; // 用户自定义的组件背景色 | 文本 | 颜色
let userDefinedFontSize = null; // 用户自定义的字体大小 | 数值 | 单位vm（viewpoint width）
let userDefinedMarginTop = null; // 用户自定义的组件上边距 | 数值 | 单位px
let userDefinedMarginRight = null; // 用户自定义的组件右边距 | 数值 | 单位px

// 如果用户设置的值不存在或为空，则采用默认值
userDefinedColor = userDefinedColor || defaultColor;
userDefinedFontSize = userDefinedFontSize || defaultFontSize;
userDefinedMarginTop = userDefinedMarginTop || defaultMarginTop;
userDefinedMarginRight = userDefinedMarginRight || defaultMarginRight;


// 定义你的CSS样式，针对id为'important-countdown'的div
var customCSS = `
        #important-countdown { /* 使用ID选择器 */
            position: fixed;
            top: ${userDefinedMarginTop}px;
            right: 0;
            margin-right: ${userDefinedMarginRight}px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: ${userDefinedColor};
            font-size: ${userDefinedFontSize};
            border-radius: 5px 0 5px 5px; /* 设置圆角为10像素 */
            background-color: rgba(0, 0, 0, 0.1); /* 这里是一个黑色半透明的例子，你可以替换颜色和透明度 */
            padding: 5px; /* 设置四边内边距为5px */
            pointer-events: none;
            z-index: 9999
        }

        #important-countdown::before {
            content: "";
            position: absolute;
            top: 0;
            left: 100%;
            width: 0;
            height: 0;
            border-bottom: ${userDefinedMarginRight}px solid transparent;
            border-left: ${userDefinedMarginRight}px solid rgba(0, 0, 0, 0.1);
        }
    `;

// 注入样式到页面
GM_addStyle(customCSS);

// 创建DOM字符串并插入变量
let clockDom = `<div id="important-countdown"></div>`.trim();
document.querySelector('body').appendChild(creatDom(clockDom))

function creatDom(str) {
  let wrapper = document.createElement('div')
  wrapper.innerHTML = str
  return wrapper.childNodes[0]
}

// 创建需要倒计时的目标时间，需要注意，月份的索引是从0开始的，索引范围是0 ~ 11
let nextTime = new Date(targetTimeYear, targetTimeMonth - 1, targetTimeDay, targetTimeHour, targetTimeMinute, targetTimeSecond)
setInterval(() => {
  let now = Date.now();
  if (now > nextTime.getTime()) {
    document.querySelector('#important-countdown').innerHTML = "倒计时已过，请重新设置!";
    return;
  }

  let diff = Math.floor((nextTime - now) / 1000); // 确保始终是整数
  // 计算剩余天数、小时数、分钟数和秒数
  let days = Math.floor(diff / (3600 * 24));
  let hours = String(Math.floor((diff % (3600 * 24)) / 3600)).padStart(2, '0');
  let minutes = String(Math.floor((diff % 3600) / 60)).padStart(2, '0');
  let seconds = String(diff % 60).padStart(2, '0');

  //document.querySelector('#important-countdown').innerHTML = `距离 ${eventName} 还有${days}天${hours}时${minutes}分${seconds}秒`;
  document.querySelector('#important-countdown').innerHTML = `
    <div>
        距离 <span style="font-weight: bold; color: #2ea7a6;"><strong>${eventName}</strong></span> 还有<span style="font-weight: bold;">${days}天${hours}小时${minutes}分${seconds}秒</span>
    </div>
`;
}, 1000);