<template>
    <div class="page">
        <header class="hero">
            <div class="hero__title">Live Overview Wall</div>
            <div class="hero__sub">6 identical external panels in a clean, responsive grid</div>
        </header>

        <div class="grid">
            <div v-for="n in 6" :key="n" class="card">
                <div class="card__badge">Panel {{ n }}</div>
                <div class="frame">
                    <webview :ref="el => setWvRef(el, n)" :src="src" :partition="`persist:tiktok_panel_${n}`"
                        :useragent="userAgent" allowpopups webpreferences="contextIsolation=yes, nodeIntegration=no"
                        style="width:100%;height:100%;border:0;" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "TestView",
    data() {
        return {
            src: "https://live-backstage.tiktok.com/portal/overview",

            // ✅ 用一个“正常 Chrome”的 UA（别带 Electron 字样）
            userAgent:
                "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36",

            wvMap: new Map(),
        };
    },
    methods: {
        setWvRef(el, n) {
            if (el) this.wvMap.set(n, el);
        },

        bindWebview(wv, idx) {
            // 1) SSO / window.open：尽量在当前 webview 内打开
            wv.addEventListener("new-window", (e) => {
                try {
                    if (e?.url) wv.loadURL(e.url);
                } catch { }
            });

            // 2) 有些站点会走 will-navigate（跳转链路）
            wv.addEventListener("will-navigate", (e) => {
                // 这里一般不拦截，主要是为了日志
                console.log(`[webview ${idx}] will-navigate ->`, e?.url);
            });

            // 3) 打印 webview 内的 console（便于定位）
            wv.addEventListener("console-message", (e) => {
                // e.level: 0=log,1=warn,2=error,3=info
                if (e.level === 2) {
                    console.warn(`[webview ${idx}] console error:`, e.message);
                }
            });

            // 4) 关键：加载失败日志（你现在的 ERR_BLOCKED_BY_RESPONSE 就能看到）
            wv.addEventListener("did-fail-load", (e) => {
                console.warn(
                    `[webview ${idx}] did-fail-load`,
                    "code=", e?.errorCode,
                    "desc=", e?.errorDescription,
                    "url=", e?.validatedURL
                );
            });

            // 5) 只打开第一个面板 DevTools（避免 6 个一起开）
            if (idx === 1) {
                wv.addEventListener("dom-ready", () => {
                    try {
                        wv.openDevTools();
                    } catch { }
                });
            }
        },
    },

    mounted() {
        this.$nextTick(() => {
            // 等 webview refs 收集完后绑定事件
            for (let i = 1; i <= 6; i++) {
                const wv = this.wvMap.get(i);
                if (wv) this.bindWebview(wv, i);
            }
        });
    },
};
</script>

<style scoped>
.page {
    min-height: 100vh;
    padding: 28px 24px 40px;
    color: #1b1b1b;
    background:
        radial-gradient(1000px 500px at 10% -10%, #f1f7ff 0%, rgba(241, 247, 255, 0) 60%),
        radial-gradient(800px 400px at 95% 0%, #fff0e6 0%, rgba(255, 240, 230, 0) 55%),
        #f7f3ee;
}

.hero {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.hero__title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.hero__sub {
    font-size: 14px;
    color: #5c5c5c;
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.card {
    position: relative;
    padding: 12px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(35, 25, 15, 0.08);
    overflow: hidden;
}

.card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #5a3b1f;
    background: rgba(255, 226, 189, 0.9);
}

.frame {
    height: 44vh;
    min-height: 280px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #efe6dc;
}

/* 你原来写的是 iframe，这里改成 webview */
.frame webview {
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 720px) {
    .page {
        padding: 18px 14px 28px;
    }

    .grid {
        grid-template-columns: 1fr;
    }

    .frame {
        height: 52vh;
    }
}
</style>