// ==UserScript==
// @name        KJL后台-商品列表页查看自定义属性和参数
// @namespace   Violentmonkey Scripts
// @match       https://www.kujiale.com/pub/saas/admin/brandgoods/all*
// @match       https://www.kujiale.com/pub/saas/workbench/brandgoods/all*
// @grant       none
// @version     1.0
// @author      hejie13250
// @description 2025/2/26 10:15:58
// ==/UserScript==

(function() {
    'use strict';


    // 添加样式到文档
    var style = document.createElement('style');
    document.head.appendChild(style);
    style.type = 'text/css';
    style.appendChild(document.createTextNode(`
      tr.StyledBodyRowTr-kSBvgt td:nth-child(1),
      tr.StyledBodyRowTr-kSBvgt td:nth-child(2),
      tr.StyledBodyRowTr-kSBvgt td:nth-last-child(2),
      tr.StyledBodyRowTr-kSBvgt td:nth-last-child(1) {
          cursor: default;
      }
      tr.StyledBodyRowTr-kSBvgt > td {
        padding: 0px 5px !important;
      }
      .Link-qfJUS.dtwGsR {
        padding: 6px 6px;
      }
      .fnmwsn {
        margin-bottom: 0px;
      }
      .djGvpx:hover {
        background: #9d8b889c;
      }
    `));

    // 防止表格前两列和后两列误点击
    // document.querySelectorAll('tr.StyledBodyRowTr-kSBvgt td:nth-child(1), tr.StyledBodyRowTr-kSBvgt td:nth-child(2), tr.StyledBodyRowTr-kSBvgt td:nth-last-child(2), tr.StyledBodyRowTr-kSBvgt td:nth-last-child(1)').forEach(td => {
    //     td.addEventListener('click', function(e) {
    //         e.preventDefault();
    //         e.stopPropagation();
    //     });
    // });

    var DEBUG_MODE = true     // 调试模式
    let idColumnIndex = null; // 动态ID列索引

    // 调试日志
    function log(...args) {
        if (DEBUG_MODE) console.log('[KUJIALE]', ...args);
    }

    // 初始化ID列索引
    function initIdColumnIndex() {
        const headerRow = document.querySelector('.StyledTable-diJSpn > thead:nth-child(2) > tr');
        if (!headerRow) {
            log('表头行未找到');
            return false;
        }

        const headers = headerRow.querySelectorAll('th');
        for (let i = 0; i < headers.length; i++) {
            if (headers[i].textContent.includes('商品ID')) {
                idColumnIndex = i + 1;
                log('ID列索引:', idColumnIndex);
                return true;
            }
        }

        log('未找到"商品ID"列');
        return false;
    }

    // 创建浮动窗口
    function createFloatingWindow() {
        const modalMask = document.createElement('div');
        modalMask.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:999;display:none;';

        const modalContent = document.createElement('div');
        modalContent.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:500px;height:600px;background:white;border-radius:8px;padding:20px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.15);';

        const tablesContainer = document.createElement('div');
        tablesContainer.style.cssText = 'height:560px;overflow:auto;';

        modalContent.appendChild(tablesContainer);
        modalMask.appendChild(modalContent);
        document.body.appendChild(modalMask);

        // 点击遮罩层关闭窗口
        modalMask.addEventListener('click', (e) => {
            if (e.target === modalMask) {
                modalMask.style.display = 'none';
            }
        });

        return { modalMask, tablesContainer };
    }

    // 创建并显示浮动窗口
    const { modalMask, tablesContainer } = createFloatingWindow();



    function createTable(title, columns, rows) {
        const table = document.createElement('table');
        table.style.cssText = 'width:100%;margin-top:20px;border-collapse:collapse;font-size:14px;';

        const thead = document.createElement('thead');
        thead.innerHTML = `<tr>${columns.map(col => `<th style="border:1px solid #ddd;padding:8px;background:#f5f5f5;">${col}</th>`).join('')}</tr>`;

        const tbody = document.createElement('tbody');
        rows.forEach(row => {
            const tr = document.createElement('tr');
            tr.innerHTML = row.map(cell => `<td style="border:1px solid #ddd;padding:8px;">${cell}</td>`).join('');
            tbody.appendChild(tr);
        });

        table.appendChild(thead);
        table.appendChild(tbody);

        const wrapper = document.createElement('div');
        wrapper.style.marginTop = '20px';

        const titleEl = document.createElement('h3');
        titleEl.textContent = title;
        titleEl.style.cssText = 'font-size:16px;margin:0 0 10px 0;color:#333;';

        wrapper.appendChild(titleEl);
        wrapper.appendChild(table);
        return wrapper;
    }

    function getData(obsBgId) {
        tablesContainer.innerHTML = '<div style="text-align:center;padding:20px;">加载中...</div>';

        Promise.allSettled([
            fetch(`https://www.kujiale.com/editor/api/site/param/bizproperty/editordata/query?obsBrandGoodId=${obsBgId}`)
                .then(r => r.json()),
            fetch(`https://www.kujiale.com/dcscms/api/custom/brandgood/attribute?start=0&num=30&obsBgId=${obsBgId}`)
                .then(r => r.json()),
            fetch(`https://www.kujiale.com/editor/api/site/input/parameters/${obsBgId}`)
                .then(r => r.json())
        ]).then(responses => {
            tablesContainer.innerHTML = '';

            responses.forEach((response, index) => {
                if (response.status !== 'fulfilled') return;

                const data = response.value;
                let title = '', columns = [], rows = [];

                switch(index) {
                    case 0: // 自定义输出属性
                        if (data?.d?.length > 0) {
                            title = '自定义输出属性';
                            columns = ['属性名称', '属性引用名', '属性值'];
                            rows = data.d.map(item => [item.name, item.key, item.value]);
                        }
                        break;
                    case 1: // 自定义属性
                        if (data?.d?.result?.length > 0) {
                            title = '自定义属性';
                            columns = ['属性名称', '属性引用名', '属性值'];
                            rows = data.d.result.map(item => [item.attributeName, item.quoteName, item.attributeValue]);
                        }
                        break;
                    case 2: // 自定义参数
                        if (Array.isArray(data) && data.length > 0) {
                            title = '自定义参数';
                            columns = ['参数名称', '参数引用名'];
                            rows = data.map(item => [item.displayName, item.paramName]);
                        }
                        break;
                }

                if (title && columns.length > 0) {
                    tablesContainer.appendChild(createTable(title, columns, rows));
                }
            });

            modalMask.style.display = tablesContainer.children.length > 0 ? 'block' : 'none';
        });
    }
    // 通用按钮创建函数
    function createButton() {
        const btn = document.createElement('div');
        btn.className = 'custom-update-btn';
        btn.style.cssText = 'display: inline-block;';

        const link = document.createElement('a');
        link.className = 'StyledLink-kjrCJO gvhEJs StyledInlineButton-fyUImi djGvpx WrapInlineButton-nnTTR kUBFEP Link-qfJUS dtwGsR';
        link.style.cssText = 'cursor: pointer; color: rgb(51, 139, 255);';
        link.textContent = '查看属性';

        // 点击事件处理
        link.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();

            // 向上查找数据行，获取商口ID，
            const row = this.closest('tr.StyledBodyRowTr-kSBvgt');
            if (!row) {
                log('未找到数据行元素');
                return;
            }

            // 动态获取ID列
            const idCell = row.querySelector(`td:nth-child(${idColumnIndex})`);
            if (!idCell) {
                log('ID列元素不存在');
                return;
            }

            // 兼容多层嵌套内容
            const actualElement = idCell.querySelector('span, div') || idCell;
            const currentId = (actualElement.textContent || '').trim();

            if (!currentId) {
                log('获取到空ID');
                return;
            }

            log('成功获取当前商品的ID:', currentId);

            getData(currentId);
        });

        btn.appendChild(link);
        return btn;
    }


    // 按钮注入逻辑
    function addButtons() {
        if (idColumnIndex === null) {
            if (!initIdColumnIndex()) {
                log('无法初始化ID列索引，按钮注入中止');
                return;
            }
        }

        document.querySelectorAll('tr.StyledBodyRowTr-kSBvgt').forEach(row => {
            const targetTd = row.querySelector(`td:nth-child(2) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1)`);
            if (!targetTd) {
                log('目标单元格不存在');
                return;
            }

            // 使用更稳定的容器选择方式
            const container = targetTd.querySelector('div:first-child');
            if (container && !container.querySelector('.custom-update-btn')) {
                container.append(createButton());

                log('按钮注入成功');
            }
        });
    }

    // DOM观察器，监听表格动态加载
    const observer = new MutationObserver(mutations => {
        if (document.querySelector('tr.StyledBodyRowTr-kSBvgt')) {
            addButtons();
        }
    });

    // 启动观察
    observer.observe(document.body, {
        childList: true,
        subtree: true,
        attributes: false
    });

    // 初始执行
    if (document.readyState === 'complete') {
        addButtons();
    } else {
        window.addEventListener('load', addButtons);
    }
})();