<template>
  <div class="exam-page">
    <!-- 功能标签栏 -->
    <TabsBar
      :tabs="dashboardModuleTabs"
      v-model="activeTab"
    />

    <!-- ========== 数据概览面板 ========== -->
    <div v-show="activeTab === 'overview'" class="exam-container">
      <PageHeader
        title="数据概览"
        description="查看系统运行数据和关键指标"
      >
        <template #actions>
          <select v-model="department" class="form-select header-filter-select">
            <option value="all">全部部门</option>
            <option value="hr">人力资源部</option>
            <option value="finance">财务部</option>
            <option value="market">市场部</option>
            <option value="tech">技术部</option>
            <option value="sales">销售部</option>
          </select>
        </template>
      </PageHeader>

      <div class="stats-row">
        <div v-for="(stat, index) in stats" :key="index" class="stat-card">
          <div class="stat-icon" :style="{ backgroundColor: stat.color + '15', color: stat.color }">
            <component :is="stat.icon" style="font-size: 24px;" />
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stat.value }}</div>
            <div class="stat-label">{{ stat.name }}</div>
          </div>
        </div>
      </div>

      <div class="row-layout">
        <div class="col-half">
          <div class="exam-card">
            <div class="card-header">
              <h2>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: -4px; margin-right: 6px;"><line x1="12" y1="20" x2="12" y2="10"></line><line x1="18" y1="20" x2="18" y2="4"></line><line x1="6" y1="20" x2="6" y2="16"></line></svg>
                部门学习完成率
              </h2>
            </div>
            <div class="completion-list">
              <div v-for="record in completionData" :key="record.name" class="completion-item">
                <div class="completion-header">
                  <span class="completion-name">{{ record.name }}</span>
                  <div class="completion-right">
                    <span class="completion-value">{{ record.completion }}%</span>
                    <span v-if="record.completion >= 80" class="trend-up">↑</span>
                    <span v-else class="trend-down">↓</span>
                  </div>
                </div>
                <div class="completion-bar">
                  <div class="completion-bar-fill" 
                       :style="{ 
                         width: record.completion + '%', 
                         backgroundColor: record.completion >= 80 ? '#52c41a' : record.completion >= 60 ? '#faad14' : '#f5222d' 
                       }"></div>
                </div>
                <div class="completion-meta">
                  <span class="completion-meta-item">考试: {{ record.exams }}%</span>
                  <span class="completion-meta-item">活跃: {{ record.activity }}%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-half">
          <div class="exam-card">
            <div class="card-header">
              <h2>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: -4px; margin-right: 6px;"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path></svg>
                制度热度排行榜
              </h2>
            </div>
            <div class="rank-list">
              <div v-for="(record, idx) in hotDocs" :key="idx" class="rank-item">
                <span class="rank-number" :style="{ backgroundColor: idx < 3 ? '#667eea' : '#f0f0f0', color: idx < 3 ? 'white' : '#666' }">{{ idx + 1 }}</span>
                <div class="rank-content">
                  <div class="rank-name">{{ record.name }}</div>
                  <div class="rank-stats">
                    <span class="rank-views">
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                      {{ record.views }} 次
                    </span>
                    <span class="rank-score">
                      <span class="star">★</span>
                      {{ record.score }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="exam-card">
        <div class="card-header">
          <h2>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: -4px; margin-right: 6px;"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
            制度维度分析
          </h2>
        </div>
        <div class="row-layout">
          <div class="col-half">
            <h3 style="margin-bottom: 16px; color: var(--text-primary);">热门制度</h3>
            <div class="doc-list">
              <div v-for="(doc, idx) in hotDocs.slice(0, 3)" :key="idx" class="doc-item" @click="handleDocClick(doc.name)">
                <span class="doc-name">{{ doc.name }}</span>
                <span class="doc-views">{{ doc.views }} 次</span>
              </div>
            </div>
          </div>
          <div class="col-half">
            <h3 style="margin-bottom: 16px; color: var(--text-secondary);">冷门制度</h3>
            <div class="doc-list">
              <div v-for="(doc, idx) in hotDocs.slice(3)" :key="idx" class="doc-item cold" @click="handleColdDocClick(doc.name)">
                <span class="doc-name">{{ doc.name }}</span>
                <span class="doc-views">{{ doc.views }} 次</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ========== 预警管理面板 ========== -->
    <div v-show="activeTab === 'alert'" class="exam-container">
      <div class="exam-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
        <h1 class="exam-title">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
          智能预警
        </h1>
        <div class="user-info">
          <span>共 {{ alerts.length }} 条预警</span>
        </div>
      </div>

      <div class="exam-card">
        <div class="card-header">
          <h2>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: -4px; margin-right: 6px;"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
            预警规则配置
          </h2>
        </div>
        <div class="config-grid">
          <div class="config-item">
            <div class="form-group" style="margin-bottom: 0;">
              <label class="form-label">学习预警阈值（%）</label>
              <input type="number" v-model.number="alertThreshold" class="form-input" min="0" max="100" />
              <p class="config-hint">学习完成率低于此值将触发预警</p>
            </div>
          </div>
          <div class="config-item">
            <div class="form-group" style="margin-bottom: 0;">
              <label class="form-label">更新预警提前天数</label>
              <input type="number" v-model.number="updateAlertDays" class="form-input" min="0" />
              <p class="config-hint">制度即将过期提前提醒</p>
            </div>
          </div>
          <div class="config-item">
            <div class="form-group" style="margin-bottom: 0;">
              <label class="form-label">风险预警问题频次阈值</label>
              <input type="number" v-model.number="riskThreshold" class="form-input" min="0" />
              <p class="config-hint">相同问题重复提问次数</p>
            </div>
          </div>
        </div>
        <div class="form-actions" style="margin-top: 20px;">
          <button class="btn btn-primary" @click="saveAlertConfig">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: -3px; margin-right: 4px;"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
            保存配置
          </button>
        </div>
      </div>

      <div class="exam-card">
        <div class="card-header">
          <h2>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: -4px; margin-right: 6px;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg>
            预警看板
          </h2>
        </div>
        <div class="alert-list">
          <div v-for="record in alerts" :key="record.id" class="alert-item">
            <div class="alert-level">
              <span :class="['level-badge', record.level === 'error' ? 'error' : record.level === 'warning' ? 'warning' : 'info']">
                {{ record.level === 'error' ? '严重' : record.level === 'warning' ? '警告' : '信息' }}
              </span>
            </div>
            <div class="alert-content">
              <div class="alert-type">{{ record.type }}</div>
              <div class="alert-desc">{{ record.content }}</div>
              <div class="alert-time">{{ record.time }}</div>
            </div>
            <div class="alert-action">
              <button class="btn btn-primary btn-sm" @click="handleProcessAlert(record)">处理</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ========== 决策支持面板 ========== -->
    <div v-show="activeTab === 'decision'" class="exam-container">
      <div class="exam-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
        <h1 class="exam-title">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
          决策支持
        </h1>
        <div class="user-info">
          <span>报告与推送配置</span>
        </div>
      </div>

      <div class="exam-card">
        <div class="card-header">
          <h2>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: -4px; margin-right: 6px;"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
            报告模板配置
          </h2>
        </div>
        <div class="config-grid">
          <div class="config-item">
            <div class="form-group" style="margin-bottom: 0;">
              <label class="form-label">报告名称</label>
              <input type="text" v-model="reportName" class="form-input" placeholder="输入报告名称" />
            </div>
          </div>
          <div class="config-item">
            <div class="form-group" style="margin-bottom: 0;">
              <label class="form-label">报告周期</label>
              <select v-model="reportPeriod" class="form-select">
                <option value="weekly">每周</option>
                <option value="monthly">每月</option>
                <option value="quarterly">每季度</option>
                <option value="yearly">每年</option>
              </select>
            </div>
          </div>
        </div>
        <div style="margin-top: 20px;">
          <label class="form-label">包含内容</label>
          <div class="checkbox-group">
            <label class="checkbox-item">
              <input type="checkbox" v-model="includeCompletion" />
              <span class="checkbox-custom"></span>
              学习完成率
            </label>
            <label class="checkbox-item">
              <input type="checkbox" v-model="includeExams" />
              <span class="checkbox-custom"></span>
              考试通过率
            </label>
            <label class="checkbox-item">
              <input type="checkbox" v-model="includeHotDocs" />
              <span class="checkbox-custom"></span>
              制度热度
            </label>
            <label class="checkbox-item">
              <input type="checkbox" v-model="includeAlerts" />
              <span class="checkbox-custom"></span>
              预警情况
            </label>
            <label class="checkbox-item">
              <input type="checkbox" v-model="includeRecommendations" />
              <span class="checkbox-custom"></span>
              个性化建议
            </label>
          </div>
        </div>
        <div class="form-actions" style="margin-top: 24px;">
          <button class="btn btn-primary" @click="saveReportTemplate">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: -3px; margin-right: 4px;"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
            保存模板
          </button>
        </div>
      </div>

      <div class="exam-card">
        <div class="card-header">
          <h2>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: -4px; margin-right: 6px;"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
            报告列表
          </h2>
        </div>
        <div class="report-list">
          <div v-for="record in reports" :key="record.id" class="report-item">
            <div class="report-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
            </div>
            <div class="report-info">
              <div class="report-name">{{ record.name }}</div>
              <div class="report-time">{{ record.time }}</div>
            </div>
            <div class="report-status">
              <span class="status-badge status-success">已完成</span>
            </div>
            <div class="report-action">
              <button class="btn btn-primary btn-sm" @click="message.success('报告下载成功！')">下载</button>
            </div>
          </div>
        </div>
      </div>

      <div class="exam-card">
        <div class="card-header">
          <h2>📧 推送设置</h2>
        </div>
        <div class="config-grid">
          <div class="config-item">
            <div class="form-group" style="margin-bottom: 0;">
              <label class="form-label">接收邮箱</label>
              <input type="email" v-model="pushEmail" class="form-input" placeholder="输入邮箱地址" />
            </div>
          </div>
          <div class="config-item">
            <div class="form-group" style="margin-bottom: 0;">
              <label class="form-label">推送时间</label>
              <input type="text" v-model="pushTime" class="form-input" placeholder="例如：每月1日 08:00" />
            </div>
          </div>
        </div>
        <div class="form-actions" style="margin-top: 20px;">
          <button class="btn btn-primary" @click="savePushSettings">💾 保存设置</button>
        </div>
      </div>
    </div>

    <!-- 弹窗组件 -->
    <a-modal v-model:open="showAlertProcessModal" title="处理预警" width="600" @ok="confirmProcessAlert">
      <div v-if="currentAlert">
        <div style="margin-bottom: 20px;">
          <h3 style="margin-bottom: 12px; color: var(--text-primary);">预警信息</h3>
          <div style="padding: 16px; background-color: var(--bg-warning); border-radius: 8px; border: 1px solid var(--color-warning);">
            <div style="margin-bottom: 8px;">
              <strong>类型：</strong>
              <span :class="['level-badge', currentAlert.level === 'error' ? 'error' : currentAlert.level === 'warning' ? 'warning' : 'info']">
                {{ currentAlert.type }}
              </span>
            </div>
            <div style="margin-bottom: 8px;">
              <strong>内容：</strong>{{ currentAlert.content }}
            </div>
            <div>
              <strong>时间：</strong>{{ currentAlert.time }}
            </div>
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">处理备注</label>
          <textarea class="form-input" v-model="processNote" placeholder="请输入处理备注..." rows="4" />
        </div>
        <div class="form-group">
          <label class="form-label">处理措施</label>
          <div class="checkbox-group">
            <label class="checkbox-item">
              <input type="checkbox" v-model="processActions.sendReminder" />
              <span class="checkbox-custom"></span>
              发送提醒
            </label>
            <label class="checkbox-item">
              <input type="checkbox" v-model="processActions.generateReport" />
              <span class="checkbox-custom"></span>
              生成报告
            </label>
            <label class="checkbox-item">
              <input type="checkbox" v-model="processActions.notifyDept" />
              <span class="checkbox-custom"></span>
              通知相关部门
            </label>
            <label class="checkbox-item">
              <input type="checkbox" v-model="processActions.createPlan" />
              <span class="checkbox-custom"></span>
              制定改进计划
            </label>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import {
  FileTextOutlined,
  TeamOutlined,
  MessageOutlined,
  BarChartOutlined,
  WarningOutlined,
  FolderOutlined,
  EditOutlined,
  LineChartOutlined,
  FireOutlined,
  BookOutlined,
  AlertOutlined,
  SettingOutlined
} from '@ant-design/icons-vue'
import { getDirectPermission } from '../utils/permission.js'
import TabsBar from './common/TabsBar.vue'
import PageHeader from './common/PageHeader.vue'

const activeTab = ref('overview')

const canShowOverview = computed(() =>
  getDirectPermission('dashboard') || getDirectPermission('dashboard:alert') || getDirectPermission('dashboard:decision')
)
const canShowAlert = computed(() =>
  getDirectPermission('dashboard:alert')
)
const canShowDecision = computed(() =>
  getDirectPermission('dashboard:decision')
)

const dashboardModuleTabs = computed(() => {
  const tabs = []
  if (canShowOverview.value) {
    tabs.push({ key: 'overview', label: '数据概览', icon: BarChartOutlined })
  }
  if (canShowAlert.value) {
    tabs.push({ key: 'alert', label: '预警管理', icon: AlertOutlined })
  }
  if (canShowDecision.value) {
    tabs.push({ key: 'decision', label: '决策支持', icon: SettingOutlined })
  }
  return tabs
})

const getFirstAccessibleTab = () => {
  if (canShowOverview.value) return 'overview'
  if (canShowAlert.value) return 'alert'
  if (canShowDecision.value) return 'decision'
  return null
}

watch(
  [canShowOverview, canShowAlert, canShowDecision],
  () => {
    const hasAccess =
      (activeTab.value === 'overview' && canShowOverview.value) ||
      (activeTab.value === 'alert' && canShowAlert.value) ||
      (activeTab.value === 'decision' && canShowDecision.value)

    if (!hasAccess) {
      const firstTab = getFirstAccessibleTab()
      if (firstTab) {
        activeTab.value = firstTab
      }
    }
  },
  { immediate: true }
)

onMounted(() => {
  const firstTab = getFirstAccessibleTab()
  if (firstTab) {
    activeTab.value = firstTab
  }
})

const department = ref('all')

const showAlertProcessModal = ref(false)
const currentAlert = ref(null)
const processNote = ref('')
const processActions = ref({
  sendReminder: false,
  generateReport: false,
  notifyDept: false,
  createPlan: false
})

const alertThreshold = ref(70)
const updateAlertDays = ref(30)
const riskThreshold = ref(5)

const reportName = ref('月度学习报告')
const reportPeriod = ref('monthly')
const includeCompletion = ref(true)
const includeExams = ref(true)
const includeHotDocs = ref(true)
const includeAlerts = ref(true)
const includeRecommendations = ref(false)
const pushEmail = ref('admin@company.com')
const pushTime = ref('每月1日 08:00')

const stats = [
  { name: '制度总数', value: 128, icon: FileTextOutlined, color: 'var(--color-primary)' },
  { name: '活跃用户', value: 324, icon: TeamOutlined, color: 'var(--text-secondary)' },
  { name: '问答数量', value: 567, icon: MessageOutlined, color: 'var(--text-tertiary)' },
  { name: '考试次数', value: 234, icon: EditOutlined, color: 'var(--text-secondary)' },
]

const completionData = [
  { name: '人力资源部', completion: 85, exams: 92, activity: 78 },
  { name: '财务部', completion: 78, exams: 85, activity: 72 },
  { name: '市场部', completion: 65, exams: 72, activity: 68 },
  { name: '技术部', completion: 90, exams: 95, activity: 88 },
  { name: '销售部', completion: 60, exams: 65, activity: 58 },
]

const hotDocs = [
  { name: '公司考勤制度', views: 324, score: 4.8 },
  { name: '财务报销制度', views: 289, score: 4.6 },
  { name: '人事管理制度', views: 256, score: 4.5 },
  { name: '安全操作规程', views: 212, score: 4.7 },
  { name: '员工手册', views: 189, score: 4.4 },
]

const alerts = [
  { id: 1, type: '学习预警', content: '人力资源部学习完成率低于70%', level: 'warning', time: '2026-03-30 14:30' },
  { id: 2, type: '更新预警', content: '财务报销制度即将过期', level: 'info', time: '2026-03-29 10:15' },
  { id: 3, type: '风险预警', content: '多条相同问题重复提问', level: 'error', time: '2026-03-28 09:45' },
]

const reports = [
  { id: 1, name: '3月学习报告', time: '2026-04-01 08:00', status: 'completed' },
  { id: 2, name: '2月学习报告', time: '2026-03-01 08:00', status: 'completed' },
  { id: 3, name: '1月学习报告', time: '2026-02-01 08:00', status: 'completed' },
]

const handleDocClick = (name) => {
  message.success(`正在打开《${name}》...`)
}

const handleColdDocClick = (name) => {
  message.info(`建议您学习《${name}》！`)
}

const saveAlertConfig = () => {
  message.success('预警规则配置保存成功！')
}

const saveReportTemplate = () => {
  message.success('报告模板保存成功！')
}

const savePushSettings = () => {
  message.success('推送设置保存成功！')
}

const handleProcessAlert = (record) => {
  currentAlert.value = record
  processNote.value = ''
  showAlertProcessModal.value = true
}

const confirmProcessAlert = () => {
  showAlertProcessModal.value = false
  message.success('预警处理成功！')
}
</script>

<style scoped>
.row-layout {
  display: flex;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.col-half {
  flex: 1;
}

.header-filters {
  display: flex;
  gap: var(--space-md);
}

.header-filter-select {
  width: 150px;
}

.completion-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.completion-item {
  background: var(--bg-container);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
}

.completion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.completion-name {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.completion-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.completion-value {
  font-weight: var(--weight-bold);
  font-size: var(--font-lg);
}

.trend-up {
  color: var(--text-secondary);
}

.trend-down {
  color: var(--color-error);
}

.completion-bar {
  height: 8px;
  background: var(--bg-active);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-sm);
}

.completion-bar-fill {
  height: 100%;
  border-radius: var(--radius-md);
  transition: width var(--transition-normal);
}

.completion-meta {
  display: flex;
  gap: var(--space-xl);
  font-size: var(--font-sm);
  color: var(--text-tertiary);
}

.completion-meta-item {
  background: var(--bg-base);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-sm);
}

.rank-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.rank-item {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-container);
  border-radius: var(--radius-lg);
}

.rank-number {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

.rank-content {
  flex: 1;
}

.rank-name {
  font-size: var(--font-lg);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.rank-stats {
  display: flex;
  gap: var(--space-xl);
  font-size: var(--font-sm);
  color: var(--text-tertiary);
}

.rank-views,
.rank-score {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.star {
  color: var(--text-tertiary);
}

.doc-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.doc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.doc-item:hover {
  border-color: var(--color-primary);
  background: var(--bg-active);
}

.doc-item.cold {
  color: var(--text-tertiary);
}

.doc-name {
  font-weight: var(--weight-medium);
}

.doc-views {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
}

.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.config-item {
  padding: var(--space-lg);
  background: var(--bg-container);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}

.config-hint {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  margin-top: var(--space-xs);
}

.checkbox-group {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: var(--bg-container);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.checkbox-item:hover {
  border-color: var(--color-primary);
  background: var(--bg-active);
}

.checkbox-item input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.alert-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.alert-item {
  display: flex;
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-lg);
  background: var(--bg-container);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}

.alert-level {
  flex-shrink: 0;
}

.level-badge {
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-xl);
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
}

.level-badge.error {
  background: var(--color-error-alpha-10);
  color: var(--color-error);
}

.level-badge.warning {
  background: var(--bg-active);
  color: var(--text-tertiary);
}

.level-badge.info {
  background: var(--bg-active);
  color: var(--text-secondary);
}

.alert-content {
  flex: 1;
}

.alert-type {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.alert-desc {
  font-size: var(--font-md);
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.alert-time {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
}

.report-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.report-item {
  display: flex;
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-lg);
  background: var(--bg-container);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}

.report-icon {
  font-size: 32px;
}

.report-info {
  flex: 1;
}

.report-name {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.report-time {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
}

.report-status {
  margin-right: var(--space-lg);
}

.report-action {
  flex-shrink: 0;
}

.form-actions {
  display: flex;
  gap: var(--space-md);
}
</style>

<style>
.exam-page {
  height: 100%;
  min-height: 100%;
  background: var(--bg-base);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

.main-tabs-bar {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-xl);
  background: var(--bg-base);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.tab-icon {
  font-size: var(--font-lg);
}

.exam-container {
  flex: 1;
  padding: var(--space-lg);
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
}

.exam-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg) var(--space-xl);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.exam-title {
  font-size: var(--font-xl);
  font-weight: bold;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.user-info {
  font-size: var(--font-md);
  opacity: 0.9;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.stat-card {
  background: var(--bg-base);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-icon {
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 20px;
  font-weight: var(--weight-bold);
  line-height: 1.2;
  color: var(--text-primary);
}

.stat-label {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

.exam-card {
  background: var(--bg-base);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-light);
}

.card-header h2 {
  margin: 0;
  font-size: var(--font-xl);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.header-actions {
  display: flex;
  gap: var(--space-sm);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-md);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-md);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--transition-normal);
  gap: var(--space-xs);
}

.btn-primary {
  background: var(--color-primary);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--bg-active);
  color: var(--text-secondary);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--border-light);
}

.btn-success {
  background: var(--text-secondary);
  color: white;
}

.btn-success:hover:not(:disabled) {
  background: var(--text-primary);
}

.btn-warning {
  background: var(--text-tertiary);
  color: white;
}

.btn-danger {
  background: var(--color-error);
  color: white;
}

.btn-sm {
  padding: 2px var(--space-sm);
  font-size: var(--font-sm);
}

.btn-xs {
  padding: 2px var(--space-xs);
  font-size: var(--font-xs);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.status-badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-xl);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
}

.status-badge.status-info {
  background: var(--bg-active);
  color: var(--text-secondary);
}

.status-badge.status-success {
  background: var(--bg-active);
  color: var(--text-secondary);
}

.status-badge.status-warning {
  background: var(--bg-active);
  color: var(--text-tertiary);
}

.form-group {
  margin-bottom: var(--space-md);
}

.form-label {
  display: block;
  font-size: var(--font-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.form-input {
  width: 100%;
  height: var(--input-height);
  padding: 0 var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-md);
  transition: all var(--transition-normal);
  background: var(--bg-container);
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-alpha-20);
  background: var(--bg-base);
}

/* ========== 统一选择器样式 ========== */
.form-select {
  width: 100%;
  height: var(--input-height);
  padding: 0 28px 0 var(--space-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-container) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%238c8c8c' d='M6 8.825L1.175 4 2.238 2.938 6 6.7l3.763-3.762L10.825 4z'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-size: 10px;
  font-size: var(--font-md);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-normal);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
}

.form-select:hover {
  border-color: var(--border-default);
  background-color: var(--bg-base);
  box-shadow: var(--shadow-sm);
}

.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha-15);
  background-color: var(--bg-base);
}

/* Ant Design Select 统一样式 */
.form-select :deep(.ant-select-selector) {
  height: var(--input-height) !important;
  min-height: var(--input-height) !important;
  max-height: var(--input-height) !important;
  padding: 0 28px 0 var(--space-md) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-light) !important;
  background: var(--bg-container) !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  transition: all var(--transition-normal) !important;
}

.form-select:hover :deep(.ant-select-selector) {
  border-color: var(--border-default) !important;
  background: var(--bg-base) !important;
  box-shadow: var(--shadow-sm) !important;
}

.form-select :deep(.ant-select-focused .ant-select-selector) {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-alpha-15) !important;
  background: var(--bg-base) !important;
}

/* 覆盖 Ant Design 按钮默认蓝色样式 */
:deep(.ant-btn-primary) {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  box-shadow: none !important;
}

:deep(.ant-btn-primary:hover) {
  background: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}

@media (max-width: 768px) {
  .main-tabs-bar {
    padding: 8px 12px;
    flex-wrap: wrap;
  }

  .main-tab-btn {
    padding: 10px 16px;
    font-size: 13px;
  }

  .tab-text {
    display: none;
  }

  .row-layout {
    flex-direction: column;
  }

  .config-grid {
    grid-template-columns: 1fr;
  }
}
</style>