// ==UserScript==
// @name        KJL后台-编缉器属性栏添加更新商品名称
// @namespace   Violentmonkey Scripts
// @match       https://www.kujiale.com/vc/modeleditor/new*
// @grant       none
// @version     1.0
// @author      hejie13250
// @description 2024/12/01 17:20:43
// ==/UserScript==


(function() {
    'use strict';

    // 添加样式到文档
    var style = document.createElement('style');
    document.head.appendChild(style);
    style.type = 'text/css';
    style.appendChild(document.createTextNode(`
        /* 可视化按钮样式 */
        .auto-update-button {
            width: 40px;
            height: 20px;
            background-color: #ccc;
            border-radius: 10px;
            position: relative;
            cursor: pointer;
            transition: background-color 0.3s;
            border: none;
            outline: none;
            margin-left: 5px;
        }

        .auto-update-button::before {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            background-color: white;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            transition: transform 0.3s;
        }

        .auto-update-button.active {
            background-color: #4caf50;
        }

        .auto-update-button.active::before {
            transform: translateX(20px);
        }

        /* 文本标签样式 */
        .mode-label {
            font-size: 16px;
            margin-left: 10px;
            margin-right: 5px;
            cursor: pointer; /* 手动模式时显示手形光标 */
            color: #007bff;
            transition: color 0.3s;
        }

        .mode-label:hover {
            color: #fd00fd;
        }

       /* 按钮容器样式 */
       .button-container {
           display: flex;
           margin-left: 10px;
           align-items: center; /* 垂直居中对齐 */
           justify-content: flex-start; /* 水平左对齐 */
           height: 30px; /* 固定高度 */
           gap: 5px; /* 按钮之间的间距 */
       }
    `));

    // 设置默认更新方式
    let autoUpdate = false;
    // 设置检测间隔时间（毫秒）
    const checkInterval = 100;

    // 添加自动/手动切换按钮和文本标签
    function addButtons() {
        const sidebarHeader = document.querySelector('.sidebar-container .sidebar-header');
        if (sidebarHeader && !document.querySelector('.button-container')) {
            // 创建按钮容器
            const buttonContainer = document.createElement('div');
            buttonContainer.classList.add('button-container');

            // 创建文本标签
            const modeLabel = document.createElement('span');
            modeLabel.classList.add('mode-label');
            modeLabel.textContent = autoUpdate ? '自动更新名称' : '手动更新名称';

            // 根据模式设置文本标签的样式和点击事件
            if (!autoUpdate) {
                modeLabel.classList.add('manual'); // 手动模式时添加样式
                modeLabel.addEventListener('click', updateName); // 绑定点击事件
            }

            // 创建自动/手动切换按钮
            const autoUpdateButton = document.createElement('button');
            autoUpdateButton.classList.add('auto-update-button');
            autoUpdateButton.title = autoUpdate ? '自动更新已开启' : '自动更新已关闭'; // 鼠标悬停提示

            // 根据 autoUpdate 状态设置初始样式
            if (autoUpdate) {
                autoUpdateButton.classList.add('active');
            }

            // 为按钮添加点击事件
            autoUpdateButton.addEventListener('click', function() {
                autoUpdate = !autoUpdate;
                autoUpdateButton.classList.toggle('active');
                autoUpdateButton.title = autoUpdate ? '自动更新已开启' : '自动更新已关闭'; // 更新鼠标悬停提示
                modeLabel.textContent = autoUpdate ? '自动更新名称' : '手动更新名称'; // 更新文本标签

                // 切换文本标签的样式和点击事件
                if (autoUpdate) {
                    modeLabel.classList.remove('manual');
                    modeLabel.removeEventListener('click', updateName); // 移除点击事件
                } else {
                    modeLabel.classList.add('manual');
                    modeLabel.addEventListener('click', updateName); // 绑定点击事件
                }
            });

            // 创建“查打详情”按钮
            const modelDetail = document.createElement('span');
            modelDetail.classList.add('mode-label');
            modelDetail.textContent = '查看详情';
            modelDetail.addEventListener('click', function() {
                const productNameDiv = document.querySelector('button.tui-btn--primary:nth-child(1)');
                if (productNameDiv) {
                    productNameDiv.click();
                }
            });

            // 创建“打开模型”按钮
            const openModel = document.createElement('span');
            openModel.classList.add('mode-label');
            openModel.textContent = '打开模型';
            openModel.addEventListener('click', function() {
                const openModelIcon = document.querySelector('.option-button > button:nth-child(2)');
                if (openModelIcon) {
                    openModelIcon.click();
                }
            });

            // 将文本标签和按钮添加到容器中
            buttonContainer.appendChild(autoUpdateButton);
            buttonContainer.appendChild(modeLabel);
            buttonContainer.appendChild(modelDetail);
            buttonContainer.appendChild(openModel);

            // 将按钮容器插入到.sidebar-header的前面
            sidebarHeader.parentNode.insertBefore(buttonContainer, sidebarHeader);
        }
    }

    // 手动更新名称
    function updateName() {
        const nameLinkDiv = document.querySelector('.tui-text-overflow-multiple-line');
        const nameContent = document.querySelector('.name-editor p.name-content');
        const changeButton = document.querySelector('.name-change-button');

        if (nameLinkDiv && nameContent && changeButton) {
            const nameLinkText = nameLinkDiv.textContent.trim();
            const nameContentText = nameContent.textContent.trim();

            if (nameLinkText !== nameContentText) {
                changeButton.click();

                // 等待.name-editor > input出现
                setTimeout(() => {
                    const input = document.querySelector('.name-editor > input');
                    if (input) {
                        input.value = nameLinkText;
                        // 使输入框失去焦点
                        input.blur();
                    }
                }, 100); // 延迟100毫秒确保输入框已经加载
            }
        }
    }

    // 自动更新名称
    function autoCheckAndUpdateName() {
        const nameLinkDiv = document.querySelector('.tui-text-overflow-multiple-line');
        const nameContent = document.querySelector('.name-editor p.name-content');
        const changeButton = document.querySelector('.name-change-button');

        // 确保所有元素都已加载
        if (nameLinkDiv && nameContent && changeButton && autoUpdate == true) {
            // 获取两个元素的文本内容
            const nameLinkText = nameLinkDiv.textContent.trim();
            const nameContentText = nameContent.textContent.trim();

            // 比较文本内容
            if (nameLinkText !== nameContentText) {
                // 文本不同，点击.name-change-button
                changeButton.click();

                // 等待.name-editor > input出现
                setTimeout(() => {
                    const input = document.querySelector('.name-editor > input');
                    if (input) {
                        // 更新.name-editor > input内的文本
                        input.value = nameLinkText;
                        // 使输入框失去焦点
                        input.blur();
                    }
                }, 100); // 延迟500毫秒确保输入框已经加载
            }
        }
    }

    // 检测并添加按钮
    function checkAndAddButton() {
        const nameEditor = document.querySelector('.name-editor');
        if (nameEditor && nameEditor.offsetParent !== null) {
            addButtons();
            autoCheckAndUpdateName();
        }
    }

    // 使用setInterval来周期性检测
    setInterval(checkAndAddButton, checkInterval);
})();