<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宇之然 - 简单版</title>
    <script src="/static/vue.global.prod.js"></script>
    <link rel="stylesheet" href="/static/element-plus.css" />
    <script src="/static/element-plus.full.js"></script>
    <style>
        body { margin: 20px; font-family: sans-serif; }
        .card { border: 1px solid #ddd; padding: 20px; margin: 10px 0; border-radius: 8px; }
        .stat-value { font-size: 2rem; color: #409EFF; }
    </style>
</head>
<body>
    <div id="app">
        <h1>宇之然内容创作平台</h1>
        <div class="card">
            <h2>系统概览</h2>
            <div v-if="status">
                <p>选题总数: {{ status.total_topics }}</p>
                <p>待发布: {{ status.topics_by_status?.['待发布'] || 0 }}</p>
                <p>待处理: {{ status.topics_by_status?.['待处理'] || 0 }}</p>
            </div>
            <div v-else>加载中...</div>
            <button @click="refresh">刷新</button>
        </div>
        <div class="card">
            <h2>选题列表</h2>
            <div v-if="topics.length">
                <ul>
                    <li v-for="t in topics" :key="t.id">
                        {{ t.id }} - {{ t.title }} - {{ t.status }}
                    </li>
                </ul>
            </div>
            <div v-else-if="topics">无选题</div>
            <div v-else>加载中...</div>
        </div>
    </div>

    <script>
        const { createApp, ref, onMounted } = Vue;
        createApp({
            setup() {
                const API_BASE = '';
                const status = ref(null);
                const topics = ref([]);

                const refresh = async () => {
                    try {
                        const [s, t] = await Promise.all([
                            fetch(API_BASE + '/api/system/status').then(r => r.json()),
                            fetch(API_BASE + '/api/topics').then(r => r.json())
                        ]);
                        status.value = s;
                        topics.value = t;
                        console.log('数据加载成功', s, t);
                    } catch (e) {
                        console.error('刷新失败:', e);
                        alert('加载失败: ' + e);
                    }
                };

                onMounted(() => {
                    console.log('应用启动');
                    refresh();
                });

                return { status, topics, refresh };
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>