"""
深入探索：找到详情ID的真实来源
"""
import asyncio
import json
from playwright.async_api import async_playwright


async def explore_deep():
    async with async_playwright() as p:
        browser = await p.chromium.launch(headless=False)
        page = await browser.new_page()
        
        # 监听所有网络请求
        all_requests = []
        all_responses = []
        
        async def on_request(request):
            all_requests.append({
                'url': request.url,
                'method': request.method
            })
        
        async def on_response(response):
            url = response.url
            if response.status == 200:
                try:
                    content_type = response.headers.get('content-type', '')
                    if 'json' in content_type:
                        body = await response.json()
                        all_responses.append({
                            'url': url,
                            'body': body
                        })
                except:
                    pass
        
        page.on('request', on_request)
        page.on('response', on_response)
        
        print("=" * 60)
        print("1. 访问并监听网络请求")
        print("=" * 60)
        
        await page.goto("https://kd.nsfc.cn/finalSearchList?s=人工智能")
        await page.wait_for_timeout(3000)
        
        # 触发搜索
        try:
            await page.click('button:has-text("检索")')
            await page.wait_for_timeout(3000)
        except:
            pass
        
        print(f"\n捕获到 {len(all_responses)} 个 JSON 响应")
        for resp in all_responses:
            print(f"\nURL: {resp['url']}")
            body_str = json.dumps(resp['body'], ensure_ascii=False)
            print(f"Body: {body_str[:300]}...")
        
        # 深入分析 Vue 组件
        print("\n" + "=" * 60)
        print("2. 深入分析 Vue 组件数据")
        print("=" * 60)
        
        vue_data = await page.evaluate('''() => {
            const results = [];
            
            // 遍历所有 Vue 组件
            const findVueData = (el, depth = 0) => {
                if (depth > 5) return;
                
                if (el.__vue__) {
                    const vm = el.__vue__;
                    const data = {};
                    
                    // 获取 $data
                    if (vm.$data) {
                        try {
                            data.$data = JSON.parse(JSON.stringify(vm.$data));
                        } catch(e) {
                            data.$data = String(vm.$data);
                        }
                    }
                    
                    // 获取 props
                    if (vm.$props) {
                        try {
                            data.$props = JSON.parse(JSON.stringify(vm.$props));
                        } catch(e) {}
                    }
                    
                    // 获取计算属性中可能的列表数据
                    if (vm.tableData) {
                        data.tableData = vm.tableData;
                    }
                    if (vm.list) {
                        data.list = vm.list;
                    }
                    if (vm.items) {
                        data.items = vm.items;
                    }
                    if (vm.projectList) {
                        data.projectList = vm.projectList;
                    }
                    
                    results.push({
                        tag: el.tagName,
                        class: el.className,
                        data: data
                    });
                }
                
                // 递归子元素
                Array.from(el.children || []).forEach(child => {
                    findVueData(child, depth + 1);
                });
            };
            
            findVueData(document.body);
            return results;
        }''')
        
        print(f"找到 {len(vue_data)} 个 Vue 组件")
        for comp in vue_data[:5]:
            print(f"\n组件: {comp['tag']}.{comp['class'][:30]}")
            data_str = json.dumps(comp['data'], ensure_ascii=False)
            if len(data_str) > 500:
                print(f"  数据: {data_str[:500]}...")
            else:
                print(f"  数据: {data_str}")
        
        # 分析项目卡片的父组件
        print("\n" + "=" * 60)
        print("3. 分析项目卡片的 Vue 绑定")
        print("=" * 60)
        
        card_vue = await page.evaluate('''() => {
            const cards = document.querySelectorAll('.info-warp');
            const results = [];
            
            cards.forEach((card, idx) => {
                if (idx >= 3) return;
                
                // 向上查找 Vue 组件
                let el = card;
                let vueData = null;
                
                while (el && !vueData) {
                    if (el.__vue__) {
                        const vm = el.__vue__;
                        vueData = {
                            tag: el.tagName,
                            // 查找可能的项目数据
                            item: vm.item,
                            row: vm.row,
                            data: vm.data,
                            project: vm.project,
                            // $data 中的所有键
                            dataKeys: vm.$data ? Object.keys(vm.$data) : []
                        };
                    }
                    el = el.parentElement;
                }
                
                // 检查卡片内的 a 标签绑定
                const titleLink = card.querySelector('a');
                let linkVue = null;
                if (titleLink && titleLink.__vue__) {
                    linkVue = {
                        $data: titleLink.__vue__.$data,
                        $props: titleLink.__vue__.$props
                    };
                }
                
                results.push({
                    index: idx,
                    parentVue: vueData,
                    linkVue: linkVue,
                    // 获取卡片内所有文本用于匹配
                    text: card.innerText.substring(0, 100)
                });
            });
            
            return results;
        }''')
        
        for card in card_vue:
            print(f"\n卡片 {card['index']}:")
            print(f"  文本: {card['text'][:50]}...")
            print(f"  父Vue: {card['parentVue']}")
            print(f"  链接Vue: {card['linkVue']}")
        
        # 尝试从 window 或全局变量获取数据
        print("\n" + "=" * 60)
        print("4. 检查全局变量和 window 对象")
        print("=" * 60)
        
        global_data = await page.evaluate('''() => {
            const result = {};
            
            // 检查常见的全局变量名
            const names = ['__INITIAL_STATE__', '__DATA__', 'pageData', 
                          'searchResult', 'projectList', 'tableData'];
            
            names.forEach(name => {
                if (window[name]) {
                    result[name] = window[name];
                }
            });
            
            // 检查 Vuex store
            const app = document.querySelector('#app');
            if (app && app.__vue__ && app.__vue__.$store) {
                result.vuexState = app.__vue__.$store.state;
            }
            
            return result;
        }''')
        
        print(f"全局数据: {json.dumps(global_data, ensure_ascii=False)[:500]}")
        
        # 最后：直接获取列表容器的 Vue 数据
        print("\n" + "=" * 60)
        print("5. 获取列表容器的完整数据")
        print("=" * 60)
        
        list_data = await page.evaluate('''() => {
            // 找到包含所有项目的容器
            const container = document.querySelector('.el-main') || 
                             document.querySelector('[class*="list"]') ||
                             document.querySelector('#app');
            
            if (!container) return null;
            
            // 递归查找包含 tableData 或 list 的 Vue 组件
            const findListData = (el) => {
                if (!el) return null;
                
                if (el.__vue__) {
                    const vm = el.__vue__;
                    
                    // 检查各种可能的数据属性
                    if (vm.tableData && Array.isArray(vm.tableData)) {
                        return { source: 'tableData', data: vm.tableData };
                    }
                    if (vm.list && Array.isArray(vm.list)) {
                        return { source: 'list', data: vm.list };
                    }
                    if (vm.$data && vm.$data.tableData) {
                        return { source: '$data.tableData', data: vm.$data.tableData };
                    }
                    if (vm.$data && vm.$data.list) {
                        return { source: '$data.list', data: vm.$data.list };
                    }
                }
                
                // 递归子元素
                for (const child of (el.children || [])) {
                    const result = findListData(child);
                    if (result) return result;
                }
                
                return null;
            };
            
            return findListData(container);
        }''')
        
        if list_data:
            print(f"数据来源: {list_data['source']}")
            print(f"数据条数: {len(list_data['data'])}")
            if list_data['data']:
                print(f"第一条数据: {json.dumps(list_data['data'][0], ensure_ascii=False)}")
        else:
            print("未找到列表数据")
        
        await browser.close()


if __name__ == "__main__":
    asyncio.run(explore_deep())
