<template>
  <div class="dashboard-container">
    <!-- Header -->
    <header class="header">
      <div class="header-left">
        <button class="menu-toggle" @click="toggleSidebar" v-if="isMobile">
          <Menu size="20" />
        </button>
        <div class="logo">
          <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xMiAyTDIgN0wyIDEzTDEyIDE4TDIyIDEzTDIyIDdMMTIgMloiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFlODhlNSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICAgIDxwYXRoIGQ9Ik0yIDEzTDEyIDhMMjIgMTMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFlODhlNSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICAgIDxwYXRoIGQ9Ik0xMiA4TDEyIDE4IiBmaWxsPSJub25lIiBzdHJva2U9IiMxZTg4ZTUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==" alt="Logo" width="24" height="24" />
          <span class="product-name">ProductName</span>
        </div>
      </div>
      <div class="search-container">
        <Search size="16" color="#999" />
        <input type="text" placeholder="输入内容查询" class="search-input" />
      </div>
      <div class="header-right">
        <button class="icon-button">
          <MessageCircle size="20" />
        </button>
        <button class="icon-button notification">
          <Bell size="20" />
          <span class="notification-badge"></span>
        </button>
        <button class="icon-button">
          <Settings size="20" />
        </button>
        <div class="avatar">
          <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3Qgd2lkdGg9IjM2IiBoZWlnaHQ9IjM2IiBmaWxsPSIjZTJlOGYwIiAvPgogIDxjaXJjbGUgY3g9IjE4IiBjeT0iMTQiIHI9IjYiIGZpbGw9IiM5NGEzYjgiIC8+CiAgPHBhdGggZD0iTTMwLDM2IEwzMCwzMCBDMzAsMjQuNDc3MTUyNSAyNS41MjI4NDc1LDIwIDIwLDIwIEwxNiwyMCBDMTAuNDc3MTUyNSwyMCA2LDI0LjQ3NzE1MjUgNiwzMCBMNiwzNiBaIiBmaWxsPSIjOTRhM2I4IiAvPgo8L3N2Zz4=" alt="User avatar" width="36" height="36" />
        </div>
      </div>
    </header>

    <div class="main-container">
      <!-- Sidebar -->
      <aside class="sidebar" :class="{ 'sidebar-open': sidebarOpen }">
        <div class="sidebar-content">
          <div class="sidebar-section">
            <div class="sidebar-title">菜单类别标题</div>
            <ul class="sidebar-menu">
              <li class="sidebar-menu-item active">
                <LayoutGrid size="18" />
                <span>首页</span>
                <ChevronDown size="16" class="expand-icon" />
              </li>
              <li class="sidebar-menu-item">
                <CircleDot size="18" />
                <span>系统模块1</span>
                <ChevronDown size="16" class="expand-icon" />
              </li>
              <li class="sidebar-menu-item">
                <CircleDot size="18" />
                <span>系统模块1</span>
                <ChevronDown size="16" class="expand-icon" />
              </li>
              <li class="sidebar-menu-item">
                <Mail size="18" />
                <span>系统模块1</span>
                <ChevronDown size="16" class="expand-icon" />
              </li>
              <li class="sidebar-menu-item">
                <BarChart2 size="18" />
                <span>系统模块1</span>
                <ChevronUp size="16" class="expand-icon" />
              </li>
              <li class="sidebar-menu-subitem">系统模块1</li>
              <li class="sidebar-menu-subitem">系统模块1</li>
              <li class="sidebar-menu-subitem">系统模块1</li>
              <li class="sidebar-menu-item">
                <FileText size="18" />
                <span>系统模块1</span>
                <ChevronDown size="16" class="expand-icon" />
              </li>
            </ul>
          </div>
          <div class="sidebar-section">
            <div class="sidebar-title">菜单类别标题</div>
            <ul class="sidebar-menu">
              <li class="sidebar-menu-item">
                <Home size="18" />
                <span>系统模块1</span>
                <ChevronDown size="16" class="expand-icon" />
              </li>
            </ul>
          </div>
        </div>
      </aside>

      <!-- Main Content -->
      <main class="main-content">
        <!-- Breadcrumb -->
        <div class="breadcrumb">
          <FileText size="16" />
          <span>首页</span>
          <span>/</span>
          <span>xxx工作台</span>
        </div>

        <!-- Contract Stats Cards -->
        <div class="stats-cards">
          <div class="stat-card">
            <div class="stat-card-header">
              <div class="stat-icon blue">
                <ClipboardList size="24" color="#1e88e5" />
              </div>
              <div class="stat-title">合同审核</div>
              <MoreHorizontal size="20" class="more-icon" />
            </div>
            <div class="stat-numbers">
              <span class="stat-main">21</span>
              <span class="stat-total">/35</span>
            </div>
          </div>

          <div class="stat-card">
            <div class="stat-card-header">
              <div class="stat-icon orange">
                <ClipboardCheck size="24" color="#ff9800" />
              </div>
              <div class="stat-title">合同签署</div>
              <MoreHorizontal size="20" class="more-icon" />
            </div>
            <div class="stat-numbers">
              <span class="stat-main">28</span>
              <span class="stat-total">/40</span>
            </div>
          </div>

          <div class="stat-card">
            <div class="stat-card-header">
              <div class="stat-icon green">
                <ClipboardEdit size="24" color="#4caf50" />
              </div>
              <div class="stat-title">合同登记</div>
              <MoreHorizontal size="20" class="more-icon" />
            </div>
            <div class="stat-numbers">
              <span class="stat-main">40</span>
              <span class="stat-total">/65</span>
            </div>
          </div>

          <div class="stat-card">
            <div class="stat-card-header">
              <div class="stat-icon red">
                <Clipboard size="24" color="#f44336" />
              </div>
              <div class="stat-title">合同履约</div>
              <MoreHorizontal size="20" class="more-icon" />
            </div>
            <div class="stat-numbers">
              <span class="stat-main">12</span>
              <span class="stat-total">/15</span>
            </div>
          </div>
        </div>

        <!-- Two Column Layout -->
        <div class="two-column-layout">
          <!-- Special Items Section -->
          <div class="content-card">
            <div class="card-header">
              <h3>特办事项</h3>
            </div>
            <div class="tabs">
              <button class="tab-button active">全部</button>
              <button class="tab-button">今天</button>
              <button class="tab-button">本周</button>
              <button class="tab-button">本月</button>
            </div>
            <div class="task-list">
              <div class="task-item">
                <input type="checkbox" checked />
                <span class="task-text">联系xxx客户，确认具体合同事宜</span>
              </div>
              <div class="task-item">
                <input type="checkbox" checked />
                <span class="task-text">完成合同模板创建并上传系统</span>
              </div>
              <div class="task-item">
                <input type="checkbox" />
                <span class="task-text">审核xxxxxxx合同</span>
              </div>
              <div class="task-item">
                <input type="checkbox" checked />
                <span class="task-text">完善xxxx合同，邮件发送xxxxx客户</span>
              </div>
              <div class="task-item">
                <input type="checkbox" />
                <span class="task-text">完成xxx银行账户注册，上传账户信息</span>
              </div>
              <div class="task-item">
                <input type="checkbox" />
                <span class="task-text">完成xxx银行账户注册，上传账户信息</span>
              </div>
            </div>
          </div>

          <!-- Project Progress Section -->
          <div class="content-card">
            <div class="card-header">
              <h3>项目进程</h3>
            </div>
            <table class="project-table">
              <thead>
                <tr>
                  <th>项目名称</th>
                  <th>负责人</th>
                  <th>截止日期</th>
                  <th>当前状态</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>xxxxx公司税金管理</td>
                  <td>任小东</td>
                  <td>2023/07/25</td>
                  <td><span class="status overdue">已延期</span></td>
                </tr>
                <tr>
                  <td>xxxxxxxxxxxxxxxxxxxxxxx公司人事xxxx合同管理</td>
                  <td>胡晓东</td>
                  <td>2024/01/09</td>
                  <td><span class="status in-progress">进行中</span></td>
                </tr>
                <tr>
                  <td>xxxxx公司人员xxxx合同签订</td>
                  <td>李兵</td>
                  <td>2025/01/08</td>
                  <td><span class="status in-progress">进行中</span></td>
                </tr>
                <tr>
                  <td>xxxxxxxxxxxx公司人员资源管理</td>
                  <td>王天一</td>
                  <td>2023/09/03</td>
                  <td><span class="status completed">已完成</span></td>
                </tr>
                <tr>
                  <td>xxxxxxxxxxxx公司人员资源管理</td>
                  <td>李琳琳</td>
                  <td>2023/10/23</td>
                  <td><span class="status pending">审核中</span></td>
                </tr>
                <tr>
                  <td>xxxxx公司人员资源管理</td>
                  <td>刘琳琳</td>
                  <td>2023/12/07</td>
                  <td><span class="status in-progress">进行中</span></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <!-- Bottom Section -->
        <div class="two-column-layout">
          <!-- Quick Functions -->
          <div class="content-card">
            <div class="card-header">
              <h3>快捷功能</h3>
              <MoreHorizontal size="20" class="more-icon" />
            </div>
            <div class="quick-functions">
              <div class="function-item">人力资源主合同 (标准版)</div>
              <div class="function-item">人事代理服务协议 (标准版)</div>
              <div class="function-item">人事代理服务协议</div>
              <div class="function-item">人事代理服务协议</div>
              <div class="function-item">人事代理服务协议 (企业版)</div>
              <div class="function-item">人事代理服务协议 (定制版)</div>
            </div>
          </div>

          <!-- Contract Statistics -->
          <div class="content-card">
            <div class="card-header">
              <h3>合同类型统计</h3>
            </div>
            <div class="chart-legend">
              <div class="legend-item">
                <span class="legend-color blue"></span>
                <span>A合同</span>
              </div>
              <div class="legend-item">
                <span class="legend-color green"></span>
                <span>B合同</span>
              </div>
            </div>
            <div class="chart-container">
              <div class="chart">
                <!-- Simplified chart representation -->
                <div class="chart-bars">
                  <div v-for="month in 12" :key="month" class="chart-month">
                    <div class="chart-bar blue" :style="{ height: getRandomHeight() + 'px' }"></div>
                    <div class="chart-bar green" :style="{ height: getRandomHeight() + 'px' }"></div>
                    <div class="month-label">{{ month }}月</div>
                  </div>
                </div>
                <div class="chart-y-axis">
                  <div>100</div>
                  <div>80</div>
                  <div>60</div>
                  <div>40</div>
                  <div>20</div>
                  <div>0</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { 
  Menu, Search, MessageCircle, Bell, Settings, 
  FileText, LayoutGrid, CircleDot, Mail, BarChart2, Home,
  ClipboardList, ClipboardCheck, ClipboardEdit, Clipboard,
  MoreHorizontal, ChevronDown, ChevronUp
} from 'lucide-vue-next';

// Responsive sidebar state
const sidebarOpen = ref(false);
const isMobile = ref(false);

// Toggle sidebar
const toggleSidebar = () => {
  sidebarOpen.value = !sidebarOpen.value;
};

// Check if mobile on resize
const checkIfMobile = () => {
  isMobile.value = window.innerWidth < 475;
  if (!isMobile.value) {
    sidebarOpen.value = true;
  } else {
    sidebarOpen.value = false;
  }
};

// Generate random chart heights
const getRandomHeight = () => {
  return Math.floor(Math.random() * 60) + 10;
};

// Lifecycle hooks
onMounted(() => {
  checkIfMobile();
  window.addEventListener('resize', checkIfMobile);
});

onUnmounted(() => {
  window.removeEventListener('resize', checkIfMobile);
});
</script>

<style scoped>
/* Base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.dashboard-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* Header styles */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

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

.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-name {
  font-weight: 600;
  font-size: 16px;
}

.search-container {
  display: flex;
  align-items: center;
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 0 10px;
  flex: 1;
  max-width: 400px;
  margin: 0 20px;
}

.search-input {
  border: none;
  background: transparent;
  padding: 8px;
  width: 100%;
  font-size: 14px;
  outline: none;
}

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

.icon-button {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #666;
}

.notification {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background-color: #f44336;
  border-radius: 50%;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Main container */
.main-container {
  display: flex;
  flex: 1;
}

/* Sidebar styles */
.sidebar {
  width: 220px;
  background-color: #fff;
  border-right: 1px solid #e0e0e0;
  transition: transform 0.3s ease;
  z-index: 90;
}

.sidebar-content {
  height: calc(100vh - 60px);
  overflow-y: auto;
  position: sticky;
  top: 60px;
}

.sidebar-section {
  padding: 15px 0;
}

.sidebar-title {
  padding: 0 15px 10px;
  color: #999;
  font-size: 12px;
}

.sidebar-menu {
  list-style: none;
}

.sidebar-menu-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  color: #333;
  cursor: pointer;
  position: relative;
}

.sidebar-menu-item span {
  margin-left: 10px;
  flex: 1;
}

.sidebar-menu-item.active {
  background-color: #e6f0ff;
  color: #1976d2;
}

.expand-icon {
  color: #999;
}

.sidebar-menu-subitem {
  padding: 8px 15px 8px 42px;
  color: #666;
  font-size: 14px;
  cursor: pointer;
}

/* Sidebar overlay for mobile */
/* .sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 80;
} */

/* Main content styles */
.main-content {
  flex: 1;
  padding: 20px;
  overflow-x: hidden;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: #666;
  font-size: 14px;
}

/* Stats cards */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stat-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.stat-icon.blue {
  background-color: rgba(30, 136, 229, 0.1);
}

.stat-icon.orange {
  background-color: rgba(255, 152, 0, 0.1);
}

.stat-icon.green {
  background-color: rgba(76, 175, 80, 0.1);
}

.stat-icon.red {
  background-color: rgba(244, 67, 54, 0.1);
}

.stat-title {
  flex: 1;
  font-size: 16px;
  color: #333;
}

.more-icon {
  color: #999;
  cursor: pointer;
}

.stat-numbers {
  font-size: 24px;
  font-weight: 600;
}

.stat-main {
  color: #333;
}

.stat-total {
  color: #999;
  font-size: 18px;
}

/* Two column layout */
.two-column-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.content-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.card-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

/* Tabs */
.tabs {
  display: flex;
  border-bottom: 1px solid #eee;
}

.tab-button {
  padding: 10px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #666;
}

.tab-button.active {
  color: #1976d2;
  border-bottom: 2px solid #1976d2;
}

/* Task list */
.task-list {
  padding: 10px 20px;
}

.task-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}

.task-item input[type="checkbox"] {
  margin-right: 10px;
}

.task-text {
  font-size: 14px;
  color: #333;
}

/* Project table */
.project-table {
  width: 100%;
  border-collapse: collapse;
}

.project-table th {
  text-align: left;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  border-bottom: 1px solid #eee;
}

.project-table td {
  padding: 12px 20px;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #f5f5f5;
}

.status {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status.overdue {
  background-color: #ffebee;
  color: #f44336;
}

.status.in-progress {
  background-color: #e3f2fd;
  color: #1976d2;
}

.status.completed {
  background-color: #e8f5e9;
  color: #4caf50;
}

.status.pending {
  background-color: #fff8e1;
  color: #ff9800;
}

/* Quick functions */
.quick-functions {
  padding: 10px 20px;
}

.function-item {
  padding: 10px 0;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #f5f5f5;
}

/* Chart */
.chart-legend {
  display: flex;
  padding: 10px 20px;
  gap: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend-color.blue {
  background-color: #1976d2;
}

.legend-color.green {
  background-color: #4caf50;
}

.chart-container {
  padding: 0 20px 20px;
  height: 250px;
  position: relative;
}

.chart {
  height: 100%;
  display: flex;
}

.chart-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 10px;
  color: #999;
  font-size: 12px;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  flex: 1;
  height: 200px;
  gap: 15px;
}

.chart-month {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.chart-bar {
  width: 10px;
  margin: 0 2px;
  border-radius: 2px 2px 0 0;
}

.chart-bar.blue {
  background-color: #1976d2;
}

.chart-bar.green {
  background-color: #4caf50;
}

.month-label {
  margin-top: 5px;
  font-size: 12px;
  color: #999;
}

/* Responsive styles */
@media (max-width: 1024px) {
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .two-column-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .search-container {
    max-width: 200px;
  }
}

@media (max-width: 475px) {
  /* Mobile styles */
  .sidebar {
    position: fixed;
    top: 60px;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
  }
  
  .sidebar-open {
    transform: translateX(0);
  }
  
  .search-container {
    max-width: 150px;
    margin: 0 10px;
  }
  
  .header {
    padding: 0 10px;
  }
  
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .main-content {
    padding: 15px;
  }
  
  .product-name {
    font-size: 14px;
  }
  
  .icon-button:not(:last-child) {
    display: none;
  }
}
</style>