<template>
  <div class="app-container">
    <!-- 背景装饰 -->
    <div class="bg-decoration"></div>
    <div class="bg-gradient"></div>

    <!-- 顶部导航栏 -->
    <header class="header-container">
      <div class="header-left">
        <div class="logo">
          <span class="logo-icon">🏢</span>
          <span class="logo-text">统一门户</span>
        </div>
      </div>
      <div class="header-right">
        <!-- 头部按钮区域 -->
        <div class="header-buttons">
          <div class="header-button todo-button" @click="handleTodoClick">
            <span>待办</span>
            <span v-if="todoCountHeader > 0" class="badge-count">{{ todoCountHeader > 99 ? '99+' : todoCountHeader }}</span>
          </div>
          <div class="header-button unread-button" @click="handleUnreadClick">
            <span>待阅</span>
            <span v-if="unreadCountHeader > 0" class="badge-count">{{ unreadCountHeader > 99 ? '99+' : unreadCountHeader }}</span>
          </div>
          <div class="header-button" @click="handleCompanyWebsiteClick">
            <span>公司官网</span>
          </div>
          <div class="header-button" @click="handleHelpCenterClick">
            <span>帮助中心</span>
          </div>
        </div>

        <div class="user-info">
          <el-dropdown @command="handleUserMenuCommand" placement="bottom-end">
            <div class="avatar-wrapper" style="cursor: pointer;">
              <el-avatar :src="avatar" class="user-avatar">
                <span v-if="!avatar">{{ username ? username.charAt(0) : '?' }}</span>
              </el-avatar>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">
                  修改个人信息
                </el-dropdown-item>
                <el-dropdown-item command="password">
                  修改密码
                </el-dropdown-item>
                <el-dropdown-item command="logout" divided style="color: #f56c6c;">
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </header>

    <!-- 主体内容区 -->
    <main class="main-content">
      <!-- 轮播图区域 - 全新设计 -->
      <div class="new-carousel-container">
        <div class="carousel-cards">
          <div class="carousel-card" v-for="(item, index) in carouselItems" :key="index">
            <div class="card-gradient" :style="{background: getGradient(index)}"></div>
            <div class="card-content">
              <h3 class="card-title">{{ item.title }}</h3>
              <p class="card-desc">{{ item.description }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 主要内容网格布局 -->
      <div class="content-grid">
        <!-- 左侧列 -->
        <div class="grid-column left-column">
          <!-- 功能导航 -->
          <div class="section-card">
            <div class="section-header">
              <!--            <h2 class="section-title">功能导航</h2>-->
            </div>
            <div class="feature-nav-container">
              <div class="compact-menu-grid">
                <div class="compact-menu-item" v-for="menu in currentPageMenus" :key="menu.id" @click="handleMenuClick(menu)" :style="{ '--menu-color': menu.color }">
                  <div class="compact-menu-icon">{{ menu.icon }}</div>
                  <div class="compact-menu-name">{{ menu.name }}</div>
                </div>
              </div>
              <!-- 分页控件 -->
              <div class="pagination">
                <button class="page-btn" @click="changePage(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
                <span class="page-info">第 {{ currentPage }} / {{ totalPages }} 页</span>
                <button class="page-btn" @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">下一页</button>
              </div>
            </div>
          </div>

          <!-- 信息中心 -->
          <div class="section-card">
            <div class="section-header">
              <!--              <h2 class="section-title">信息中心</h2>-->
              <div class="tab-container">
                <el-tabs v-model="activeTab" @tab-click="handleTabClick" type="card" class="info-tabs">
                  <el-tab-pane label="通知公告" name="announcement" />
                  <el-tab-pane label="管理制度" name="rules" />
                  <el-tab-pane label="项目管理" name="project" />
                  <el-tab-pane label="培训社区" name="training" />
                  <el-tab-pane label="员工指引" name="guide" />
                </el-tabs>
              </div>
            </div>
            <div class="list-content">
              <div v-if="activeTab === 'announcement'" class="tab-content">
                <div v-for="(item, index) in announcements.slice(0, 4)" :key="index" class="list-item">
                  <div class="item-left">
                    <span class="item-dot">•</span>
                    <span class="item-title">{{ item.title }}</span>
                  </div>
                  <span class="item-date">{{ item.date }}</span>
                </div>
              </div>

              <!-- 其他tab内容结构类似 -->
              <div v-else-if="activeTab === 'rules'" class="tab-content">
                <div v-for="(item, index) in rules.slice(0, 4)" :key="index" class="list-item">
                  <div class="item-left">
                    <span class="item-dot">•</span>
                    <span class="item-title">{{ item.title }}</span>
                  </div>
                  <span class="item-date">{{ item.date }}</span>
                </div>
              </div>

              <div v-else-if="activeTab === 'project'" class="tab-content">
                <div v-for="(item, index) in projects.slice(0, 4)" :key="index" class="list-item">
                  <div class="item-left">
                    <span class="item-dot">•</span>
                    <span class="item-title">{{ item.title }}</span>
                  </div>
                  <span class="item-date">{{ item.date }}</span>
                </div>
              </div>

              <div v-else-if="activeTab === 'training'" class="tab-content">
                <div v-for="(item, index) in trainings.slice(0, 4)" :key="index" class="list-item">
                  <div class="item-left">
                    <span class="item-dot">•</span>
                    <span class="item-title">{{ item.title }}</span>
                  </div>
                  <span class="item-date">{{ item.date }}</span>
                </div>
              </div>

              <div v-else-if="activeTab === 'guide'" class="tab-content">
                <div v-for="(item, index) in guides.slice(0, 4)" :key="index" class="list-item">
                  <div class="item-left">
                    <span class="item-dot">•</span>
                    <span class="item-title">{{ item.title }}</span>
                  </div>
                  <span class="item-date">{{ item.date }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 任务管理中心 - 合并到一个卡片区域并使用Tab切换 -->
          <div class="task-center-card section-card">
            <div class="section-header">
              <!--              <h2 class="section-title">任务管理中心</h2>-->
              <div class="task-tabs">
                <el-tabs v-model="taskTab" type="card" class="compact-tabs">
                  <el-tab-pane label="待办统计" name="statistics" />
                  <el-tab-pane label="我的待办" name="todo" />
                  <!-- 移除红点显示 -->
                  <el-tab-pane label="我的已办" name="done" />
                  <el-tab-pane label="我的申请" name="apply" />
                </el-tabs>
              </div>
            </div>

            <!-- 任务列表内容 -->
            <div class="task-list-container">
              <!-- 待办任务列表 - 分页表格形式 -->
              <div v-if="taskTab === 'todo'" class="task-list">
                <el-table
                  :data="currentPageTodoTasks"
                  stripe
                  size="small"
                  style="width: 100%"
                  class="todo-task-table"
                >
                  <el-table-column prop="urgency" label="缓急" width="80">
                    <template #default="scope">
                      <span
:class="{
                        'urgency-high': scope.row.urgency === '紧急',
                        'urgency-medium': scope.row.urgency === '一般',
                        'urgency-low': scope.row.urgency === '普通'
                      }">
                        {{ scope.row.urgency }}
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="alarm" label="告警" width="60" align="center">
                    <template #default="scope">
                      <span class="alarm-icon" v-if="scope.row.alarm === '是'">{{ scope.row.alarm }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="source" label="来源" width="100" />
                  <el-table-column prop="title" label="事项" min-width="180">
                    <template #default="scope">
                      <div class="task-title-cell">{{ scope.row.title }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="category" label="待办分类" width="100" />
                  <el-table-column prop="initiator" label="发起人" width="80" />
                  <el-table-column prop="createTime" label="发起时间" width="140" />
                  <el-table-column prop="滞留Time" label="滞留时间" width="90" />
                  <el-table-column label="操作" width="100" fixed="right" align="center">
                    <template #default="scope">
                      <el-button type="text" size="small" @click="handleProcessTask(scope.row)">处理</el-button>
                    </template>
                  </el-table-column>
                </el-table>

                <!-- 分页控件 -->
                <div class="task-pagination">
                  <el-pagination
                    v-model:current-page="todoCurrentPage"
                    v-model:page-size="todoPageSize"
                    :page-sizes="[3, 5, 10, 20, 50]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="todoTasks.length"
                    @size-change="handleTodoPageChange"
                    @current-change="handleTodoPageChange"
                  />
                </div>

                <div v-if="todoTasks.length === 0" class="empty-state">
                  <div class="empty-icon">🎉</div>
                  <div class="empty-text">暂无待办任务</div>
                </div>
              </div>

              <!-- 已完成任务列表 - 分页表格形式 -->
              <div v-else-if="taskTab === 'done'" class="task-list">
                <el-table
                  :data="currentPageDoneTasks"
                  stripe
                  size="small"
                  style="width: 100%"
                  class="todo-task-table"
                >
                  <el-table-column prop="urgency" label="缓急" width="80">
                    <template #default="scope">
                      <span
:class="{
                        'urgency-high': scope.row.urgency === '紧急',
                        'urgency-medium': scope.row.urgency === '一般',
                        'urgency-low': scope.row.urgency === '普通'
                      }">
                        {{ scope.row.urgency }}
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="alarm" label="告警" width="60" align="center">
                    <template #default="scope">
                      <span class="alarm-icon" v-if="scope.row.alarm === '是'">{{ scope.row.alarm }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="source" label="来源" width="100" />
                  <el-table-column prop="title" label="事项" min-width="180">
                    <template #default="scope">
                      <div class="task-title-cell">{{ scope.row.title }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="category" label="待办分类" width="100" />
                  <el-table-column prop="initiator" label="发起人" width="80" />
                  <el-table-column prop="createTime" label="发起时间" width="140" />
                  <el-table-column prop="completedTime" label="处理时间" width="140" />
                  <el-table-column label="操作" width="100" fixed="right" align="center">
                    <template #default="scope">
                      <el-button type="text" size="small" @click="handleProcessTask(scope.row)">详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>

                <!-- 分页控件 -->
                <div class="task-pagination">
                  <el-pagination
                    v-model:current-page="doneCurrentPage"
                    v-model:page-size="donePageSize"
                    :page-sizes="[3, 5, 10, 20, 50]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="doneTasks.length"
                    @size-change="handleDonePageChange"
                    @current-change="handleDonePageChange"
                  />
                </div>

                <div v-if="doneTasks.length === 0" class="empty-state">
                  <div class="empty-icon">📝</div>
                  <div class="empty-text">暂无已完成任务</div>
                </div>
              </div>

              <!-- 申请记录列表 - 分页表格形式 -->
              <div v-else-if="taskTab === 'apply'" class="task-list">
                <el-table
                  :data="currentPageApplyRecords"
                  stripe
                  size="small"
                  style="width: 100%"
                  class="todo-task-table"
                >
                  <el-table-column prop="title" label="主题" min-width="180">
                    <template #default="scope">
                      <div class="task-title-cell">{{ scope.row.title }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="status" label="流程状态" width="100">
                    <template #default="scope">
                      <span :class="`status-${scope.row.status}`">
                        {{ scope.row.status === 'pending' ? '审批中' : scope.row.status === 'approved' ? '已通过' : '已拒绝' }}
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="number" label="编号" width="140" />
                  <el-table-column prop="applicant" label="申请人" width="100" />
                  <el-table-column prop="currentHandler" label="当前处理人" width="120" />
                  <el-table-column prop="currentNode" label="当前节点" width="140" />
                  <el-table-column label="操作" width="180" fixed="right" align="center">
                    <template #default="scope">
                      <el-button type="text" size="small" @click="handleApplyDetail(scope.row)">详情</el-button>
                      <el-button type="text" size="small" @click="handleApplyEdit(scope.row)" v-if="scope.row.status === 'pending'">修改</el-button>
                      <el-button type="text" size="small" @click="handleApplyDelete(scope.row)" v-if="scope.row.status === 'pending'">删除</el-button>
                      <el-button type="text" size="small" @click="handleApplyWithdraw(scope.row)" v-if="scope.row.status === 'pending'">撤回</el-button>
                    </template>
                  </el-table-column>
                </el-table>

                <!-- 分页控件 -->
                <div class="task-pagination">
                  <el-pagination
                    v-model:current-page="applyCurrentPage"
                    v-model:page-size="applyPageSize"
                    :page-sizes="[3, 5, 10, 20, 50]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="applyRecords.length"
                    @size-change="handleApplyPageChange"
                    @current-change="handleApplyPageChange"
                  />
                </div>

                <div v-if="applyRecords.length === 0" class="empty-state">
                  <div class="empty-icon">📋</div>
                  <div class="empty-text">暂无申请记录</div>
                </div>
              </div>

              <!-- 待办统计 -->
              <div v-else-if="taskTab === 'statistics'" class="statistics-content">
                <div class="statistics-scroll-container">
                  <div class="statistics-scroll-wrapper">
                    <div
                      v-for="stat in statisticsList"
                      :key="stat.id"
                      class="stat-item"
                      :style="{ '--stat-color': stat.color }"
                    >
                      <div class="stat-icon">{{ stat.icon }}</div>
                      <div class="stat-info">
                        <div class="stat-title">{{ stat.name }}</div>
                        <div class="stat-value">{{ stat.count }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>


          </div>
        </div>

        <!-- 右侧列 -->
        <div class="grid-column right-column">
          <!-- 个人信息 - 左右布局设计 -->
          <div class="section-card">
            <div class="section-header">
              <h2 class="section-title personal-info-title">个人信息</h2>
            </div>
            <div class="personal-info-left-right">
              <!-- 左侧头像区域 -->
              <div class="avatar-section">
                <el-avatar :src="avatar" class="personal-avatar-left">
                  <span v-if="!avatar">{{ username ? username.charAt(0) : '?' }}</span>
                </el-avatar>
              </div>

              <!-- 右侧信息区域 -->
              <div class="info-section">
                <div class="user-name-left">{{ username || '未登录' }}</div>
                <div class="info-grid">
                  <div class="info-item-left">
                    <span class="info-label-left">邮箱</span>
                    <span class="info-value-left">{{ email }}</span>
                  </div>
                  <div class="info-item-left">
                    <span class="info-label-left">手机</span>
                    <span class="info-value-left">{{ phone }}</span>
                  </div>
                  <div class="info-item-left">
                    <span class="info-label-left">部门</span>
                    <span class="info-value-left">{{ loginIp }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 今日日程 -->
          <div class="section-card">
            <div class="section-header">
              <h2 class="section-title schedule-title">今日日程</h2>
              <el-button type="primary" size="small" @click="showAddScheduleDialog">
                <el-icon><Plus /></el-icon>
                添加
              </el-button>
            </div>
            <div class="schedule">
              <div class="schedule-date">{{ currentDate }}</div>
              <div v-for="(item, index) in schedules" :key="index" class="schedule-item">
                <div class="schedule-time">{{ item.time }}</div>
                <div class="schedule-content">{{ item.content }}</div>
              </div>
              <div v-if="schedules.length === 0" class="schedule-empty">
                今日暂无日程安排
              </div>
            </div>
          </div>

          <!-- 添加日程弹窗 -->
          <el-dialog v-model="addScheduleDialogVisible" title="添加今日日程" width="400px">
            <el-form :model="scheduleForm" :rules="scheduleRules" ref="scheduleFormRef">
              <el-form-item label="时间段" prop="time">
                <el-input v-model="scheduleForm.time" placeholder="请输入时间段，如：10:00" />
              </el-form-item>
              <el-form-item label="事项内容" prop="content">
                <el-input v-model="scheduleForm.content" type="textarea" placeholder="请输入事项内容" />
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="addScheduleDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addSchedule">确定</el-button>
              </span>
            </template>
          </el-dialog>

          <!-- 公司资讯 -->
          <div class="section-card">
            <div class="section-header">
              <h2 class="section-title news-title">公司资讯</h2>
            </div>
            <div class="enhanced-news-container">
              <el-carousel
                ref="carouselRef"
                height="60px"
                direction="vertical"
                :autoplay="true"
                :interval="4000"
                indicator-position="none"
                :pause-on-hover="true"
              >
                <el-carousel-item v-for="item in newsList" :key="item.id">
                  <a
                    href="javascript:void(0);"
                    class="enhanced-news-item"
                    @mouseenter="pauseCarousel"
                    @mouseleave="startCarousel"
                  >
                    <el-tag v-if="item.tag" size="small" :type="item.tagType || 'info'">
                      {{ item.tag }}
                    </el-tag>
                    <span class="enhanced-news-title">{{ item.title }}</span>
                    <span class="enhanced-news-date">{{ item.date }}</span>
                  </a>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>

          <!-- 企业文化 -->
          <div class="section-card">
            <div class="section-header">
              <h2 class="section-title culture-title-header">企业文化</h2>
            </div>
            <div class="culture-list">
              <div v-for="item in cultureList" :key="item.id" class="culture-card">
                <div class="culture-image-wrapper">
                  <img :src="item.imageUrl" alt="{{ item.title }}" class="culture-image" />
                </div>
                <div class="culture-content">
                  <h3 class="culture-title">{{ item.title }}</h3>
                  <p class="culture-description">{{ item.description }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>



    </main>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox, ElLoading, ElDropdown, ElDropdownMenu, ElDropdownItem, ElIcon, ElDialog, ElForm, ElFormItem, ElInput, ElButton, ElCarousel, ElCarouselItem, ElTag } from 'element-plus'
import { Plus, Right } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import * as UserApi from '@/api/system/user'
import { useUserStore } from '@/store/modules/user'

export default {
  name: 'HomePage',
  setup() {
    // 用户信息相关数据
    const username = ref('未登录')
    const avatar = ref('')
    const employeeId = ref('')
    const email = ref('未登录')
    const phone = ref('未登录')
    const loginIp = ref('未登录')

    // 头部按钮相关数据
    const todoCountHeader = ref(15) // 待办数量
    const unreadCountHeader = ref(8) // 待阅数量

    // 当前日期
    const currentDate = ref('')

    // 轮播图相关
    const activeIndex = ref(0)

    // 菜单数据 - 模拟20条数据
    const menus = ref([
      { id: 1, name: '企业运营管理平台', icon: '📢', color: '#409EFF', url: '/index' },
      { id: 2, name: '合同管理', icon: '📝', color: '#67C23A', url: '/contract/contractsale' },
      { id: 3, name: '问卷调查', icon: '📋', color: '#E6A23C', url: '/index' },
      { id: 4, name: '质量管理', icon: '📚', color: '#F56C6C', url: '/quality/quality-notice' },
      { id: 5, name: '公众号管理', icon: '👨‍🏫', color: '#909399', url: '/mp/account' },
      { id: 6, name: '人力资源', icon: '👥', color: '#C06C84', url: '/index' },
      { id: 7, name: '设备管理', icon: '💰', color: '#38B2AC', url: '/index' },
      { id: 8, name: 'CRM系统', icon: '📊', color: '#818CF8', url: '/index' },
      { id: 9, name: 'ERP系统', icon: '📈', color: '#F472B6', url: '/index' },
      { id: 10, name: '报表管理', icon: '👤', color: '#60A5FA', url: '/index' },
      { id: 11, name: '审批中心', icon: '📄', color: '#4CAF50', url: '/index' },
      { id: 12, name: '系统管理', icon: '🏭', color: '#FF9800', url: '/index' },
      { id: 13, name: '文件管理', icon: '📦', color: '#2196F3', url: '/index' },
      // { id: 14, name: '采购管理', icon: '🛒', color: '#9C27B0' },
      // { id: 15, name: '销售管理', icon: '💰', color: '#F44336' },
      // { id: 16, name: '质量管理', icon: '✅', color: '#00BCD4' },
      // { id: 17, name: '文档管理', icon: '📑', color: '#FFC107' },
      // { id: 18, name: '设备管理', icon: '⚙️', color: '#795548' },
      // { id: 19, name: '安全管理', icon: '🔒', color: '#607D8B' },
      // { id: 20, name: '系统设置', icon: '⚙️', color: '#9E9E9E' }
    ])

    // 分页相关数据
    const currentPage = ref(1)
    const pageSize = ref(10) // 每页显示10个

    // 计算当前页显示的菜单
    const currentPageMenus = computed(() => {
      const startIndex = (currentPage.value - 1) * pageSize.value
      const endIndex = startIndex + pageSize.value
      return menus.value.slice(startIndex, endIndex)
    })

    // 总页数
    const totalPages = computed(() => {
      return Math.ceil(menus.value.length / pageSize.value)
    })

    // 企业文化数据 - 模拟5条最新数据
    const cultureList = ref([
      {
        id: 1,
        title: '企业愿景',
        description: '成为行业领先的企业管理解决方案提供商，为客户创造持续价值',
        imageUrl: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzQwOUVGRiIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIiAvPjwvc3ZnPg=='
      },
      {
        id: 2,
        title: '企业使命',
        description: '通过创新技术，助力企业高效运营，共建数字化未来',
        imageUrl: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAxMCAxMCBMIDMwIDEwIEwgMjAgMjAgTSAyMCAwIEwgMzAgMTAgTCAyMCAyMCBNIDIwIDIwIEwgMzAgMzAgTCAxMCAzMCBNIDIwIDIwIEwgMTAgMTAgTSAxMCAxMCBMIDIwIDIwIEwgMTAgMzAgTSAxMCAzMCBMIDIwIDIwIEwgMzAgMzAgTSAzMCAxMCBMIDIwIDIwIEwgMzAgMzAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzY3QzIzQSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIiAvPjwvc3ZnPg=='
      },
      {
        id: 3,
        title: '核心价值观',
        description: '诚信、创新、协作、卓越，是我们企业文化的基石和发展动力',
        imageUrl: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTE1IDEwIEwgMjUgMTAgTCAzMCAyMCBMIDI1IDMwIEwgMTUgMzAgTCAxMCAyMCBMIDE1IDEwIFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0U2QTIzQyIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIiAvPjwvc3ZnPg=='
      },
      {
        id: 4,
        title: '团队精神',
        description: '我们注重团队协作，相信集体的力量能够创造更大的价值',
        imageUrl: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTAgTCAxMCAwIEwgMjAgMTAgTCAxMCAyMCBNIDEwIDIwIEwgMjAgMTAgTDMwIDIwIEwgMjAgMzAgTSAyMCAxMCBMIDMwIDIwIEwgMzAgMzAgTSAwIDIwIEwgMTAgMzAgTCAxMCAyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRjU2QzZDIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiIC8+PC9zdmc+'
      },
      {
        id: 5,
        title: '客户导向',
        description: '以客户为中心，不断提升服务质量，满足客户多样化需求',
        imageUrl: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTIwIDAgTCA0MCAxNSBMIDIwIDMwIEwwIDE1IFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzMwMzEzMyIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIiAvPjwvc3ZnPg=='
      }
    ])

    // 切换页码
    const changePage = (page) => {
      currentPage.value = page
    }

    // 轮播图数据
    const carouselItems = ref([
      { title: '欢迎使用企业管理系统', description: '高效管理，提升价值' },
      { title: '激发团队潜能', description: '协作创新，共创未来' },
      { title: '引领数字化转型', description: '技术驱动，智能赋能' }
    ])

    // 获取渐变色
    const getGradient = (index) => {
      const gradients = [
        'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
        'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
      ]
      return gradients[index % gradients.length]
    }

    // Tab相关
    const activeTab = ref('announcement')

    // 列表数据
    const announcements = ref([
      { title: '关于2024年春节放假安排的通知', date: '2024-01-15' },
      { title: '公司年度优秀员工表彰决定', date: '2024-01-10' },
      { title: '新员工入职培训通知', date: '2024-01-05' },
      { title: '季度工作会议纪要', date: '2023-12-28' },
      { title: '系统升级维护公告', date: '2023-12-20' },
      { title: '元旦放假通知', date: '2023-12-15' }
    ])

    const rules = ref([
      { title: '员工考勤管理制度', date: '2024-01-10' },
      { title: '差旅费报销管理办法', date: '2024-01-05' },
      { title: '绩效考核实施细则', date: '2023-12-25' },
      { title: '员工培训管理规定', date: '2023-12-20' },
      { title: '安全操作规程', date: '2023-12-15' },
      { title: '保密协议实施办法', date: '2023-12-10' }
    ])

    const projects = ref([
      { title: '企业资源管理系统升级项目', date: '2024-01-15' },
      { title: '新产品研发项目启动', date: '2024-01-10' },
      { title: '市场拓展计划实施', date: '2024-01-05' },
      { title: '信息化建设三年规划', date: '2023-12-28' },
      { title: '客户关系管理系统优化', date: '2023-12-20' },
      { title: '供应链管理平台建设', date: '2023-12-15' }
    ])

    const trainings = ref([
      { title: '新员工入职培训', date: '2024-01-15' },
      { title: '领导力提升培训班', date: '2024-01-10' },
      { title: '专业技能提升课程', date: '2024-01-05' },
      { title: '安全生产知识培训', date: '2023-12-28' },
      { title: '团队建设活动通知', date: '2023-12-20' },
      { title: '管理创新研讨会', date: '2023-12-15' }
    ])

    const guides = ref([
      { title: '员工手册', date: '2024-01-10' },
      { title: '办公自动化系统使用指南', date: '2024-01-05' },
      { title: '员工福利政策解读', date: '2023-12-25' },
      { title: '职业发展规划指南', date: '2023-12-20' },
      { title: '沟通技巧培训资料', date: '2023-12-15' },
      { title: '工作效率提升指南', date: '2023-12-10' }
    ])

    // 待办统计数据
    const todoCount = ref(20)
    const doneCount = ref(12)
    const applyCount = ref(3)

    // 新增统计数据
    const oaSystemCount = ref(15)
    const reimbursementCount = ref(8)
    const leaveCount = ref(6)
    const promotionCount = ref(3)
    const contractApprovalCount = ref(4)

    // 待办统计列表数据 - 用于左滑展示的10条模拟数据
    const statisticsList = ref([
      { id: 1, name: 'OA系统待办', count: 15, icon: '📊', color: '#409eff' },
      { id: 2, name: '报销流程', count: 8, icon: '💰', color: '#67c23a' },
      { id: 3, name: '请假流程', count: 6, icon: '🏖️', color: '#e6a23c' },
      { id: 4, name: '岗位晋升', count: 3, icon: '📈', color: '#f56c6c' },
      { id: 5, name: '合同审批', count: 4, icon: '📝', color: '#909399' },
      { id: 6, name: '采购申请', count: 7, icon: '🛒', color: '#c06c84' },
      { id: 7, name: '项目进度', count: 9, icon: '📋', color: '#38b2ac' },
      { id: 8, name: '客户回访', count: 11, icon: '👥', color: '#818cf8' },
      { id: 9, name: '培训计划', count: 5, icon: '📚', color: '#f472b6' },
      { id: 10, name: '会议安排', count: 6, icon: '🗓️', color: '#60a5fa' }
    ])

    // 待办任务分页数据
    const todoCurrentPage = ref(1)
    const todoPageSize = ref(3)

    // 任务列表数据 - 丰富字段以支持表格展示
    const todoTasks = ref([
      { id: 1, title: '完成季度工作报告', priority: 'high', urgency: '紧急', alarm: '是', source: '系统自动', category: '报告', initiator: '张三', createTime: '2024-01-18 09:00',滞留Time: '0小时', dueDate: '今天 17:00' },
      { id: 2, title: '与市场部开会讨论新项目', priority: 'medium', urgency: '一般', alarm: '否', source: '会议安排', category: '会议', initiator: '李四', createTime: '2024-01-18 08:30',滞留Time: '0小时', dueDate: '今天 14:30' },
      { id: 3, title: '审批财务报销申请', priority: 'medium', urgency: '一般', alarm: '否', source: '员工申请', category: '审批', initiator: '王五', createTime: '2024-01-17 16:20',滞留Time: '15小时', dueDate: '明天 10:00' },
      { id: 4, title: '更新项目进度计划', priority: 'low', urgency: '普通', alarm: '否', source: '项目管理', category: '项目', initiator: '赵六', createTime: '2024-01-17 15:00',滞留Time: '17小时', dueDate: '明天 16:00' },
      { id: 5, title: '准备下周团队会议材料', priority: 'low', urgency: '普通', alarm: '否', source: '团队管理', category: '会议', initiator: '钱七', createTime: '2024-01-17 14:30',滞留Time: '18小时', dueDate: '周五 12:00' },
      { id: 6, title: '审核新员工试用期评估表', priority: 'high', urgency: '紧急', alarm: '是', source: '人事管理', category: '审批', initiator: '人事专员', createTime: '2024-01-18 10:15',滞留Time: '0小时', dueDate: '今天 16:00' },
      { id: 7, title: '分析上月销售数据报表', priority: 'medium', urgency: '一般', alarm: '否', source: '系统自动', category: '报告', initiator: '销售经理', createTime: '2024-01-17 11:30',滞留Time: '21小时', dueDate: '明天 12:00' },
      { id: 8, title: '制定产品推广方案', priority: 'medium', urgency: '一般', alarm: '否', source: '部门安排', category: '方案', initiator: '市场总监', createTime: '2024-01-17 10:00',滞留Time: '23小时', dueDate: '周五 10:00' },
      { id: 9, title: '解决客户反馈的系统问题', priority: 'high', urgency: '紧急', alarm: '是', source: '客户反馈', category: '技术', initiator: '客服专员', createTime: '2024-01-18 09:45',滞留Time: '0小时', dueDate: '今天 15:30' },
      { id: 10, title: '审核供应商合同', priority: 'medium', urgency: '一般', alarm: '否', source: '采购部门', category: '审批', initiator: '采购经理', createTime: '2024-01-17 09:15',滞留Time: '24小时', dueDate: '明天 11:00' },
      { id: 11, title: '完成安全检查报告', priority: 'medium', urgency: '一般', alarm: '否', source: '安全部门', category: '报告', initiator: '安全员', createTime: '2024-01-17 08:45',滞留Time: '25小时', dueDate: '明天 15:00' },
      { id: 12, title: '组织员工培训活动', priority: 'low', urgency: '普通', alarm: '否', source: '人事部门', category: '培训', initiator: '培训专员', createTime: '2024-01-17 08:00',滞留Time: '26小时', dueDate: '下周一 09:00' },
      { id: 13, title: '准备年度预算报告', priority: 'high', urgency: '紧急', alarm: '是', source: '财务部门', category: '报告', initiator: '财务总监', createTime: '2024-01-18 10:30',滞留Time: '0小时', dueDate: '今天 17:30' },
      { id: 14, title: '更新员工手册内容', priority: 'low', urgency: '普通', alarm: '否', source: '人事部门', category: '文档', initiator: '人事经理', createTime: '2024-01-16 16:00',滞留Time: '40小时', dueDate: '下周二 12:00' },
      { id: 15, title: '审核项目立项申请', priority: 'medium', urgency: '一般', alarm: '否', source: '研发部门', category: '审批', initiator: '研发经理', createTime: '2024-01-16 14:30',滞留Time: '42小时', dueDate: '下周一 14:00' },
      { id: 16, title: '解决系统性能优化问题', priority: 'high', urgency: '紧急', alarm: '是', source: '运维部门', category: '技术', initiator: '运维工程师', createTime: '2024-01-18 11:00',滞留Time: '0小时', dueDate: '今天 16:30' },
      { id: 17, title: '制定季度工作计划', priority: 'low', urgency: '普通', alarm: '否', source: '部门安排', category: '计划', initiator: '部门经理', createTime: '2024-01-16 13:15',滞留Time: '44小时', dueDate: '下周三 10:00' },
      { id: 18, title: '审核员工晋升申请', priority: 'medium', urgency: '一般', alarm: '否', source: '部门经理', category: '审批', initiator: '总经理', createTime: '2024-01-16 11:00',滞留Time: '47小时', dueDate: '下周二 15:00' },
      { id: 19, title: '准备客户演示材料', priority: 'high', urgency: '紧急', alarm: '是', source: '销售部门', category: '文档', initiator: '销售专员', createTime: '2024-01-18 11:30',滞留Time: '0小时', dueDate: '今天 18:00' },
      { id: 20, title: '完成库存盘点报告', priority: 'low', urgency: '普通', alarm: '否', source: '仓储部门', category: '报告', initiator: '仓库管理员', createTime: '2024-01-16 09:30',滞留Time: '49小时', dueDate: '下周四 12:00' }
    ])

    // 计算当前页的待办任务
    const currentPageTodoTasks = computed(() => {
      const startIndex = (todoCurrentPage.value - 1) * todoPageSize.value
      const endIndex = startIndex + todoPageSize.value
      return todoTasks.value.slice(startIndex, endIndex)
    })

    // 待办任务总页数
    const totalTodoPages = computed(() => {
      return Math.ceil(todoTasks.value.length / todoPageSize.value)
    })

    // 待办任务页码变化
    const handleTodoPageChange = (page) => {
      todoCurrentPage.value = page
    }

    // 已办任务分页数据
    const doneCurrentPage = ref(1)
    const donePageSize = ref(5)

    // 已办任务数据 - 模拟10条数据
    const doneTasks = ref([
      { id: 1, title: '完成季度工作报告', urgency: '紧急', alarm: '是', source: '系统自动', category: '报告', initiator: '张三', createTime: '2024-01-16 09:00', completedTime: '2024-01-18 09:30' },
      { id: 2, title: '审核财务报销申请', urgency: '一般', alarm: '否', source: '员工申请', category: '审批', initiator: '王五', createTime: '2024-01-17 16:20', completedTime: '2024-01-18 09:00' },
      { id: 3, title: '参加产品评审会议', urgency: '一般', alarm: '否', source: '会议安排', category: '会议', initiator: '产品经理', createTime: '2024-01-17 14:30', completedTime: '2024-01-17 16:00' },
      { id: 4, title: '提交报销申请', urgency: '普通', alarm: '否', source: '财务系统', category: '财务', initiator: '我', createTime: '2024-01-17 10:15', completedTime: '2024-01-17 14:20' },
      { id: 5, title: '整理客户反馈资料', urgency: '普通', alarm: '否', source: '客服部门', category: '文档', initiator: '客服经理', createTime: '2024-01-17 09:00', completedTime: '2024-01-17 10:15' },
      { id: 6, title: '制定本周工作计划', urgency: '一般', alarm: '否', source: '部门安排', category: '计划', initiator: '部门经理', createTime: '2024-01-15 16:00', completedTime: '2024-01-16 11:30' },
      { id: 7, title: '面试新员工', urgency: '一般', alarm: '否', source: '人事部门', category: '招聘', initiator: '人事经理', createTime: '2024-01-15 14:30', completedTime: '2024-01-16 10:00' },
      { id: 8, title: '解决系统bug', urgency: '紧急', alarm: '是', source: '技术部门', category: '技术', initiator: '开发经理', createTime: '2024-01-15 10:15', completedTime: '2024-01-16 09:45' },
      { id: 9, title: '编写产品需求文档', urgency: '一般', alarm: '否', source: '产品部门', category: '文档', initiator: '产品经理', createTime: '2024-01-15 09:00', completedTime: '2024-01-16 09:30' },
      { id: 10, title: '参加团队建设活动', urgency: '普通', alarm: '否', source: '人事部门', category: '活动', initiator: '人事专员', createTime: '2024-01-12 16:00', completedTime: '2024-01-15 17:00' }
    ])

    // 计算当前页的已办任务
    const currentPageDoneTasks = computed(() => {
      const startIndex = (doneCurrentPage.value - 1) * donePageSize.value
      const endIndex = startIndex + donePageSize.value
      return doneTasks.value.slice(startIndex, endIndex)
    })

    // 已办任务总页数
    const totalDonePages = computed(() => {
      return Math.ceil(doneTasks.value.length / donePageSize.value)
    })

    // 已办任务页码变化
    const handleDonePageChange = (page) => {
      doneCurrentPage.value = page
    }

    // 申请记录分页数据
    const applyCurrentPage = ref(1)
    const applyPageSize = ref(5)

    // 申请记录数据 - 模拟10条数据
    const applyRecords = ref([
      { id: 1, title: '年假申请 - 3天', status: 'pending', number: 'AP20240118001', applicant: '张三', currentHandler: '李四', currentNode: '部门经理审批', applyTime: '2024-01-18 10:20' },
      { id: 2, title: '设备采购申请', status: 'approved', number: 'AP20240117001', applicant: '张三', currentHandler: '系统', currentNode: '审批完成', applyTime: '2024-01-17 15:40' },
      { id: 3, title: '培训费用报销', status: 'rejected', number: 'AP20240115001', applicant: '张三', currentHandler: '财务经理', currentNode: '财务审核', applyTime: '2024-01-15 09:30' },
      { id: 4, title: '晋升申请', status: 'pending', number: 'AP20240118002', applicant: '张三', currentHandler: '总经理', currentNode: '总经理审批', applyTime: '2024-01-18 11:45' },
      { id: 5, title: '调岗申请', status: 'pending', number: 'AP20240117002', applicant: '张三', currentHandler: '人事经理', currentNode: '人事审批', applyTime: '2024-01-17 14:20' },
      { id: 6, title: '差旅费用报销', status: 'approved', number: 'AP20240116001', applicant: '张三', currentHandler: '系统', currentNode: '审批完成', applyTime: '2024-01-16 16:30' },
      { id: 7, title: '加班申请', status: 'pending', number: 'AP20240118003', applicant: '张三', currentHandler: '部门经理', currentNode: '部门经理审批', applyTime: '2024-01-18 13:10' },
      { id: 8, title: '请假申请 - 半天', status: 'approved', number: 'AP20240117003', applicant: '张三', currentHandler: '系统', currentNode: '审批完成', applyTime: '2024-01-17 10:05' },
      { id: 9, title: '办公用品申请', status: 'pending', number: 'AP20240116002', applicant: '张三', currentHandler: '行政主管', currentNode: '行政审批', applyTime: '2024-01-16 11:30' },
      { id: 10, title: '系统权限申请', status: 'rejected', number: 'AP20240115002', applicant: '张三', currentHandler: '系统管理员', currentNode: 'IT审核', applyTime: '2024-01-15 15:20' }
    ])

    // 计算当前页的申请记录
    const currentPageApplyRecords = computed(() => {
      const startIndex = (applyCurrentPage.value - 1) * applyPageSize.value
      const endIndex = startIndex + applyPageSize.value
      return applyRecords.value.slice(startIndex, endIndex)
    })

    // 申请记录总页数
    const totalApplyPages = computed(() => {
      return Math.ceil(applyRecords.value.length / applyPageSize.value)
    })

    // 申请记录页码变化
    const handleApplyPageChange = (page) => {
      applyCurrentPage.value = page
    }

    // 申请记录操作方法
    const handleApplyDetail = (record) => {
      ElMessage({ message: `查看申请详情：${record.title}`, type: 'info' })
    }

    // 头部按钮点击事件处理函数
    const handleTodoClick = () => {
      ElMessage({ message: '查看待办事项', type: 'info' })
      // 这里可以添加导航到待办页面的代码
    }

    const handleUnreadClick = () => {
      ElMessage({ message: '查看待阅消息', type: 'info' })
      // 这里可以添加导航到待阅页面的代码
    }

    const handleCompanyWebsiteClick = () => {
      ElMessage({ message: '访问公司官网', type: 'info' })
      // 这里可以添加打开公司官网的代码，例如 window.open('https://company.com', '_blank')
    }

    const handleHelpCenterClick = () => {
      ElMessage({ message: '打开帮助中心', type: 'info' })
      // 这里可以添加导航到帮助中心的代码
    }

    // 用户头像下拉菜单点击事件处理函数
    const handleUserMenuCommand = (command) => {
      switch (command) {
        case 'profile':
          ElMessage({ message: '打开修改个人信息页面', type: 'info' })
          // 这里可以添加导航到个人信息页面的代码
          break
        case 'password':
          ElMessage({ message: '打开修改密码页面', type: 'info' })
          // 这里可以添加导航到修改密码页面的代码
          break
        case 'logout':
          ElMessageBox.confirm('确定要退出登录吗？', '退出登录', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            ElMessage({ message: '已退出登录', type: 'success' })
            // 这里可以添加退出登录的逻辑
          }).catch(() => {
            ElMessage({ message: '已取消退出', type: 'info' })
          })
          break
        default:
          break
      }
    }

    const handleApplyEdit = (record) => {
      ElMessage({ message: `修改申请：${record.title}`, type: 'info' })
    }

    const handleApplyDelete = (record) => {
      ElMessageBox.confirm(`确定要删除申请：${record.title}吗？`, '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ElMessage({ message: `已删除申请：${record.title}`, type: 'success' })
      }).catch(() => {
        ElMessage({ message: '已取消删除', type: 'info' })
      })
    }

    const handleApplyWithdraw = (record) => {
      ElMessageBox.confirm(`确定要撤回申请：${record.title}吗？`, '确认撤回', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ElMessage({ message: `已撤回申请：${record.title}`, type: 'success' })
      }).catch(() => {
        ElMessage({ message: '已取消撤回', type: 'info' })
      })
    }

    // 待办区域Tab - 默认选中待办统计
    const taskTab = ref('statistics')

    // 公司资讯数据 - 扩展为10条数据并添加更多属性
    const newsList = ref([
      {
        id: 1,
        title: '公司2023年度总结大会顺利召开',
        date: '2023-12-28',
        tag: '重要',
        tagType: 'danger'
      },
      {
        id: 2,
        title: '我司荣获行业优秀企业称号',
        date: '2023-12-15',
        tag: '荣誉',
        tagType: 'success'
      },
      {
        id: 3,
        title: '新产品发布会取得圆满成功',
        date: '2023-11-20',
        tag: '产品',
        tagType: 'primary'
      },
      {
        id: 4,
        title: '公司与某知名企业达成战略合作',
        date: '2023-11-10',
        tag: '合作',
        tagType: 'warning'
      },
      {
        id: 5,
        title: '我司研发团队取得重大技术突破',
        date: '2023-10-25',
        tag: '技术',
        tagType: 'info'
      },
      {
        id: 6,
        title: '2024年度公司发展战略规划发布',
        date: '2024-01-15',
        tag: '战略',
        tagType: 'danger'
      },
      {
        id: 7,
        title: '员工福利体系全面升级公告',
        date: '2024-01-10',
        tag: '福利',
        tagType: 'success'
      },
      {
        id: 8,
        title: '公司总部乔迁新址通知',
        date: '2024-01-05',
        tag: '通知',
        tagType: 'warning'
      },
      {
        id: 9,
        title: '2023年度优秀员工表彰大会',
        date: '2023-12-30',
        tag: '表彰',
        tagType: 'primary'
      },
      {
        id: 10,
        title: '企业数字化转型项目正式启动',
        date: '2023-12-20',
        tag: '项目',
        tagType: 'info'
      }
    ])

    // 获取Carousel实例
    const carouselRef = ref();

    // 暂停轮播
    const pauseCarousel = () => {
      if (carouselRef.value) {
        carouselRef.value.pause();
      }
    };

    // 开始轮播
    const startCarousel = () => {
      if (carouselRef.value) {
        carouselRef.value.start();
      }
    };

    // 日程数据
    const schedules = ref([
      { time: '10:00', content: '部门周例会' },
      { time: '14:30', content: '客户视频会议' },
      { time: '16:00', content: '项目进度汇报' }
    ])

    // 添加日程弹窗相关
    const addScheduleDialogVisible = ref(false)
    const scheduleFormRef = ref()
    const scheduleForm = ref({
      time: '',
      content: ''
    })
    const scheduleRules = {
      time: [
        { required: true, message: '请输入时间段', trigger: 'blur' }
      ],
      content: [
        { required: true, message: '请输入事项内容', trigger: 'blur' },
        { min: 1, max: 100, message: '事项内容长度在 1 到 100 个字符', trigger: 'blur' }
      ]
    }

    // 显示添加日程弹窗
    const showAddScheduleDialog = () => {
      // 重置表单
      scheduleForm.value = {
        time: '',
        content: ''
      }
      if (scheduleFormRef.value) {
        scheduleFormRef.value.resetFields()
      }
      addScheduleDialogVisible.value = true
    }

    // 添加日程
    const addSchedule = () => {
      if (scheduleFormRef.value) {
        scheduleFormRef.value.validate((valid) => {
          if (valid) {
            // 添加新的日程项
            schedules.value.push({
              time: scheduleForm.value.time,
              content: scheduleForm.value.content
            })
            // 关闭弹窗
            addScheduleDialogVisible.value = false
            // 显示成功消息
            ElMessage.success('日程添加成功')
          }
        })
      }
    }

    // 搜索相关
    const searchKeyword = ref('')

    // 搜索过滤后的应用
    const filteredApplications = computed(() => {
      if (!searchKeyword.value) {
        return []
      }
      return [] // 移除原有的应用数据
    })

    // 获取用户信息
    const getUserInfo = async () => {
      try {
        const userStore = useUserStore()
        const userId = userStore.getUser.id || 1 // 默认使用id=1作为备选

        // 使用UserApi获取用户信息
        const result = await UserApi.getUser(userId)

        if (!result) {
          ElMessage.error('获得个人信息失败，返回数据为空')
          return
        }

        // 更新用户名
        if (result.nickname) {
          username.value = result.nickname
        }

        // 更新头像
        if (result.avatar) {
          avatar.value = result.avatar
        }

        // 从返回值中获取email和mobile字段
        if (result.email) {
          email.value = result.email
        }

        if (result.mobile) {
          phone.value = result.mobile
        }

        // 从loginIp字段获取登录IP
        if (result.loginIp) {
          loginIp.value = result.loginIp
        }

        //缓存用户信息
        localStorage.setItem('user', JSON.stringify(result));
      } catch (error) {
        console.error('获取用户信息失败:', error)
        // 可以根据需要添加错误提示
      }
    }

    // 使用Vue Router
    const router = useRouter()

    // 菜单点击处理 - 根据菜单项的url参数进行路由跳转
    const handleMenuClick = (menu) => {
      // 显示加载中提示
      const loading = ElLoading.service({
        lock: true,
        text: '正在进入系统中，请稍后',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      // 使用Vue Router根据菜单项的url参数进行跳转
      try {
        if (menu.url) {
          router.push(menu.url)
        } else {
          // 如果没有url，默认跳转到index页面
          router.push('/index')
        }
      } finally {
        // 延迟一小段时间后关闭加载，以确保用户能看到提示信息
        setTimeout(() => {
          loading.close()
        }, 300)
      }
    }

    // 处理待办任务
    const handleProcessTask = (task) => {
      ElMessage({ message: `处理任务：${task.title}`, type: 'info' })
      // 实际项目中可以添加具体的任务处理逻辑
    }

    // Tab切换处理
    const handleTabClick = (tab) => {
      activeTab.value = tab.name
    }

    // 显示更多
    const showMore = (type) => {
      ElMessage({ message: `查看更多${getTypeName(type)}`, type: 'info' })
    }

    // 获取类型名称
    const getTypeName = (type) => {
      const typeMap = {
        announcement: '通知公告',
        rules: '管理制度',
        project: '项目管理',
        training: '培训社区',
        guide: '员工指引'
      }
      return typeMap[type] || type
    }

    // 搜索处理
    const handleSearch = () => {
      // 搜索逻辑
    }

    // 设置当前日期
    const setCurrentDate = () => {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const day = String(now.getDate()).padStart(2, '0')
      currentDate.value = `${year}-${month}-${day}`
    }

    // 滚动公告
    const startNewsScroll = () => {
      const scrollElement = document.querySelector('.news-scroll')
      if (scrollElement) {
        let top = 0
        setInterval(() => {
          top -= 20
          if (top < -scrollElement.scrollHeight / 2) {
            top = 0
          }
          scrollElement.style.transform = `translateY(${top}px)`
        }, 3000)
      }
    }

    // 页面加载时获取用户信息
    onMounted(() => {
      getUserInfo()
      setCurrentDate()
      setTimeout(() => {
        startNewsScroll()
      }, 1000)
    })

    return {
      username,
      avatar,
      employeeId,
      email,
      phone,
      loginIp,
      currentDate,
      activeIndex,
      menus,
      currentPageMenus,
      currentPage,
      totalPages,
      changePage,
      activeTab,
      announcements,
      rules,
      projects,
      trainings,
      guides,
      todoCount,
      doneCount,
      applyCount,
      todoTasks,
      doneTasks,
      applyRecords,
      taskTab,
      newsList,
      schedules,
      cultureList,
      searchKeyword,
      filteredApplications,
      handleMenuClick,
      handleTabClick,
      showMore,
      handleSearch,
      Plus,
      Right,
      // 添加待办任务表格和分页需要的变量和方法
      currentPageTodoTasks,
      todoCurrentPage,
      todoPageSize,
      totalTodoPages,
      handleTodoPageChange,
      // 添加已办任务表格和分页需要的变量和方法
      currentPageDoneTasks,
      doneCurrentPage,
      donePageSize,
      totalDonePages,
      handleDonePageChange,
      // 添加申请记录表格和分页需要的变量和方法
      currentPageApplyRecords,
      applyCurrentPage,
      applyPageSize,
      totalApplyPages,
      handleApplyPageChange,
      handleApplyDetail,
      handleApplyEdit,
      handleApplyDelete,
      handleApplyWithdraw,
      handleProcessTask,
      // 添加新的统计数据
      oaSystemCount,
      reimbursementCount,
      leaveCount,
      promotionCount,
      contractApprovalCount,
      statisticsList,

      // 头部按钮相关数据
      todoCountHeader,
      unreadCountHeader,

      // 头部按钮点击事件处理函数
      handleTodoClick,
      handleUnreadClick,
      handleCompanyWebsiteClick,
      handleHelpCenterClick
    }
  }
}
</script>

<style scoped>
/* 背景样式 */
.app-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background-color: #f0f2f5;
}

.bg-decoration {
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 40%;
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.05), rgba(64, 158, 255, 0));
  z-index: 0;
}

.bg-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(240, 242, 245, 0.5));
  z-index: 0;
}

/* 顶部导航栏样式 - 按比例缩小高度 */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  height: 56px; /* 从70px缩小到56px，缩小了20% */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 2px 12px rgba(102, 126, 234, 0.3);
  z-index: 10;
  color: white;
}

.header-left {
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  margin-right: 40px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.logo:hover {
  transform: translateY(-2px);
}

.logo-icon {
  font-size: 22px; /* 从28px缩小到22px */
  margin-right: 10px;
}

.logo-text {
  font-size: 16px; /* 从20px缩小到16px */
  font-weight: 700;
  color: white !important;
  letter-spacing: 0.5px;
}

.main-goals {
  display: flex;
  flex-direction: column;
}

.goals-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.goals-list li {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* 头部按钮容器样式 */
.header-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 头部按钮样式 */
.header-button {
  position: relative;
  padding: 6px 12px;
  font-size: 14px;
  color: white; /* 改为白色 */
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.header-button:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.2); /* 改为半透明白色背景 */
}

/* 角标数量样式 - 长方形样式 */
.badge-count {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background-color: #f56c6c;
  border-radius: 4px;
  text-align: center;
  line-height: 16px;
  min-width: 20px;
}

/* 待办按钮特定样式 */
.todo-button .badge-count {
  background-color: #f56c6c;
}

/* 待阅按钮特定样式 */
.unread-button .badge-count {
  background-color: #e6a23c;
}

.search-input {
  width: 240px;
  border-radius: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 28px; /* 从32px缩小到28px */
  height: 28px;
}

.username {
  font-size: 14px;
  color: white;
}

/* 主体内容区样式 */
.main-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(102, 126, 234, 0.5) transparent;
}

.main-content::-webkit-scrollbar {
  width: 6px;
}

.main-content::-webkit-scrollbar-track {
  background: transparent;
}

.main-content::-webkit-scrollbar-thumb {
  background-color: rgba(102, 126, 234, 0.5);
  border-radius: 3px;
}

/* 全新轮播图样式 */
.new-carousel-container {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease;
}

.new-carousel-container:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.carousel-cards {
  display: flex;
  height: 160px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(102, 126, 234, 0.5) transparent;
}

.carousel-cards::-webkit-scrollbar {
  height: 6px;
}

.carousel-cards::-webkit-scrollbar-track {
  background: transparent;
}

.carousel-cards::-webkit-scrollbar-thumb {
  background-color: rgba(102, 126, 234, 0.5);
  border-radius: 3px;
}

.carousel-card {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.carousel-card:last-child {
  border-right: none;
}

.carousel-card:hover {
  transform: translateY(-5px);
}

.card-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  transition: all 0.3s ease;
}

.carousel-card:hover .card-gradient {
  opacity: 0.9;
}

.card-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: white;
  padding: 20px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
  letter-spacing: 0.5px;
}

.card-desc {
  font-size: 14px;
  margin: 0;
  opacity: 0.9;
}

/* 任务管理中心样式 - 等比例缩小为原来的一半 */
.task-center-card {
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f2f5;
  transition: all 0.3s ease;
}

.task-center-card:hover {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

.task-tabs {
  flex: 1;
  margin-left: 10px;
}

.compact-tabs {
  width: 100%;
}

.compact-tabs .el-tabs__header {
  margin: 0;
}

.compact-tabs .el-tabs__nav {
  height: 16px;
}

.compact-tabs .el-tabs__item {
  height: 16px;
  line-height: 16px;
  font-size: 7px;
  padding: 0 10px;
}

.task-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9px;
  height: 9px;
  padding: 0 3px;
  font-size: 6px;
  font-weight: 500;
  color: #fff;
  background-color: #f56c6c;
  border-radius: 4.5px;
  margin-left: 3px;
  line-height: 1;
}

.badge-high {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

.task-list-container {
  padding: 0;
  max-height: 400px;
  overflow-y: auto;
}

.task-list {
  display: flex;
  flex-direction: column;
}

.task-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f0f2f5;
  transition: all 0.2s ease;
}

.task-item:hover {
  background-color: #f5f7fa;
}

.task-item:last-child {
  border-bottom: none;
}

.task-item.done .task-title {
  color: #909399;
  text-decoration: line-through;
}

.task-item.priority-high {
  border-left: 3px solid #f56c6c;
}

.task-item.priority-medium {
  border-left: 3px solid #e6a23c;
}

.task-checkbox {
  margin-right: 12px;
}

.task-content {
  flex: 1;
  min-width: 0;
}

.task-content.full-width {
  margin-right: 12px;
}

.task-title {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.task-due,
.task-completed,
.task-apply-time {
  font-size: 12px;
  color: #909399;
}

.task-priority,
.task-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.priority-high {
  background-color: #fef0f0;
  color: #f56c6c;
}

.priority-medium {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.priority-low {
  background-color: #f0f9ff;
  color: #409eff;
}

.status-pending {
  background-color: #f0f9ff;
  color: #409eff;
}

.status-approved {
  background-color: #f0f9ff;
  color: #67c23a;
}

.status-rejected {
  background-color: #fef0f0;
  color: #f56c6c;
}

.task-actions {
  display: flex;
  align-items: center;
}

.task-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: #fafbfc;
  border-top: 1px solid #f0f2f5;
}

.add-task-btn {
  display: flex;
  align-items: center;
  gap: 4px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #909399;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-text {
  font-size: 14px;
}

/* 主要内容网格布局 */
.content-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 20px;
  flex: 1;
}

.grid-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  padding-right: 8px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(102, 126, 234, 0.5) transparent;
}

.grid-column::-webkit-scrollbar {
  width: 6px;
}

.grid-column::-webkit-scrollbar-track {
  background: transparent;
}

.grid-column::-webkit-scrollbar-thumb {
  background-color: rgba(102, 126, 234, 0.5);
  border-radius: 3px;
}

.left-column {
  flex: 3;
}

.right-column {
  flex: 2;
}

/* 区块卡片样式 - 等比例缩小为原来的一半 */
.section-card {
  background-color: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.section-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  background-color: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}

.section-title {
  font-size: 8px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

/* 个人信息标题特定样式 - 更大更清晰 */
.personal-info-title {
  font-size: 16px;
  font-weight: 700;
}

/* 公司资讯标题特定样式 - 更大更清晰 */
.news-title {
  font-size: 16px;
  font-weight: 700;
}

/* 今日日程标题特定样式 - 更大更清晰 */
.schedule-title {
  font-size: 16px;
  font-weight: 700;
}

/* 企业文化标题特定样式 - 更大更清晰 */
.culture-title-header {
  font-size: 16px;
  font-weight: 700;
}

/* 功能导航样式 - 等比例缩小为原来的一半 */
.feature-nav-container {
  padding: 6px;
}

/* 紧凑菜单网格 */
.compact-menu-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}

/* 紧凑菜单项 */
.compact-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 4px 2px;
  min-height: 40px;
}

.compact-menu-item:hover {
  background-color: #f5f7fa;
  border-radius: 2px;
}

/* 图标样式 */
.compact-menu-icon {
  font-size: 16px;
  margin-bottom: 2px;
  color: var(--menu-color, #409EFF);
  transition: transform 0.2s ease;
}

.compact-menu-item:hover .compact-menu-icon {
  transform: scale(1.1);
}

/* 名称样式 */
.compact-menu-name {
  font-size: 12px;
  color: #303133;
  text-align: center;
  line-height: 1.3;
}

/* 分页控件样式 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
}

.page-btn {
  padding: 4px 12px;
  border: 1px solid #dcdfe6;
  background-color: #ffffff;
  color: #606266;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
}

.page-btn:hover:not(:disabled) {
  border-color: #409eff;
  color: #409eff;
}

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

.page-info {
  font-size: 12px;
  color: #606266;
}

/* Tab容器样式 */
.tab-container {
  width: 100%;
}

.info-tabs {
  width: 100%;
}

.info-tabs .el-tabs__header {
  margin: 0;
}

/* 列表内容样式 - 保留原有高度但调整标题大小 */
.list-content {
  padding: 8px;
  overflow-y: auto;
  max-height: 150px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(102, 126, 234, 0.3) transparent;
}

.list-content::-webkit-scrollbar {
  width: 2px;
}

.list-content::-webkit-scrollbar-track {
  background: transparent;
}

.list-content::-webkit-scrollbar-thumb {
  background-color: rgba(102, 126, 234, 0.3);
  border-radius: 1px;
}

.tab-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px;
  background-color: #f5f7fa;
  border-radius: 3px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.list-item:hover {
  background-color: #e8edf3;
}

.item-left {
  display: flex;
  align-items: center;
  flex: 1;
  overflow: hidden;
}

.item-dot {
  color: #409eff;
  margin-right: 4px;
  font-size: 7px;
}

.item-title {
  font-size: 12px;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-date {
  font-size: 12px;
  color: #909399;
  margin-left: 6px;
  white-space: nowrap;
}

/* 公司资讯样式 - 跑马灯效果 */
.enhanced-news-container {
  width: 100%;
  padding: 12px;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
}

.enhanced-news-item {
  display: flex;
  align-items: center;
  padding: 0 8px;
  height: 40px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.3s;
}

.enhanced-news-item:hover {
  background-color: #f5f7fa;
}

.enhanced-news-item .el-tag {
  margin-right: 12px;
  flex-shrink: 0;
}

.enhanced-news-title {
  flex: 1;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 15px;
  color: #303133;
  font-weight: 500;
}

.enhanced-news-date {
  font-size: 12px;
  color: #909399;
  flex-shrink: 0;
}

/* 个人信息样式 - 左右布局设计 - 调整字体大小使其清晰可见 */
.personal-info-left-right {
  padding: 8px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 400px;
}

/* 左侧头像区域 */
.avatar-section {
  flex-shrink: 0;
}

.personal-avatar-left {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.9);
  font-size: 20px;
  transition: all 0.3s ease;
}

.personal-avatar-left:hover {
  transform: translateY(-1px);
  box-shadow: 0 1.5px 4px rgba(102, 126, 234, 0.4);
}

/* 右侧信息区域 */
.info-section {
  flex: 1;
  min-width: 0;
  max-width: 300px;
}

.user-name-left {
  font-size: 18px;
  font-weight: 700;
  color: #303133;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.info-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.info-item-left {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
  transition: all 0.2s ease;
  border-left: 2px solid #667eea;
}

.info-item-left:hover {
  background-color: #e9ecef;
  transform: translateX(0.5px);
}

.info-label-left {
  font-size: 14px;
  color: #606266;
  font-weight: 600;
  width: 60px;
  flex-shrink: 0;
  text-align: left;
  margin-right: 10px;
}

.info-value-left {
  font-size: 14px;
  color: #303133;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

/* 日程样式 - 等比例缩小为原来的一半 */
.schedule {  padding: 12px;}

.schedule-date {
  font-size: 12px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid #f0f0f0;
}

.schedule-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 0.5px solid #f5f7fa;
}

.schedule-item:last-child {
  border-bottom: none;
}

.schedule-time {
  font-size: 10px;
  color: #409eff;
  font-weight: 500;
  width: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.schedule-content {
  font-size: 12px;
  color: #303133;
  flex: 1;
  padding: 4px 0;
}

.schedule-empty {
  text-align: center;
  padding: 30px 0;
  color: #909399;
  font-size: 12px;
}

/* 头部区域样式覆盖 */
:deep(.layout-header) {
  background-color: #C7DBF4 !important;
  height: 40px !important; /* 假设原始高度是80px，缩减为一半 */
  min-height: 40px !important;
  padding: 0 20px !important;
}

:deep(.layout-header > *) {
  height: 40px !important;
  line-height: 40px !important;
}

:deep(.logo-box) {
  height: 40px !important;
  line-height: 40px !important;
}

:deep(.logo-title) {
  font-size: 16px !important;
}

:deep(.logo) {
  height: 28px !important;
  margin-right: 8px !important;
}

/* 功能区与头部距离调整 */
:deep(.layout-container) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

:deep(.layout-content) {
  margin-top: 0 !important;
  padding-top: 2px !important;
}

:deep(.app-main) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

:deep(.content-wrapper) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 页面内头部样式覆盖 */
.header-container {
  background-color: #C7DBF4 !important;
  height: 40px !important; /* 设置为原始高度的一半 */
  min-height: 40px !important;
  padding: 0 20px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.header-left,
.header-right {
  height: 40px !important;
  line-height: 40px !important;
}

.logo {
  margin-right: 20px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
}

.logo-icon {
  font-size: 18px !important;
  margin-right: 6px !important;
}

.logo-text {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #303133 !important;
}

.user-info {
  display: flex !important;
  align-items: center !important;
  height: 40px !important;
}

.user-avatar {
  width: 24px !important;
  height: 24px !important;
  margin-right: 6px !important;
}

.username {
  font-size: 12px !important;
  color: #303133 !important;
}

/* 减小功能区与头部的距离 */
.main-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 20px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  gap: 16px !important;
}

/* 企业文化样式 - 列表布局 */
.culture-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.culture-card {
  display: flex;
  align-items: center;
  padding: 8px;
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.culture-card:hover {
  border-color: #409EFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.culture-image-wrapper {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.culture-image {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.culture-content {
  flex: 1;
  min-width: 0;
}

.culture-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
  line-height: 1.2;
}

.culture-description {
  font-size: 12px;
  color: #606266;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 36px;
}

/* 待办统计样式 */
.statistics-content {
  padding: 20px;
}

/* 左滑容器样式 */
.statistics-scroll-container {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  margin-bottom: 16px;
}

/* 隐藏滚动条但保留功能 */
.statistics-scroll-container::-webkit-scrollbar {
  height: 4px;
}

.statistics-scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.statistics-scroll-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 2px;
}

.statistics-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 统计项包装器 */
.statistics-scroll-wrapper {
  display: flex;
  gap: 20px;
  padding-bottom: 8px;
}

/* 统计项样式 */
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding: 16px 12px;
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-2px);
}

.stat-icon {
  font-size: 36px;
  margin-bottom: 8px;
}

.stat-info {
  text-align: center;
}

.stat-title {
  font-size: 13px;
  color: #606266;
  margin-bottom: 4px;
  white-space: nowrap;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--stat-color, #303133);
}

.priority-stats {
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.priority-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
}

.priority-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.priority-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: 6px;
}

.priority-item.priority-high {
  background-color: #fef0f0;
}

.priority-item.priority-medium {
  background-color: #fdf6ec;
}

.priority-item.priority-low {
  background-color: #f0f9ff;
}

.priority-label {
  font-size: 14px;
  color: #303133;
}

.priority-count {
  font-size: 16px;
  font-weight: 600;
}

.priority-item.priority-high .priority-count {
  color: #f56c6c;
}

.priority-item.priority-medium .priority-count {
  color: #e6a23c;
}

.priority-item.priority-low .priority-count {
  color: #409eff;
}

/* 待办任务表格样式 */
.todo-task-table {
  font-size: 14px;
}

/* 缓急状态样式 */
.urgency-high {
  color: #f56c6c;
  font-weight: 500;
}

.urgency-medium {
  color: #e6a23c;
  font-weight: 500;
}

.urgency-low {
  color: #409eff;
  font-weight: 500;
}

/* 告警样式 */
.alarm-icon {
  color: #f56c6c;
  font-weight: bold;
}

/* 任务标题单元格样式 */
.task-title-cell {
  white-space: normal;
  word-break: break-all;
  line-height: 1.4;
}

/* 分页控件样式 */
.task-pagination {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .content-grid {
    grid-template-columns: 1fr;
  }

  .menu-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .overview-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .main-content {
    padding: 20px;
  }

  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .overview-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .main-goals {
    display: none;
  }

  .carousel-cards {
    flex-direction: column;
    height: auto;
  }

  .carousel-card {
    height: 100px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  .carousel-card:last-child {
    border-bottom: none;
  }
}

@media (max-width: 768px) {
  .header-container {
    padding: 0 20px;
  }

  .logo {
    margin-right: 20px;
  }

  .header-right {
    gap: 12px;
  }

  .search-input {
    width: 180px;
  }

  .username {
    display: none;
  }

  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .overview-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .main-content {
    padding: 16px;
  }

  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px;
  }

  .overview-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
</style>
