<template>
    <div class="flex h-screen overflow-hidden">
        <!-- 侧边栏 -->
        <siderbar />

        <!-- 主内容区 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部导航 -->
            <header class="bg-white shadow-sm z-10">
                <div class="flex items-center justify-between p-4">
                    <div class="flex items-center">
                        <button class="md:hidden mr-4 text-gray-500 hover:text-dark" id="mobile-menu-button"
                            @click="toggleMobileMenu">
                            <i class="fa fa-bars text-xl"></i>
                        </button>
                        <div class="relative">
                            <input type="text" placeholder="搜索..."
                                class="pl-10 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64">
                            <i
                                class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                        </div>
                    </div>

                    <div class="flex items-center space-x-4">
                        <button class="relative text-gray-500 hover:text-dark transition-colors" title="通知">
                            <i class="fa fa-bell text-xl"></i>
                            <span
                                class="absolute -top-1 -right-1 w-4 h-4 bg-danger rounded-full text-white text-xs flex items-center justify-center">3</span>
                        </button>
                        <button class="relative text-gray-500 hover:text-dark transition-colors" title="消息">
                            <i class="fa fa-envelope text-xl"></i>
                            <span
                                class="absolute -top-1 -right-1 w-4 h-4 bg-primary rounded-full text-white text-xs flex items-center justify-center">5</span>
                        </button>
                        <div class="hidden md:block h-6 w-px bg-gray-200"></div>

                        <!-- 个人信息下拉菜单 -->
                        <div class="relative" id="user-menu-container">
                            <button class="flex items-center space-x-2 focus:outline-none" id="user-menu-button"
                                @click="toggleUserDropdown">
                                <img src="https://picsum.photos/id/1005/200/200" alt="用户头像"
                                    class="w-8 h-8 rounded-full object-cover md:hidden">
                                <span class="hidden md:inline text-sm font-medium">张经理</span>
                                <i class="fa fa-angle-down text-gray-500"></i>
                            </button>

                            <!-- 下拉菜单内容 -->
                            <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-1 z-50 transition-all duration-200"
                                id="user-dropdown"
                                :class="userDropdownOpen ? 'opacity-100 visible translate-y-0' : 'opacity-0 invisible -translate-y-2'">
                                <a href="profile.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                    <i class="fa fa-user mr-2"></i>个人资料
                                </a>
                                <a href="account-settings.html"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                    <i class="fa fa-cog mr-2"></i>账户设置
                                </a>
                                <a href="subscription.html"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                    <i class="fa fa-subscription mr-2"></i>会员订阅
                                </a>
                                <div class="border-t border-gray-100 my-1"></div>
                                <a href="login.html" class="block px-4 py-2 text-sm text-danger hover:bg-gray-100">
                                    <i class="fa fa-sign-out mr-2"></i>退出登录
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            <!-- 页面内容 -->
            <main class="flex-1 overflow-y-auto p-4 md:p-6 scrollbar-hide bg-gray-50">
                <div class="mb-6">
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold">控制台</h2>
                    <p class="text-gray-500 mt-1">欢迎回来，今天是 <span class="font-medium" id="current-date">{{ currentDate
                    }}</span>
                    </p>
                </div>

                <!-- 数据概览卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                    <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-gray-500 text-sm">已生成软文</p>
                                <h3 class="text-2xl font-bold mt-1">248</h3>
                                <p class="text-success text-sm mt-2 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 12.5% <span
                                        class="text-gray-500 ml-1">较上月</span>
                                </p>
                            </div>
                            <div
                                class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                                <i class="fa fa-file-text-o text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-gray-500 text-sm">已发布</p>
                                <h3 class="text-2xl font-bold mt-1">196</h3>
                                <p class="text-success text-sm mt-2 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 8.3% <span class="text-gray-500 ml-1">较上月</span>
                                </p>
                            </div>
                            <div
                                class="w-12 h-12 rounded-lg bg-success/10 flex items-center justify-center text-success">
                                <i class="fa fa-check-circle-o text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-gray-500 text-sm">知识库文档</p>
                                <h3 class="text-2xl font-bold mt-1">156</h3>
                                <p class="text-success text-sm mt-2 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 15.2% <span
                                        class="text-gray-500 ml-1">较上月</span>
                                </p>
                            </div>
                            <div
                                class="w-12 h-12 rounded-lg bg-secondary/10 flex items-center justify-center text-secondary">
                                <i class="fa fa-book text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-gray-500 text-sm">平均阅读量</p>
                                <h3 class="text-2xl font-bold mt-1">2.4k</h3>
                                <p class="text-danger text-sm mt-2 flex items-center">
                                    <i class="fa fa-arrow-down mr-1"></i> 3.1% <span
                                        class="text-gray-500 ml-1">较上月</span>
                                </p>
                            </div>
                            <div
                                class="w-12 h-12 rounded-lg bg-warning/10 flex items-center justify-center text-warning">
                                <i class="fa fa-eye text-xl"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 图表和最近活动 -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
                    <!-- 内容趋势图表 -->
                    <div class="bg-white rounded-xl shadow-sm p-5 lg:col-span-2 card-hover">
                        <div class="flex items-center justify-between mb-6">
                            <h3 class="font-bold text-lg">内容趋势</h3>
                            <div class="flex space-x-2">
                                <button class="px-3 py-1 text-sm bg-primary/10 text-primary rounded-lg">周</button>
                                <button class="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-lg">月</button>
                                <button class="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-lg">年</button>
                            </div>
                        </div>
                        <div class="h-64">
                            <canvas id="contentTrendChart"></canvas>
                        </div>
                    </div>

                    <!-- 最近活动 -->
                    <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                        <div class="flex items-center justify-between mb-6">
                            <h3 class="font-bold text-lg">最近活动</h3>
                            <a href="activity-log.html" class="text-primary text-sm hover:underline">查看全部</a>
                        </div>
                        <div class="space-y-4 max-h-64 overflow-y-auto scrollbar-hide">
                            <div class="flex items-start space-x-3" v-for="activity in recentActivities"
                                :key="activity.id">
                                <div class="w-8 h-8 rounded-full" :class="activity.bgClass">
                                    <i class="fa" :class="activity.iconClass"></i>
                                </div>
                                <div>
                                    <p class="text-sm">{{ activity.description }}</p>
                                    <p class="text-gray-500 text-xs mt-1">{{ activity.time }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 核心功能区 -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <!-- 软文生成 -->
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
                        <div class="h-32 bg-gradient-to-r from-primary to-primary/70 relative">
                            <div class="absolute right-0 top-0 opacity-10">
                                <i class="fa fa-file-text text-[150px] text-white"></i>
                            </div>
                            <div class="p-5 relative z-10">
                                <h3 class="text-white font-bold text-xl">软文生成</h3>
                                <p class="text-white/80 text-sm mt-1">基于AI和知识库，快速生成高质量软文</p>
                            </div>
                        </div>
                        <div class="p-5">
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-1">生成主题</label>
                                <input type="text" placeholder="输入您想要生成的软文主题..."
                                    class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                                    v-model="articleGeneration.topic">
                            </div>
                            <div class="grid grid-cols-2 gap-3 mb-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">文章风格</label>
                                    <select
                                        class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                                        v-model="articleGeneration.style">
                                        <option>专业严谨</option>
                                        <option>轻松活泼</option>
                                        <option>幽默风趣</option>
                                        <option>简洁明了</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">参考知识库</label>
                                    <select
                                        class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                                        v-model="articleGeneration.knowledgeBase">
                                        <option>全部文档</option>
                                        <option>产品手册</option>
                                        <option>行业报告</option>
                                        <option>营销素材</option>
                                    </select>
                                </div>
                            </div>
                            <button class="w-full btn-primary flex items-center justify-center"
                                id="generate-article-button" @click="generateArticle">
                                <i class="fa fa-magic mr-2"></i> 立即生成
                            </button>
                        </div>
                    </div>

                    <!-- 发布计划 -->
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
                        <div class="h-32 bg-gradient-to-r from-secondary to-secondary/70 relative">
                            <div class="absolute right-0 top-0 opacity-10">
                                <i class="fa fa-calendar-check-o text-[150px] text-white"></i>
                            </div>
                            <div class="p-5 relative z-10">
                                <h3 class="text-white font-bold text-xl">发布计划</h3>
                                <p class="text-white/80 text-sm mt-1">设置全年发布计划，自动定时发布</p>
                            </div>
                        </div>
                        <div class="p-5">
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-1">发布平台</label>
                                <div class="flex flex-wrap gap-2">
                                    <label
                                        class="inline-flex items-center px-3 py-1 border border-gray-200 rounded-full text-sm cursor-pointer hover:bg-gray-50"
                                        v-for="platform in publishPlatforms" :key="platform.id">
                                        <input type="checkbox" class="form-checkbox text-primary h-4 w-4 mr-2"
                                            v-model="platform.checked">
                                        <span>{{ platform.name }}</span>
                                    </label>
                                </div>
                            </div>
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-1">发布频率</label>
                                <div class="flex items-center">
                                    <input type="number" v-model="publishFrequency.count" min="1" max="10"
                                        class="w-16 px-3 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                    <span class="mx-2 text-gray-500">篇/天</span>
                                    <select
                                        class="flex-1 ml-2 px-3 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                                        v-model="publishFrequency.period">
                                        <option>工作日发布</option>
                                        <option>每日发布</option>
                                        <option>自定义日期</option>
                                    </select>
                                </div>
                            </div>
                            <button class="w-full btn-primary flex items-center justify-center"
                                id="setup-schedule-button" @click="setupSchedule">
                                <i class="fa fa-calendar-plus-o mr-2"></i> 设置计划
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 知识库和待发布 -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <!-- 知识库管理 -->
                    <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="font-bold text-lg">知识库管理</h3>
                            <button class="btn-secondary text-sm py-1" id="add-knowledge-button"
                                @click="openModal('add-knowledge-modal')">
                                <i class="fa fa-plus mr-1"></i> 新增
                            </button>
                        </div>
                        <div class="space-y-3 max-h-72 overflow-y-auto scrollbar-hide">
                            <div class="flex items-center justify-between p-3 border border-gray-100 rounded-lg hover:bg-gray-50"
                                v-for="doc in knowledgeDocs" :key="doc.id">
                                <div class="flex items-center space-x-3">
                                    <div class="w-10 h-10 rounded" :class="doc.iconBgClass">
                                        <i class="fa" :class="doc.iconClass"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium">{{ doc.name }}</p>
                                        <p class="text-gray-500 text-xs">{{ doc.size }} · {{ doc.date }}</p>
                                    </div>
                                </div>
                                <div class="flex space-x-1">
                                    <button class="text-gray-400 hover:text-primary p-1" title="编辑"
                                        @click="editKnowledgeDoc(doc.id)">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <button class="text-gray-400 hover:text-danger p-1" title="删除"
                                        @click="deleteKnowledgeDoc(doc.id)">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="mt-4 text-center">
                            <a href="knowledge-base.html" class="text-primary text-sm hover:underline">查看所有文档</a>
                        </div>
                    </div>

                    <!-- 待发布文章 -->
                    <div class="bg-white rounded-xl shadow-sm p-5 lg:col-span-2 card-hover">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="font-bold text-lg">待发布文章</h3>
                            <div class="flex space-x-2">
                                <button class="btn-secondary text-sm py-1">
                                    <i class="fa fa-calendar mr-1"></i> 查看计划
                                </button>
                                <button class="btn-primary text-sm py-1" id="add-article-button"
                                    @click="openModal('add-article-modal')">
                                    <i class="fa fa-plus mr-1"></i> 新增文章
                                </button>
                            </div>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full">
                                <thead>
                                    <tr class="text-left text-gray-500 text-sm border-b">
                                        <th class="pb-3 font-medium">标题</th>
                                        <th class="pb-3 font-medium">发布平台</th>
                                        <th class="pb-3 font-medium">发布时间</th>
                                        <th class="pb-3 font-medium">状态</th>
                                        <th class="pb-3 font-medium text-right">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="border-b border-gray-100 hover:bg-gray-50"
                                        v-for="article in pendingArticles" :key="article.id">
                                        <td class="py-3 text-sm">
                                            <p class="font-medium">{{ article.title }}</p>
                                        </td>
                                        <td class="py-3 text-sm">
                                            <span v-for="platform in article.platforms" :key="platform.id"
                                                :class="platform.badgeClass"
                                                class="inline-flex items-center px-2 py-1 rounded-full text-xs mr-1">
                                                {{ platform.name }}
                                            </span>
                                        </td>
                                        <td class="py-3 text-sm text-gray-500">{{ article.publishTime }}</td>
                                        <td class="py-3 text-sm">
                                            <span
                                                class="inline-flex items-center px-2 py-1 bg-green-50 text-green-600 rounded-full text-xs">
                                                <i class="fa fa-clock-o mr-1"></i> 已排期
                                            </span>
                                        </td>
                                        <td class="py-3 text-sm text-right">
                                            <div class="flex justify-end space-x-2">
                                                <button class="text-primary hover:text-primary/80" title="编辑"
                                                    @click="editArticle(article.id)">
                                                    <i class="fa fa-pencil"></i>
                                                </button>
                                                <button class="text-warning hover:text-warning/80" title="调整时间"
                                                    @click="adjustArticleTime(article.id)">
                                                    <i class="fa fa-calendar"></i>
                                                </button>
                                                <button class="text-danger hover:text-danger/80" title="取消发布"
                                                    @click="cancelArticle(article.id)">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-4 text-center">
                            <a href="pending-articles.html" class="text-primary text-sm hover:underline">查看所有待发布文章</a>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- 新增文章弹窗 -->
    <div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center transition-all duration-300"
        id="add-article-modal"
        :class="activeModal === 'add-article-modal' ? 'opacity-100 visible' : 'opacity-0 invisible'">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto transform transition-all duration-300"
            id="add-article-modal-content"
            :class="activeModal === 'add-article-modal' ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'">
            <div class="p-6 border-b">
                <div class="flex items-center justify-between">
                    <h3 class="text-xl font-bold">新增文章</h3>
                    <button class="text-gray-500 hover:text-gray-700" @click="closeModal">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">文章标题</label>
                    <input type="text" placeholder="输入文章标题..."
                        class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                        v-model="newArticle.title">
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">文章内容</label>
                    <textarea rows="8" placeholder="输入文章内容..."
                        class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                        v-model="newArticle.content"></textarea>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">文章分类</label>
                    <select
                        class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                        v-model="newArticle.category">
                        <option>产品介绍</option>
                        <option>行业资讯</option>
                        <option>技术分享</option>
                        <option>客户案例</option>
                        <option>活动推广</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">发布平台</label>
                    <div class="flex flex-wrap gap-2">
                        <label
                            class="inline-flex items-center px-3 py-1 border border-gray-200 rounded-full text-sm cursor-pointer hover:bg-gray-50"
                            v-for="platform in newArticlePlatforms" :key="platform.id">
                            <input type="checkbox" class="form-checkbox text-primary h-4 w-4 mr-2"
                                v-model="platform.checked">
                            <span>{{ platform.name }}</span>
                        </label>
                    </div>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">发布时间</label>
                    <input type="datetime-local"
                        class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                        v-model="newArticle.publishTime">
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">SEO设置</label>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">关键词</label>
                            <input type="text" placeholder="输入关键词，用逗号分隔"
                                class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                                v-model="newArticle.seo.keywords">
                        </div>
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">描述</label>
                            <input type="text" placeholder="输入描述信息"
                                class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                                v-model="newArticle.seo.description">
                        </div>
                    </div>
                </div>
            </div>
            <div class="p-6 border-t flex justify-end space-x-3">
                <button class="btn-secondary" @click="closeModal">取消</button>
                <button class="btn-primary" @click="saveNewArticle">保存并发布</button>
            </div>
        </div>
    </div>

    <!-- 新增知识库文档弹窗 -->
    <div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center transition-all duration-300"
        id="add-knowledge-modal" v-show="showKnowledgeModal"
        :class="activeModal === 'add-knowledge-modal' ? 'opacity-100 visible' : 'opacity-0 invisible'">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-md max-h-[90vh] overflow-y-auto transform transition-all duration-300"
            id="add-knowledge-modal-content"
            :class="activeModal === 'add-knowledge-modal' ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'">
            <div class="p-6 border-b">
                <div class="flex items-center justify-between">
                    <h3 class="text-xl font-bold">新增知识库文档</h3>
                    <button class="text-gray-500 hover:text-gray-700" @click="closeModal">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">文档标题</label>
                    <input type="text" placeholder="输入文档标题..."
                        class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                        v-model="newKnowledgeDoc.title">
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">文档分类</label>
                    <select
                        class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                        v-model="newKnowledgeDoc.category">
                        <option>产品手册</option>
                        <option>行业报告</option>
                        <option>客户案例</option>
                        <option>营销素材</option>
                        <option>其他文档</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">上传文档</label>
                    <div
                        class="border-2 border-dashed border-gray-200 rounded-lg p-6 text-center hover:bg-gray-50 cursor-pointer">
                        <i class="fa fa-cloud-upload text-3xl text-gray-400 mb-2"></i>
                        <p class="text-sm text-gray-500">点击或拖拽文件至此处上传</p>
                        <p class="text-xs text-gray-400 mt-1">支持 PDF, Word, Excel, PPT 格式</p>
                        <input type="file" class="hidden" id="file-upload" @change="handleFileUpload">
                    </div>
                    <p class="text-xs text-gray-500 mt-2" v-if="newKnowledgeDoc.fileName">{{ newKnowledgeDoc.fileName }}
                    </p>
                </div>
            </div>
            <div class="p-6 border-t flex justify-end space-x-3">
                <button class="btn-secondary" @click="closeModal">取消</button>
                <button class="btn-primary" @click="saveNewKnowledgeDoc"
                    :disabled="!newKnowledgeDoc.fileName">上传文档</button>
            </div>
        </div>
    </div>
</template>

<script setup>
import siderbar from '@/components/siderbar.vue';
import { ref, onMounted } from 'vue';
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

// 状态管理
const userDropdownOpen = ref(false);
const mobileMenuOpen = ref(false);
const activeModal = ref('');
const currentDate = ref('');
const showKnowledgeModal = ref(false);
// 文章生成表单数据
const articleGeneration = ref({
    topic: '',
    style: '专业严谨',
    knowledgeBase: '全部文档'
});

// 发布平台数据
const publishPlatforms = ref([
    { id: 1, name: '官网博客', checked: true },
    { id: 2, name: '微信公众号', checked: true },
    { id: 3, name: '今日头条', checked: false }
]);

// 发布频率数据
const publishFrequency = ref({
    count: 2,
    period: '工作日发布'
});

// 最近活动数据
const recentActivities = ref([
    {
        id: 1,
        description: '生成了2篇关于"夏季促销"的软文',
        time: '今天 09:45',
        bgClass: 'bg-primary/10 flex items-center justify-center text-primary flex-shrink-0',
        iconClass: 'fa-file-text-o'
    },
    {
        id: 2,
        description: '成功发布3篇文章到官网博客',
        time: '昨天 15:30',
        bgClass: 'bg-success/10 flex items-center justify-center text-success flex-shrink-0',
        iconClass: 'fa-check-circle-o'
    },
    {
        id: 3,
        description: '上传了5份产品手册到知识库',
        time: '昨天 10:15',
        bgClass: 'bg-secondary/10 flex items-center justify-center text-secondary flex-shrink-0',
        iconClass: 'fa-upload'
    },
    {
        id: 4,
        description: '设置了未来7天的发布计划',
        time: '2023-06-12 16:40',
        bgClass: 'bg-warning/10 flex items-center justify-center text-warning flex-shrink-0',
        iconClass: 'fa-calendar'
    },
    {
        id: 5,
        description: '2篇文章发布失败，请检查',
        time: '2023-06-11 08:25',
        bgClass: 'bg-danger/10 flex items-center justify-center text-danger flex-shrink-0',
        iconClass: 'fa-exclamation-circle'
    }
]);

// 知识库文档数据
const knowledgeDocs = ref([
    {
        id: 1,
        name: '2023产品手册.pdf',
        size: '2.4MB',
        date: '2023-05-18',
        iconBgClass: 'bg-primary/10 flex items-center justify-center text-primary',
        iconClass: 'fa-file-pdf-o'
    },
    {
        id: 2,
        name: '行业分析报告.docx',
        size: '1.8MB',
        date: '2023-06-02',
        iconBgClass: 'bg-secondary/10 flex items-center justify-center text-secondary',
        iconClass: 'fa-file-word-o'
    },
    {
        id: 3,
        name: '客户案例数据.xlsx',
        size: '3.2MB',
        date: '2023-06-05',
        iconBgClass: 'bg-warning/10 flex items-center justify-center text-warning',
        iconClass: 'fa-file-excel-o'
    },
    {
        id: 4,
        name: '产品介绍.pptx',
        size: '5.7MB',
        date: '2023-06-10',
        iconBgClass: 'bg-success/10 flex items-center justify-center text-success',
        iconClass: 'fa-file-powerpoint-o'
    }
]);

// 待发布文章数据
const pendingArticles = ref([
    {
        id: 1,
        title: '2023夏季新品发布会亮点回顾',
        platforms: [
            { id: 1, name: '官网博客', badgeClass: 'bg-blue-50 text-blue-600' }
        ],
        publishTime: '2023-06-15 10:00'
    },
    {
        id: 2,
        title: '如何选择适合您的产品解决方案',
        platforms: [
            { id: 2, name: '微信公众号', badgeClass: 'bg-green-50 text-green-600' }
        ],
        publishTime: '2023-06-15 15:30'
    },
    {
        id: 3,
        title: '行业趋势分析：未来五年发展预测',
        platforms: [
            { id: 1, name: '官网博客', badgeClass: 'bg-blue-50 text-blue-600' },
            { id: 3, name: '今日头条', badgeClass: 'bg-orange-50 text-orange-600' }
        ],
        publishTime: '2023-06-16 09:30'
    }
]);

// 新文章表单数据
const newArticle = ref({
    title: '',
    content: '',
    category: '产品介绍',
    publishTime: '',
    seo: {
        keywords: '',
        description: ''
    }
});

// 新文章发布平台
const newArticlePlatforms = ref([
    { id: 1, name: '官网博客', checked: true },
    { id: 2, name: '微信公众号', checked: true },
    { id: 3, name: '今日头条', checked: false },
    { id: 4, name: '微博', checked: false }
]);

// 新知识库文档数据
const newKnowledgeDoc = ref({
    title: '',
    category: '产品手册',
    fileName: ''
});

// 方法
const toggleUserDropdown = () => {
    userDropdownOpen.value = !userDropdownOpen.value;
};

const toggleMobileMenu = () => {
    mobileMenuOpen.value = !mobileMenuOpen.value;
};

const openModal = (modalId) => {
    activeModal.value = modalId;
    // 设置默认发布时间为当前时间加1小时
    if (modalId === 'add-article-modal') {
        const now = new Date();
        now.setHours(now.getHours() + 1);
        newArticle.value.publishTime = now.toISOString().slice(0, 16);
    }
};

const closeModal = () => {
    activeModal.value = '';
};

const generateArticle = () => {
    // 生成文章逻辑
    alert(`正在生成关于"${articleGeneration.value.topic}"的${articleGeneration.value.style}风格文章...`);
};

const setupSchedule = () => {
    // 设置发布计划逻辑
    // const platforms = publishPlatforms.value
    //   .filter(p => p.checked)
    //   .map(p => p.name)
    //   .join(', ');
    // alert(`已设置发布计划：每天${publishFrequency.value.count}篇，发布到${platforms}，${publishFrequency.value.period}`);
    showKnowledgeModal.value = true
};

const editKnowledgeDoc = (id) => {
    // 编辑知识库文档逻辑
    const doc = knowledgeDocs.value.find(d => d.id === id);
    alert(`编辑文档：${doc.name}`);
};

const deleteKnowledgeDoc = (id) => {
    // 删除知识库文档逻辑
    const doc = knowledgeDocs.value.find(d => d.id === id);
    if (confirm(`确定要删除文档"${doc.name}"吗？`)) {
        knowledgeDocs.value = knowledgeDocs.value.filter(d => d.id !== id);
    }
};

const editArticle = (id) => {
    // 编辑文章逻辑
    const article = pendingArticles.value.find(a => a.id === id);
    alert(`编辑文章：${article.title}`);
};

const adjustArticleTime = (id) => {
    // 调整文章发布时间逻辑
    const article = pendingArticles.value.find(a => a.id === id);
    alert(`调整文章"${article.title}"的发布时间，当前时间：${article.publishTime}`);
};

const cancelArticle = (id) => {
    // 取消发布文章逻辑
    const article = pendingArticles.value.find(a => a.id === id);
    if (confirm(`确定要取消发布文章"${article.title}"吗？`)) {
        pendingArticles.value = pendingArticles.value.filter(a => a.id !== id);
    }
};

const saveNewArticle = () => {
    // 保存新文章逻辑
    if (!newArticle.value.title) {
        alert('请输入文章标题');
        return;
    }

    if (!newArticle.value.content) {
        alert('请输入文章内容');
        return;
    }

    const selectedPlatforms = newArticlePlatforms.value
        .filter(p => p.checked)
        .map(p => ({
            id: p.id,
            name: p.name,
            badgeClass: p.id === 1 ? 'bg-blue-50 text-blue-600' :
                p.id === 2 ? 'bg-green-50 text-green-600' :
                    p.id === 3 ? 'bg-orange-50 text-orange-600' :
                        'bg-purple-50 text-purple-600'
        }));

    if (selectedPlatforms.length === 0) {
        alert('请至少选择一个发布平台');
        return;
    }

    pendingArticles.value.push({
        id: pendingArticles.value.length + 1,
        title: newArticle.value.title,
        platforms: selectedPlatforms,
        publishTime: newArticle.value.publishTime
    });

    // 重置表单并关闭弹窗
    newArticle.value = {
        title: '',
        content: '',
        category: '产品介绍',
        publishTime: '',
        seo: {
            keywords: '',
            description: ''
        }
    };

    newArticlePlatforms.value.forEach(p => p.checked = false);
    closeModal();
    alert('文章已保存并加入发布计划');
};

const handleFileUpload = (e) => {
    // 处理文件上传逻辑
    if (e.target.files && e.target.files[0]) {
        newKnowledgeDoc.value.fileName = e.target.files[0].name;
    }
};

const saveNewKnowledgeDoc = () => {
    // 保存新知识库文档逻辑
    if (!newKnowledgeDoc.value.title) {
        alert('请输入文档标题');
        return;
    }

    if (!newKnowledgeDoc.value.fileName) {
        alert('请上传文档');
        return;
    }

    // 确定图标样式
    let iconBgClass, iconClass;
    if (newKnowledgeDoc.value.fileName.endsWith('.pdf')) {
        iconBgClass = 'bg-primary/10 flex items-center justify-center text-primary';
        iconClass = 'fa-file-pdf-o';
    } else if (newKnowledgeDoc.value.fileName.endsWith('.docx') || newKnowledgeDoc.value.fileName.endsWith('.doc')) {
        iconBgClass = 'bg-secondary/10 flex items-center justify-center text-secondary';
        iconClass = 'fa-file-word-o';
    } else if (newKnowledgeDoc.value.fileName.endsWith('.xlsx') || newKnowledgeDoc.value.fileName.endsWith('.xls')) {
        iconBgClass = 'bg-warning/10 flex items-center justify-center text-warning';
        iconClass = 'fa-file-excel-o';
    } else if (newKnowledgeDoc.value.fileName.endsWith('.pptx') || newKnowledgeDoc.value.fileName.endsWith('.ppt')) {
        iconBgClass = 'bg-success/10 flex items-center justify-center text-success';
        iconClass = 'fa-file-powerpoint-o';
    } else {
        iconBgClass = 'bg-gray-100 flex items-center justify-center text-gray-500';
        iconClass = 'fa-file-o';
    }

    // 添加到知识库
    knowledgeDocs.value.push({
        id: knowledgeDocs.value.length + 1,
        name: newKnowledgeDoc.value.fileName,
        size: '2.1MB', // 示例大小
        date: new Date().toISOString().split('T')[0],
        iconBgClass,
        iconClass
    });

    // 重置表单并关闭弹窗
    newKnowledgeDoc.value = {
        title: '',
        category: '产品手册',
        fileName: ''
    };

    document.getElementById('file-upload').value = '';
    closeModal();
    alert('文档已上传到知识库');
};

// 初始化日期显示
const formatDate = (date) => {
    const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
    return date.toLocaleDateString('zh-CN', options);
};

// 初始化图表
const initChart = () => {
    const ctx = document.getElementById('contentTrendChart').getContext('2d');

    // 生成过去7天的日期标签
    const labels = [];
    const today = new Date();
    for (let i = 6; i >= 0; i--) {
        const date = new Date(today);
        date.setDate(today.getDate() - i);
        labels.push(date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' }));
    }

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [
                {
                    label: '生成文章',
                    data: [12, 19, 15, 20, 18, 25, 22],
                    borderColor: '#165DFF',
                    backgroundColor: 'rgba(22, 93, 255, 0.1)',
                    tension: 0.4,
                    fill: true
                },
                {
                    label: '发布文章',
                    data: [8, 15, 10, 18, 14, 20, 16],
                    borderColor: '#36CFC9',
                    backgroundColor: 'rgba(54, 207, 201, 0.1)',
                    tension: 0.4,
                    fill: true
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        drawBorder: false
                    }
                },
                x: {
                    grid: {
                        display: false
                    }
                }
            }
        }
    });
};

// 挂载时初始化
onMounted(() => {
    currentDate.value = formatDate(new Date());
    initChart();

    // 点击外部关闭下拉菜单
    document.addEventListener('click', (e) => {
        const userMenu = document.getElementById('user-menu-container');
        if (!userMenu.contains(e.target)) {
            userDropdownOpen.value = false;
        }
    });
});

tailwind.config = {
    theme: {
        extend: {
            colors: {
                primary: '#165DFF',
                secondary: '#36CFC9',
                success: '#52C41A',
                warning: '#FAAD14',
                danger: '#FF4D4F',
                dark: '#1D2129',
                'gray-light': '#F2F3F5',
                'gray-medium': '#C9CDD4'
            },
            fontFamily: {
                inter: ['Inter', 'system-ui', 'sans-serif'],
            },
        },
    }
}
</script>

<style scoped>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@layer utilities {
    .content-auto {
        content-visibility: auto;
    }

    .sidebar-item-active {
        @apply bg-primary/10 text-primary border-l-4 border-primary;
    }

    .card-hover {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
    }

    .btn-primary {
        @apply bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-all duration-200 shadow-md hover:shadow-lg;
    }

    .btn-secondary {
        @apply bg-white text-primary border border-primary px-4 py-2 rounded-lg hover:bg-primary/5 transition-all duration-200;
    }

    .scrollbar-hide {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    .dropdown-active {
        @apply opacity-100 visible translate-y-0;
    }

    .modal-active {
        @apply opacity-100 visible;
    }

    .modal-content-active {
        @apply opacity-100 translate-y-0;
    }
}

.btn-primary {
    background-color: rgb(0, 119, 255);
}
</style>