<template>
  <div class="project-progress-container">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <h3>项目状态筛选</h3>
        <div class="total-count">总计: {{ projects.length }}个项目</div>
      </div>
      
      <div class="sidebar-content">
        <div 
          v-for="status in projectStatuses" 
          :key="status.key"
          class="status-group"
        >
          <div class="status-title">
            <span class="status-color" :style="{ backgroundColor: status.color }"></span>
            <span class="status-label">{{ status.label }}</span>
            <span class="status-count">({{ getProjectCountByStatus(status.key) }})</span>
          </div>
          
          <div class="project-list" v-if="getProjectCountByStatus(status.key) > 0">
            <div 
              v-for="project in getProjectsByStatus(status.key)" 
              :key="project.projectId"
              class="project-item"
              :class="{ active: selectedProject?.projectId === project.projectId }"
              @click="selectProject(project)"
            >
              <div class="project-info">
                <div class="project-name">{{ project.projectName }}</div>
                <div class="project-code">{{ project.projectCode }}</div>
                <div class="project-manager">
                  👤 {{ project.projectManagerName || '未分配' }}
                </div>
                <div class="project-progress">
                  <a-progress 
                    :percent="project.progress || 0" 
                    size="small" 
                    :show-text="false"
                    :color="getProgressColor(project.progress || 0)"
                  />
                  <span class="progress-text">{{ project.progress || 0 }}%</span>
                </div>
                <div class="project-dates">
                  <span class="date-item">
                    📅 {{ formatShortDate(project.startDate) }}
                  </span>
                  <span class="date-item">
                    📅 {{ formatShortDate(project.endDate) }}
                  </span>
              </div>
            </div>
            </div>
          </div>
          
          <div v-else class="empty-status">
            <span class="empty-text">暂无项目</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 项目信息头部 -->
      <div class="project-header" v-if="selectedProject">
        <div class="project-title">
          <h2>{{ selectedProject.projectName }}</h2>
          <div class="project-tags">
          <a-tag :color="getStatusColor(selectedProject.status)">
            {{ getStatusText(selectedProject.status) }}
          </a-tag>
            <a-tag color="blue">{{ selectedProject.projectCode }}</a-tag>
          </div>
        </div>
        
        <div class="project-meta">
          <div class="meta-item">
            <span class="label">启动日期:</span>
            <span class="value">{{ formatDate(selectedProject.startDate) }}</span>
          </div>
          <div class="meta-item">
            <span class="label">项目负责人:</span>
            <span class="value">@{{ selectedProject.projectManagerName || '未分配' }}</span>
          </div>
          <div class="meta-item">
            <span class="label">查看工作量:</span>
            <span class="value">{{ getTotalWorkload() }}</span>
          </div>
          <div class="meta-item">
            <span class="label">风场名称:</span>
            <span class="value">{{ selectedProject.farmName }}</span>
          </div>
          <div class="meta-item">
            <span class="label">委托单位:</span>
            <span class="value">{{ selectedProject.client || '未指定' }}</span>
          </div>
        </div>

        <div class="project-controls">
          <a-select 
            v-model="selectedManager" 
            placeholder="切换人名" 
            style="width: 150px"
            @change="handleManagerChange"
          >
            <a-option 
              v-for="manager in projectManagers" 
              :key="manager.id" 
              :value="manager.id"
            >
              @{{ manager.name }}
            </a-option>
          </a-select>
          
          <a-select 
            v-model="selectedWeek" 
            placeholder="显示第1周" 
            style="width: 120px"
            @change="handleWeekChange"
          >
            <a-option 
              v-for="week in availableWeeks" 
              :key="week.value" 
              :value="week.value"
            >
              {{ week.label }}
            </a-option>
          </a-select>
          
          <a-button type="primary" @click="refreshProjectData">
            🔄 刷新数据
          </a-button>
        </div>

        <div class="project-features">
          <span class="feature-text">
            ✅ 支持自动高亮"今天"为红色
          </span>
          <span class="feature-text">
            ✅ 休假日期自动标识为淡黄色
          </span>
          <span class="feature-text">
            ⬆️ 修改可自动调整右侧时间轴长度
          </span>
        </div>

        <div class="project-legend">
          <span class="legend-item">
            <span class="legend-color task-color"></span>
            灰色底色为任务项,白色底色为子任务项
          </span>
          <span class="legend-item">
            <span class="legend-color editable-color"></span>
            填写绿色区域,灰色底色部分由公式自动计算
          </span>
        </div>

        <div class="timeline-status">
          <a-tag color="blue">待启动</a-tag>
          <a-tag color="gray">已完成</a-tag>
        </div>
      </div>

      <!-- 甘特图区域 -->
      <div class="gantt-container" v-if="selectedProject">
        <div class="gantt-header">
          <div class="task-info-header">
            <div class="header-cell">项目</div>
            <div class="header-cell">项目描述</div>
            <div class="header-cell">跟进人</div>
            <div class="header-cell">启动日期</div>
            <div class="header-cell">完成日期</div>
            <div class="header-cell">工时自然日</div>
            <div class="header-cell">完成度 %</div>
            <div class="header-cell">工时工作日</div>
          </div>
          
          <div class="timeline-header">
            <div 
              v-for="week in timelineWeeks" 
              :key="week.value"
              class="week-header"
            >
              <div class="week-title">{{ week.label }}</div>
              <div class="days-header">
                <div 
                  v-for="day in week.days" 
                  :key="day.date"
                  class="day-header"
                  :class="{ 
                    'weekend': day.isWeekend,
                    'today': day.isToday 
                  }"
                >
                  <div class="day-number">{{ day.dayNumber }}</div>
                  <div class="day-weekday">{{ day.weekday }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="gantt-body">
          <div 
            v-for="task in projectTasks" 
            :key="task.id"
            class="task-row"
            :class="{ 'sub-task': task.isSubTask }"
          >
            <!-- 任务信息列 -->
            <div class="task-info">
              <div class="task-cell">{{ task.name }}</div>
              <div class="task-cell">{{ task.description }}</div>
              <div class="task-cell">@{{ task.assignee }}</div>
              <div class="task-cell editable">{{ formatDate(task.startDate) }}</div>
              <div class="task-cell editable">{{ formatDate(task.endDate) }}</div>
              <div class="task-cell calculated">{{ task.naturalDays }}</div>
              <div class="task-cell calculated">
                <div class="progress-bar">
                  <div 
                    class="progress-fill" 
                    :style="{ width: task.progress + '%' }"
                  ></div>
                </div>
                {{ task.progress }}%
              </div>
              <div class="task-cell calculated">{{ task.workDays }}</div>
            </div>

            <!-- 时间轴 -->
            <div class="task-timeline">
              <div 
                v-for="week in timelineWeeks" 
                :key="week.value"
                class="week-timeline"
              >
                <div class="days-timeline">
                  <div 
                    v-for="day in week.days" 
                    :key="day.date"
                    class="day-timeline"
                    :class="{ 
                      'weekend': day.isWeekend,
                      'today': day.isToday 
                    }"
                  >
                    <div 
                      v-if="isTaskActiveOnDay(task, day.date)"
                      class="task-bar"
                      :class="{
                        'completed': isTaskCompletedOnDay(task, day.date),
                        'pending': !isTaskCompletedOnDay(task, day.date)
                      }"
                      :style="getTaskBarStyle(task, day.date)"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 无项目选择时的提示 -->
      <div v-else class="no-project-selected">
        <a-empty description="请从左侧选择一个项目查看甘特图">
          <template #image>
            📊
          </template>
          <template #description>
            <p>从左侧侧边栏选择不同状态的项目</p>
            <p>查看项目进度和任务甘特图</p>
          </template>
        </a-empty>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'

// 尝试导入dayjs，如果失败则使用原生Date
let dayjs: any
try {
  dayjs = require('dayjs')
} catch (error) {
  console.warn('dayjs导入失败，使用原生Date对象')
  dayjs = {
    format: (date: Date, format: string) => {
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const weekdays = ['日', '一', '二', '三', '四', '五', '六']
      const weekday = weekdays[date.getDay()]
      
      if (format === 'YYYY/M/D dddd') {
        return `${year}/${month}/${day} 星期${weekday}`
      }
      if (format === 'YYYY/M/D') {
        return `${year}/${month}/${day}`
      }
      if (format === 'YYYY-MM-DD') {
        return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
      }
      return `${year}/${month}/${day}`
    },
    add: (date: Date, amount: number, unit: string) => {
      const newDate = new Date(date)
      if (unit === 'day') {
        newDate.setDate(newDate.getDate() + amount)
      }
      return newDate
    },
    isSame: (date1: Date, date2: Date, unit: string) => {
      if (unit === 'day') {
        return date1.toDateString() === date2.toDateString()
      }
      return date1.getTime() === date2.getTime()
    },
    diff: (date1: Date, date2: Date, unit: string) => {
      if (unit === 'day') {
        const timeDiff = date1.getTime() - date2.getTime()
        return Math.floor(timeDiff / (1000 * 3600 * 24))
      }
      return date1.getTime() - date2.getTime()
    },
    isBetween: (date: Date, start: Date, end: Date, unit: string, inclusivity: string) => {
      const time = date.getTime()
      const startTime = start.getTime()
      const endTime = end.getTime()
      
      if (inclusivity === '[]') {
        return time >= startTime && time <= endTime
      }
      return time > startTime && time < endTime
    }
  }
}

import type { ProjectResp } from '@/apis/project/type'

// 项目状态定义 - 按照你的要求映射
const projectStatuses = [
  { key: 'pending', label: '未开工', color: '#ff4d4f' },
  { key: 'preparing', label: '筹备中', color: '#faad14' },
  { key: 'inProgress', label: '开工中', color: '#1890ff' },
  { key: 'suspended', label: '暂停中', color: '#722ed1' },
  { key: 'completed', label: '已完工', color: '#52c41a' },
  { key: 'acceptance', label: '验收中', color: '#13c2c2' },
  { key: 'collection', label: '回款中', color: '#eb2f96' },
  { key: 'settled', label: '已结算', color: '#52c41a' }
]

// 响应式数据
const selectedProject = ref<ProjectResp | null>(null)
const selectedManager = ref<string>('')
const selectedWeek = ref<string>('week1')

// 模拟项目数据 - 包含所有8种状态
const projects = ref<ProjectResp[]>([
  {
    projectId: '1',
    projectName: 'ABC 项目',
    projectCode: 'ABC001',
    projectIntro: '风电场检测服务项目',
    farmName: '华能风电场',
    farmAddress: '内蒙古呼和浩特',
    client: '华能新能源股份有限公司',
    projectManagerId: '1',
    projectManagerName: '黄泡泡',
    startDate: '2025-01-10',
    endDate: '2025-01-30',
    status: 2, // 开工中
    progress: 33
  },
  {
    projectId: '2',
    projectName: 'DEF 项目',
    projectCode: 'DEF002',
    projectIntro: '设备维护服务项目',
    farmName: '大唐风电场',
    farmAddress: '河北张家口',
    client: '大唐新能源股份有限公司',
    projectManagerId: '2',
    projectManagerName: '周北北',
    startDate: '2025-01-15',
    endDate: '2025-02-15',
    status: 1, // 筹备中
    progress: 0
  },
  {
    projectId: '3',
    projectName: 'GHI 项目',
    projectCode: 'GHI003',
    projectIntro: '叶片检测项目',
    farmName: '中广核风电场',
    farmAddress: '广东阳江',
    client: '中广核新能源投资有限公司',
    projectManagerId: '3',
    projectManagerName: '王小铭',
    startDate: '2024-12-01',
    endDate: '2024-12-31',
    status: 4, // 已完工
    progress: 100
  },
  {
    projectId: '4',
    projectName: 'JKL 项目',
    projectCode: 'JKL004',
    projectIntro: '塔筒检测项目',
    farmName: '三峡风电场',
    farmAddress: '湖北宜昌',
    client: '三峡新能源有限公司',
    projectManagerId: '1',
    projectManagerName: '黄泡泡',
    startDate: '2025-02-01',
    endDate: '2025-02-28',
    status: 0, // 未开工
    progress: 0
  },
  {
    projectId: '5',
    projectName: 'MNO 项目',
    projectCode: 'MNO005',
    projectIntro: '齿轮箱检测项目',
    farmName: '国电风电场',
    farmAddress: '甘肃酒泉',
    client: '国电电力发展股份有限公司',
    projectManagerId: '2',
    projectManagerName: '周北北',
    startDate: '2025-01-20',
    endDate: '2025-02-20',
    status: 3, // 暂停中
    progress: 25
  },
  {
    projectId: '6',
    projectName: 'PQR 项目',
    projectCode: 'PQR006',
    projectIntro: '发电机检测项目',
    farmName: '华电风电场',
    farmAddress: '新疆哈密',
    client: '华电国际电力股份有限公司',
    projectManagerId: '3',
    projectManagerName: '王小铭',
    startDate: '2024-11-01',
    endDate: '2024-11-30',
    status: 5, // 验收中
    progress: 95
  },
  {
    projectId: '7',
    projectName: 'STU 项目',
    projectCode: 'STU007',
    projectIntro: '控制系统检测项目',
    farmName: '龙源风电场',
    farmAddress: '内蒙古锡林郭勒',
    client: '龙源电力集团股份有限公司',
    projectManagerId: '1',
    projectManagerName: '黄泡泡',
    startDate: '2024-10-01',
    endDate: '2024-10-31',
    status: 6, // 回款中
    progress: 100
  },
  {
    projectId: '8',
    projectName: 'VWX 项目',
    projectCode: 'VWX008',
    projectIntro: '变桨系统检测项目',
    farmName: '金风风电场',
    farmAddress: '江苏盐城',
    client: '金风科技股份有限公司',
    projectManagerId: '2',
    projectManagerName: '周北北',
    startDate: '2024-09-01',
    endDate: '2024-09-30',
    status: 7, // 已结算
    progress: 100
  }
])

// 模拟任务数据
const projectTasks = ref([
  {
    id: '1',
    name: '1 需求分析',
    description: '项目需求分析和规划',
    assignee: '黄泡泡',
    startDate: '2025-01-10',
    endDate: '2025-01-22',
    naturalDays: 35,
    progress: 33,
    workDays: 9,
    isSubTask: false
  },
  {
    id: '1.1',
    name: '1.1 【用户反馈分析】',
    description: '收集和分析用户反馈',
    assignee: '黄泡泡',
    startDate: '2025-01-10',
    endDate: '2025-01-11',
    naturalDays: 2,
    progress: 100,
    workDays: 1,
    isSubTask: true
  },
  {
    id: '1.2',
    name: '1.2 【用户调研访谈】',
    description: '进行用户调研和访谈',
    assignee: '周北北',
    startDate: '2025-01-11',
    endDate: '2025-01-12',
    naturalDays: 2,
    progress: 60,
    workDays: 0,
    isSubTask: true
  },
  {
    id: '1.3',
    name: '1.3 【竞品体验分析】',
    description: '分析竞品功能和体验',
    assignee: '周北北',
    startDate: '2025-01-12',
    endDate: '2025-01-15',
    naturalDays: 4,
    progress: 50,
    workDays: 3,
    isSubTask: true
  },
  {
    id: '1.4',
    name: '1.4 【功能数据分析】',
    description: '分析功能需求数据',
    assignee: '王小铭',
    startDate: '2025-01-13',
    endDate: '2025-01-17',
    naturalDays: 5,
    progress: 75,
    workDays: 5,
    isSubTask: true
  },
  {
    id: '1.5',
    name: '1.5 【需求目标制定】',
    description: '制定项目需求目标',
    assignee: '周北北',
    startDate: '2025-01-14',
    endDate: '2025-01-21',
    naturalDays: 8,
    progress: 10,
    workDays: 6,
    isSubTask: true
  },
  {
    id: '1.6',
    name: '1.6 【任务xxx】',
    description: '待定任务内容',
    assignee: '王小铭',
    startDate: '2025-01-15',
    endDate: '2025-01-21',
    naturalDays: 7,
    progress: 30,
    workDays: 5,
    isSubTask: true
  },
  {
    id: '1.7',
    name: '1.7 【任务xxx】',
    description: '待定任务内容',
    assignee: '黄泡泡',
    startDate: '2025-01-16',
    endDate: '2025-01-22',
    naturalDays: 7,
    progress: 0,
    workDays: 5,
    isSubTask: true
  },
  {
    id: '2',
    name: '2 产品设计',
    description: '产品设计和原型制作',
    assignee: '周北北',
    startDate: '2025-01-18',
    endDate: '2025-01-26',
    naturalDays: 19,
    progress: 0,
    workDays: 6,
    isSubTask: false
  },
  {
    id: '2.1',
    name: '2.1 【需求战略层和范围层评审】',
    description: '评审需求战略和范围',
    assignee: '周北北',
    startDate: '2025-01-18',
    endDate: '2025-01-21',
    naturalDays: 4,
    progress: 0,
    workDays: 2,
    isSubTask: true
  }
])

// 项目经理列表
const projectManagers = ref([
  { id: '1', name: '黄泡泡' },
  { id: '2', name: '周北北' },
  { id: '3', name: '王小铭' }
])

// 可用周数
const availableWeeks = ref([
  { value: 'week1', label: '第1周' },
  { value: 'week2', label: '第2周' },
  { value: 'week3', label: '第3周' },
  { value: 'week4', label: '第4周' }
])

// 时间轴周数 - 简化版本
const timelineWeeks = computed(() => {
  try {
  const weeks = []
    const startDate = new Date('2025-01-06')
  
  for (let i = 0; i < 4; i++) {
      const weekStart = dayjs.add(startDate, i * 7, 'day')
    const days = []
    
    for (let j = 0; j < 7; j++) {
        const currentDate = dayjs.add(weekStart, j, 'day')
        const dayNumber = currentDate.getDate()
        const weekday = ['日', '一', '二', '三', '四', '五', '六'][currentDate.getDay()]
        const isWeekend = currentDate.getDay() === 0 || currentDate.getDay() === 6
        const isToday = dayjs.isSame(currentDate, new Date(), 'day')
      
      days.push({
          date: dayjs.format(currentDate, 'YYYY-MM-DD'),
        dayNumber,
        weekday,
        isWeekend,
        isToday
      })
    }
    
    weeks.push({
      value: `week${i + 1}`,
      label: `第${i + 1}周`,
      days
    })
  }
  
  return weeks
  } catch (error) {
    console.error('计算时间轴出错:', error)
    return []
  }
})

// 计算属性
const getProjectCountByStatus = (status: string) => {
  try {
  return projects.value.filter(p => getStatusKey(p.status) === status).length
  } catch (error) {
    console.error('计算项目数量出错:', error)
    return 0
  }
}

const getProjectsByStatus = (status: string) => {
  try {
  return projects.value.filter(p => getStatusKey(p.status) === status)
  } catch (error) {
    console.error('筛选项目出错:', error)
    return []
  }
}

const getTotalWorkload = () => {
  try {
  if (!selectedProject.value) return 0
  return projectTasks.value
    .filter(task => !task.isSubTask)
    .reduce((total, task) => total + (task.workDays || 0), 0)
  } catch (error) {
    console.error('计算工作量出错:', error)
    return 0
  }
}

// 方法
const getStatusKey = (status: number) => {
  const statusMap: Record<number, string> = {
    0: 'pending',      // 未开工
    1: 'preparing',    // 筹备中
    2: 'inProgress',   // 开工中
    3: 'suspended',    // 暂停中
    4: 'completed',    // 已完工
    5: 'acceptance',   // 验收中
    6: 'collection',   // 回款中
    7: 'settled'       // 已结算
  }
  return statusMap[status] || 'pending'
}

const getStatusText = (status: number) => {
  const statusMap: Record<number, string> = {
    0: '未开工',
    1: '筹备中',
    2: '开工中',
    3: '暂停中',
    4: '已完工',
    5: '验收中',
    6: '回款中',
    7: '已结算'
  }
  return statusMap[status] || '未知'
}

const getStatusColor = (status: number) => {
  const statusMap: Record<number, string> = {
    0: '#ff4d4f',  // 未开工 - 红色
    1: '#faad14',  // 筹备中 - 橙色
    2: '#1890ff',  // 开工中 - 蓝色
    3: '#722ed1',  // 暂停中 - 紫色
    4: '#52c41a',  // 已完工 - 绿色
    5: '#13c2c2',  // 验收中 - 青色
    6: '#eb2f96',  // 回款中 - 粉色
    7: '#52c41a'   // 已结算 - 绿色
  }
  return statusMap[status] || '#d9d9d9'
}

const getProgressColor = (progress: number) => {
  if (progress >= 80) return '#52c41a'
  if (progress >= 50) return '#1890ff'
  if (progress >= 20) return '#faad14'
  return '#ff4d4f'
}

const formatDate = (date: string | undefined) => {
  if (!date) return ''
  try {
    return dayjs.format(new Date(date), 'YYYY/M/D dddd')
  } catch (error) {
    console.error('格式化日期出错:', error)
    return date || ''
  }
}

const formatShortDate = (date: string | undefined) => {
  if (!date) return ''
  try {
    return dayjs.format(new Date(date), 'YYYY/M/D')
  } catch (error) {
    console.error('格式化短日期出错:', error)
    return date || ''
  }
}

const selectProject = (project: ProjectResp) => {
  selectedProject.value = project
  selectedManager.value = project.projectManagerId || ''
  Message.success(`已选择项目: ${project.projectName}`)
}

const handleManagerChange = (value: string) => {
  Message.info(`切换到负责人: ${value}`)
}

const handleWeekChange = (value: string) => {
  Message.info(`切换到: ${value}`)
}

const refreshProjectData = () => {
  Message.info('刷新项目数据')
}

const isTaskActiveOnDay = (task: any, date: string) => {
  try {
    const taskStart = new Date(task.startDate)
    const taskEnd = new Date(task.endDate)
    const currentDate = new Date(date)
    return dayjs.isBetween(currentDate, taskStart, taskEnd, 'day', '[]')
  } catch (error) {
    console.error('检查任务活跃状态出错:', error)
    return false
  }
}

const isTaskCompletedOnDay = (task: any, date: string) => {
  try {
  if (task.progress >= 100) return true
  
    const taskStart = new Date(task.startDate)
    const taskEnd = new Date(task.endDate)
    const currentDate = new Date(date)
    
    if (!dayjs.isBetween(currentDate, taskStart, taskEnd, 'day', '[]')) return false
    
    const totalDays = dayjs.diff(taskEnd, taskStart, 'day') + 1
  const completedDays = Math.floor((task.progress / 100) * totalDays)
    const daysFromStart = dayjs.diff(currentDate, taskStart, 'day') + 1
  
  return daysFromStart <= completedDays
  } catch (error) {
    console.error('检查任务完成状态出错:', error)
    return false
  }
}

const getTaskBarStyle = (task: any, date: string) => {
  try {
    const taskStart = new Date(task.startDate)
    const currentDate = new Date(date)
    const daysFromStart = dayjs.diff(currentDate, taskStart, 'day')
  
  return {
    left: `${daysFromStart * 40}px`,
    width: '40px'
    }
  } catch (error) {
    console.error('计算任务条样式出错:', error)
    return { left: '0px', width: '40px' }
  }
}

// 生命周期
onMounted(() => {
  try {
    console.log('项目管理甘特图页面加载中...')
    
    // 检查必要的数据
    console.log('项目数据:', projects.value)
    console.log('任务数据:', projectTasks.value)
    
  // 默认选择第一个项目
  if (projects.value.length > 0) {
    selectProject(projects.value[0])
      console.log('已选择默认项目:', projects.value[0])
    } else {
      console.warn('没有可用的项目数据')
    }
    
    console.log('页面加载完成')
  } catch (error) {
    console.error('页面加载出错:', error)
  }
})
</script>

<style scoped lang="scss">
.project-progress-container {
  display: flex;
  height: 100vh;
  background-color: #f5f5f5;
}

.sidebar {
  width: 320px;
  background-color: #fff;
  border-right: 1px solid #e8e8e8;
  overflow-y: auto;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
  
  .sidebar-header {
    padding: 16px;
    border-bottom: 1px solid #e8e8e8;
    background-color: #fafafa;
    
    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #1d2129;
    }

    .total-count {
      font-size: 12px;
      color: #86909c;
      margin-top: 4px;
    }
  }
  
  .sidebar-content {
    padding: 16px;
  }
  
  .status-group {
    margin-bottom: 24px;
    
    .status-title {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      font-weight: 600;
      color: #1d2129;
      padding: 8px 12px;
      background-color: #f7f8fa;
      border-radius: 6px;
      
      .status-color {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      
      .status-count {
        margin-left: auto;
        font-size: 12px;
        color: #86909c;
        font-weight: normal;
        background-color: #fff;
        padding: 2px 8px;
        border-radius: 10px;
        border: 1px solid #e8e8e8;
      }
    }
    
    .project-list {
      .project-item {
        padding: 12px;
        margin-bottom: 8px;
        background-color: #f7f8fa;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s;
        border: 1px solid transparent;
        
        &:hover {
          background-color: #e8f3ff;
          border-color: #91d5ff;
          transform: translateY(-1px);
          box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
        }
        
        &.active {
          background-color: #e6f4ff;
          border: 1px solid #1890ff;
          box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
        }
        
        .project-info {
          .project-name {
            font-weight: 600;
            color: #1d2129;
            margin-bottom: 4px;
            font-size: 14px;
            line-height: 1.4;
          }
          
          .project-code {
            font-size: 12px;
            color: #86909c;
            margin-bottom: 4px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
          }
          
          .project-manager {
            font-size: 12px;
            color: #86909c;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 4px;
          }
          
          .project-progress {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            
            .progress-text {
              font-size: 12px;
              color: #86909c;
              min-width: 30px;
              font-weight: 500;
            }
          }

          .project-dates {
            display: flex;
            gap: 12px;
            margin-top: 8px;
            font-size: 12px;
            color: #86909c;

            .date-item {
              display: flex;
              align-items: center;
              gap: 4px;
            }
          }
        }
      }
    }

    .empty-status {
      padding: 12px;
      text-align: center;
      color: #86909c;
      font-size: 14px;
      background-color: #f7f8fa;
      border-radius: 6px;
      border: 1px dashed #d9d9d9;
    }
  }
}

.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.project-header {
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  
  .project-title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    
    h2 {
      margin: 0;
      font-size: 24px;
      font-weight: 600;
      color: #1d2129;
    }

    .project-tags {
      display: flex;
      gap: 8px;
    }
  }
  
  .project-meta {
    display: flex;
    gap: 32px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    
    .meta-item {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 200px;
      
      .label {
        color: #86909c;
        font-size: 14px;
        white-space: nowrap;
      }
      
      .value {
        color: #1d2129;
        font-weight: 500;
      }
    }
  }
  
  .project-controls {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    align-items: center;
  }
  
  .project-features {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    
    .feature-text {
      font-size: 12px;
      color: #86909c;
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      background-color: #f7f8fa;
      border-radius: 4px;
    }
  }
  
  .project-legend {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    
    .legend-item {
      font-size: 12px;
      color: #86909c;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 8px;
      background-color: #f7f8fa;
      border-radius: 4px;

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

      .task-color {
        background-color: #d9d9d9;
      }

      .editable-color {
        background-color: #f6ffed;
      }
    }
  }
  
  .timeline-status {
    display: flex;
    gap: 12px;
  }
}

.gantt-container {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  
  .gantt-header {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    
    .task-info-header {
      display: flex;
      min-width: 800px;
      background-color: #fafafa;
      
      .header-cell {
        padding: 12px 8px;
        border-right: 1px solid #e8e8e8;
        font-size: 12px;
        font-weight: 600;
        color: #1d2129;
        text-align: center;
        min-width: 100px;
        
        &:first-child {
          min-width: 80px;
        }
        
        &:nth-child(2) {
          min-width: 150px;
        }
        
        &:nth-child(3) {
          min-width: 100px;
        }
        
        &:nth-child(4),
        &:nth-child(5) {
          min-width: 120px;
        }
        
        &:nth-child(6),
        &:nth-child(7),
        &:nth-child(8) {
          min-width: 80px;
        }
      }
    }
    
    .timeline-header {
      display: flex;
      flex: 1;
      background-color: #fafafa;
      
      .week-header {
        border-right: 1px solid #e8e8e8;
        
        .week-title {
          padding: 8px;
          text-align: center;
          font-size: 12px;
          font-weight: 600;
          color: #1d2129;
          background-color: #f0f0f0;
          border-bottom: 1px solid #e8e8e8;
        }
        
        .days-header {
          display: flex;
          
          .day-header {
            width: 40px;
            padding: 4px;
            text-align: center;
            border-right: 1px solid #f0f0f0;
            border-bottom: 1px solid #e8e8e8;
            
            &.weekend {
              background-color: #fff7e6;
            }
            
            &.today {
              background-color: #ff4d4f;
              color: #fff;
            }
            
            .day-number {
              font-size: 12px;
              font-weight: 600;
            }
            
            .day-weekday {
              font-size: 10px;
              color: #86909c;
            }
          }
        }
      }
    }
  }
  
  .gantt-body {
    .task-row {
      display: flex;
      border-bottom: 1px solid #f0f0f0;
      
      &.sub-task {
        background-color: #fff;
      }
      
      &:not(.sub-task) {
        background-color: #f7f8fa;
      }
      
      .task-info {
        display: flex;
        min-width: 800px;
        
        .task-cell {
          padding: 12px 8px;
          border-right: 1px solid #e8e8e8;
          font-size: 12px;
          color: #1d2129;
          text-align: center;
          min-width: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
          
          &:first-child {
            min-width: 80px;
            font-weight: 600;
          }
          
          &:nth-child(2) {
            min-width: 150px;
            text-align: left;
            justify-content: flex-start;
          }
          
          &:nth-child(3) {
            min-width: 100px;
          }
          
          &:nth-child(4),
          &:nth-child(5) {
            min-width: 120px;
          }
          
          &:nth-child(6),
          &:nth-child(7),
          &:nth-child(8) {
            min-width: 80px;
          }
          
          &.editable {
            background-color: #f6ffed;
            border: 1px solid #b7eb8f;
          }
          
          &.calculated {
            background-color: #f5f5f5;
            color: #666;
          }
          
          .progress-bar {
            width: 100%;
            height: 8px;
            background-color: #f0f0f0;
            border-radius: 4px;
            overflow: hidden;
            margin-right: 8px;
            
            .progress-fill {
              height: 100%;
              background-color: #52c41a;
              transition: width 0.3s ease;
            }
          }
        }
      }
      
      .task-timeline {
        display: flex;
        flex: 1;
        position: relative;
        
        .week-timeline {
          border-right: 1px solid #f0f0f0;
          
          .days-timeline {
            display: flex;
            
            .day-timeline {
              width: 40px;
              height: 60px;
              border-right: 1px solid #f0f0f0;
              border-bottom: 1px solid #f0f0f0;
              position: relative;
              
              &.weekend {
                background-color: #fff7e6;
              }
              
              &.today {
                background-color: #ff4d4f;
              }
              
              .task-bar {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                height: 20px;
                border-radius: 2px;
                
                &.completed {
                  background-color: #d9d9d9;
                }
                
                &.pending {
                  background-color: #1890ff;
                }
              }
            }
          }
        }
      }
    }
  }
}

.no-project-selected {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  text-align: center;
  
  p {
    margin: 8px 0;
    color: #86909c;
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .sidebar {
    width: 280px;
  }
  
  .gantt-container {
    .gantt-header {
      .task-info-header {
        min-width: 600px;
        
        .header-cell {
          min-width: 80px;
          font-size: 11px;
          padding: 8px 4px;
        }
      }
    }
    
    .gantt-body {
      .task-row {
        .task-info {
          min-width: 600px;
          
          .task-cell {
            min-width: 80px;
            font-size: 11px;
            padding: 8px 4px;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .project-progress-container {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    height: auto;
    max-height: 300px;
  }
  
  .main-content {
    padding: 16px;
  }
  
  .project-header {
    padding: 16px;
    
    .project-meta {
      gap: 16px;
      
      .meta-item {
        min-width: 150px;
      }
    }
  }
}
</style>
