// ==UserScript==
// @name         希音SKU获取
// @namespace    http://tampermonkey.net/
// @version      5.5
// @description  在编辑订单列表界面,点击对应的spu,点击编辑库存,然后摁下F2
// @author       binning
// @match        https://sso.geiwohuo.com/*
// @run-at       document-end
// @grant        GM_addStyle
// @require      https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.6/index.min.js
// @resource     element-ui-css https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.6/theme-chalk/index.min.css
// ==/UserScript==

(function () {
    'use strict';

    // 注入自定义美化样式
    GM_addStyle(`
        @import url("https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.6/theme-chalk/index.min.css");

        /* 对话框圆角与阴影 */
        .sku-custom-dialog {
            border-radius: 12px !important;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.15) !important;
        }
        .sku-custom-dialog .el-dialog__header {
            padding: 20px;
            background: #f8f9fa;
            border-bottom: 1px solid #ebeef5;
        }
        .sku-custom-dialog .el-dialog__title {
            font-weight: bold;
            color: #303133;
            font-size: 18px;
        }
        .sku-custom-dialog .el-dialog__body {
            padding: 15px 20px !important;
        }

        /* SKU 列表行样式 */
        .sku-row {
            display: flex;
            align-items: center;
            padding: 12px;
            margin-bottom: 10px;
            border-radius: 8px;
            background: #fff;
            border: 1px solid #f0f0f0;
            transition: all 0.2s ease-in-out;
        }
        .sku-row:hover {
            border-color: #409EFF;
            box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
        }

        /* 颜色标签样式 */
        .color-badge {
            width: 100px;
            font-size: 13px;
            font-weight: 600;
            color: #444;
            background: #edf2f7;
            padding: 6px 10px;
            border-radius: 6px;
            text-align: center;
            margin-right: 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* 底部操作区 */
        .dialog-footer {
            padding: 10px 20px 20px;
            border-top: 1px solid #f5f7fa;
        }
        
        /* 滚动条美化 */
        .sku-list-container::-webkit-scrollbar {
            width: 5px;
        }
        .sku-list-container::-webkit-scrollbar-thumb {
            background: #e4e7ed;
            border-radius: 10px;
        }
    `);

    const app = document.createElement('div');
    document.body.appendChild(app);

    new Vue({
        el: app,
        data: {
            dialogVisible: false,
            skuList: [],
            allSkuText: ''
        },
        template: `
            <div style="position: absolute; z-index: 9999;">
                <el-dialog 
                    :visible.sync="dialogVisible" 
                    custom-class="sku-custom-dialog"
                    @close="handleClose" 
                    width="850px"
                    title="SKU获取">
                    
                    <div v-if="skuList.length > 0" class="sku-list-container" style="max-height: 480px; overflow-y: auto;">
                        <div v-for="(item, index) in skuList" :key="index" class="sku-row">
                            <div class="color-badge" :title="item.color">{{ item.color }}</div>
                            <el-input 
                                size="middle"
                                v-model="item.skuCodes" 
                                readonly 
                                style="flex:1; margin-right: 15px;">
                            </el-input>
                            <el-button 
                                size="small" 
                                type="primary" 
                                plain
                                icon="el-icon-document-copy"
                                @click="copySingle(item.skuCodes)">
                                复制
                            </el-button>
                        </div>
                    </div>

                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false" size="medium">关闭</el-button>
                        <!-- 这里改成了蓝色主按钮，和单行复制按钮风格统一 -->
                        <el-button type="primary" icon="el-icon-copy-document" @click="copyAllSku" size="medium">
                            复制全部 SKU
                        </el-button>
                    </span>
                </el-dialog>
            </div>
        `,
        methods: {
            handleClose() {
                this.skuList = [];
                this.allSkuText = '';
            },

            async queryInventory(spuName) {
                const url = "https://sso.geiwohuo.com/spmp-api-prefix/spmp/product/inventory/query";
                const headers = {
                    "accept": "*/*",
                    "content-type": "application/json",
                    "front-version": "20250207",
                    "origin": "https://sso.geiwohuo.com",
                    "x-lt-language": "CN",
                };

                try {
                    const res = await fetch(url, {
                        method: "POST",
                        headers: headers,
                        body: JSON.stringify({ spu_name: spuName }),
                        credentials: "include",
                    });
                    return await res.json();
                } catch (err) {
                    console.error("请求失败：", err);
                    return null;
                }
            },

            async parseAndShowTable(data) {
                if (!data?.info?.skc_info) {
                    this.$message.warning('未找到相关的 SKU 数据');
                    return;
                }

                this.skuList = [];
                let allText = '';

                data.info.skc_info.forEach(skc => {
                    const color = skc.sale_name;
                    const skuCodes = skc.sku_info.map(item => item.sku_code).join(' ');
                    this.skuList.push({ color, skuCodes });
                    allText += skuCodes + ' ';
                });

                this.allSkuText = allText.trim();
                this.dialogVisible = true;
            },

            copySingle(text) {
                navigator.clipboard.writeText(text).then(() => {
                    this.$message({
                        message: '该行 SKU 已复制',
                        type: 'success',
                        duration: 1500
                    });
                });
            },

            copyAllSku() {
                navigator.clipboard.writeText(this.allSkuText).then(() => {
                    this.$notify({
                        title: '全部复制成功',
                        message: '已获取完整 SKU 文本',
                        type: 'success',
                        position: 'bottom-right'
                    });
                });
            },
        },
        mounted() {
            window.addEventListener('keydown', async (e) => {
                if (e.key === 'F2') {
                    e.preventDefault();
                    try {
                        const spuEl = document.querySelector("#LAYOUT_CONTENT > div.so-modal.so-modal-position.so-modal-show > div > div > div.so-card-body > div > div:nth-child(1) > div.mt-\\[10px\\].min-w-0.flex-1 > div:nth-child(2)");
                        if (!spuEl) {
                            this.$message.error('请先开启“编辑库存”弹窗');
                            return;
                        }
                        const text = spuEl.textContent.trim();
                        const spu = text.split("：")[1]?.trim();
                        
                        if (!spu) {
                            this.$message.error('SPU 解析异常');
                            return;
                        }

                        const loadingInstance = this.$loading({ lock: true, text: '数据加载中...', background: 'rgba(255, 255, 255, 0.7)' });
                        const res = await this.queryInventory(spu);
                        loadingInstance.close();

                        if (res) await this.parseAndShowTable(res);
                    } catch (err) {
                        this.$message.error('运行异常');
                        console.error(err);
                    }
                }

                if (e.key === 'Escape' && this.dialogVisible) {
                    this.dialogVisible = false;
                }
            });
        }
    });
})();