<template>
  <GiPageLayout>
    <div class="task-tracking-page">
      <!-- 固定标题和表头容器 -->
      <div class="sticky-headers">
        <!-- 页面标题 -->
        <div class="page-header">
          <h2>任务跟踪</h2>
          <p class="page-description">跟踪、监控和评估任务的完成情况</p>
        </div>

        <!-- 公共表头（仅显示一次） -->
        <div class="shared-header">
          <div class="header-row">
            <div class="col" style="width: 100px">任务描述</div>
            <div class="col" style="width: 180px">任务情况总结</div>
            <div class="col" style="width: 80px">任务执行人</div>
            <div class="col" style="width: 60px">进展</div>
            <div class="col" style="width: 120px">开始日期</div>
            <div class="col" style="width: 120px">预计完成日期</div>
            <div class="col" style="width: 80px">是否延期</div>
            <div class="col" style="width: 120px">实际完成日期</div>
            <div class="col" style="width: 180px">最新进展记录</div>
            <div class="col" style="width: 100px">重要紧急程度</div>
          </div>
        </div>
      </div>

      <!-- 分组容器：按重要紧急程度分组 -->
      <div 
        v-for="(group, groupKey) in groupedTasks" 
        :key="groupKey" 
        class="task-group"
      >
        <!-- 分组标题（带专门的折叠/展开按钮） -->
        <div class="group-header">
          <span class="group-title-text" :class="groupKey">{{ groupKey }}</span>
          <button 
            class="toggle-btn"
            @click="toggleGroup(groupKey)"
            :aria-expanded="!group.collapsed"
          >
            <i class="icon" :class="group.collapsed ? 'el-icon-plus' : 'el-icon-minus'" />
            <span class="toggle-text">{{ group.collapsed ? '展开' : '收起' }}</span>
          </button>
        </div>

        <!-- 任务列表：折叠时隐藏，展开时显示 -->
        <div class="task-list" v-show="!group.collapsed">
          <div 
            v-for="(task, index) in group.tasks" 
            :key="index" 
            class="task-row"
          >
            <!-- 任务描述 -->
            <div class="col" style="width: 100px">{{ task.taskDesc }}</div>
            <!-- 任务情况总结（带弹窗） -->
            <div class="col info-cell" style="width: 180px">
              <span @click="openPopup($event, task.summaryDetail, '任务情况总结')"
                    @mouseenter="cancelClosePopup"
                    @mouseleave="closePopup">
                {{ task.summary }}
                <i class="el-icon-info" />
              </span>
            </div>
            <!-- 任务执行人 -->
            <div class="col" style="width: 80px">{{ task.executor }}</div>
            <!-- 进展（标签化） -->
            <div class="col progress-tag" :class="task.progress" style="width: 60px">
              {{ task.progress }}
            </div>
            <!-- 开始日期 -->
            <div class="col" style="width: 120px">{{ task.startDate }}</div>
            <!-- 预计完成日期 -->
            <div class="col" style="width: 120px">{{ task.expectEndDate }}</div>
            <!-- 是否延期（标签化） -->
            <div class="col delay-tag" :class="task.isDelay" style="width: 80px">
              {{ task.isDelay }}
            </div>
            <!-- 实际完成日期 -->
            <div class="col" style="width: 120px">{{ task.actualEndDate }}</div>
            <!-- 最新进展记录（带弹窗） -->
            <div class="col info-cell" style="width: 180px">
              <span @click="openPopup($event, task.progressDetail, '最新进展记录')"
                    @mouseenter="cancelClosePopup"
                    @mouseleave="closePopup">
                {{ task.latestProgress }}
                <i class="el-icon-info" />
              </span>
            </div>
            <!-- 重要紧急程度（标签化） -->
            <div class="col priority-tag" :class="groupKey" style="width: 100px">
              {{ groupKey }}
            </div>
          </div>
        </div>
      </div>

      <!-- 全局弹窗：所有详情共用 -->
      <transition name="popup">
        <div 
          class="popup" 
          v-if="popupVisible"
          :style="{
            top: popupTop + 'px',
            left: popupLeft + 'px'
          }"
          @mouseenter="cancelClosePopup"
          @mouseleave="closePopup"
          @click.stop
        >
          <div class="popup-title">{{ popupTitle }}</div>
          <div class="popup-content">{{ popupContent }}</div>
          <div class="popup-arrow"></div>
        </div>
      </transition>
    </div>
  </GiPageLayout>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'

// 定义任务结构
interface Task {
  taskDesc: string;
  summary: string;         // 任务情况总结（简略）
  summaryDetail: string;   // 任务情况总结（详细）
  executor: string;
  progress: string;        // 进展（如：进行中、已完成）
  priority: string;        // 重要紧急程度（如：重要紧急、紧急不重要等）
  startDate: string;
  expectEndDate: string;
  isDelay: string;         // 是否延期（如：已延期、正常）
  actualEndDate: string;
  latestProgress: string;  // 最新进展（简略）
  progressDetail: string;  // 最新进展（详细）
}

// 定义分组结构
interface TaskGroup {
  collapsed: boolean;      // 是否折叠
  tasks: Task[];           // 该分组下的任务
}

// 原始任务数据（模拟，实际从接口获取）
const rawTasks = ref<Task[]>([
  {
    taskDesc: '完成年度财务报告',
    summary: '1. 任务执行人于小宁正...',
    summaryDetail: '任务执行人于小宁正按流程推进，已梳理数据框架，待最终核算。目前已完成资产负债表初步编制，利润表数据核对中，预计下周完成全部核算工作。',
    executor: '周北北',
    progress: '进行中',
    priority: '重要紧急',
    startDate: '2023/02/05',
    expectEndDate: '2024/11/25',
    isDelay: '已延期',
    actualEndDate: '',
    latestProgress: '已经收集了所有必要的财...',
    progressDetail: '已收集资产负债表、利润表原始数据，待合并现金流量表。本周重点完成了各部门费用核算，正在处理年末调整事项。'
  },
  {
    taskDesc: '更新公司官网内容',
    summary: '1. 正在收集各部门最新...',
    summaryDetail: '正在收集各部门最新资料，市场部和销售部已提交更新内容，技术部和人力资源部资料待收。预计下周一开始页面制作。',
    executor: '李小华',
    progress: '进行中',
    priority: '重要紧急',
    startDate: '2023/11/01',
    expectEndDate: '2023/11/30',
    isDelay: '正常',
    actualEndDate: '',
    latestProgress: '设计稿已确认，等待内容...',
    progressDetail: '设计稿已确认，等待各部门内容素材。目前已完成首页和产品页的设计，正在准备关于我们页面的素材。'
  },
  {
    taskDesc: '制定明年培训计划',
    summary: '1. 已完成需求调研，正...',
    summaryDetail: '已完成需求调研，正在整理各部门培训需求。调研显示，技术类和管理类培训需求最高，分别占比42%和35%。',
    executor: '张明明',
    progress: '进行中',
    priority: '重要不紧急',
    startDate: '2023/10/15',
    expectEndDate: '2023/12/15',
    isDelay: '正常',
    actualEndDate: '',
    latestProgress: '正在分析培训需求数据...',
    progressDetail: '正在分析培训需求数据，计划11月中旬完成初稿，11月底组织各部门负责人评审。'
  },
  {
    taskDesc: '组织年度员工团建活动',
    summary: '1. 任务已经完成，因特...',
    summaryDetail: '活动已落地执行，含团队协作游戏、主题分享环节，反馈良好。参与率达到95%，收集到23条有效反馈，其中85%为正面评价。',
    executor: '周北北',
    progress: '已完成',
    priority: '紧急不重要',
    startDate: '2023/01/18',
    expectEndDate: '2024/12/02',
    isDelay: '正常',
    actualEndDate: '2023/05/25',
    latestProgress: '已经确定了活动日期和地...',
    progressDetail: '选定XX营地，日期2023/05/20，含露营、烧烤、团队挑战。活动预算控制在计划内，实际花费比预算节省8%。'
  },
  {
    taskDesc: '办公室绿植更换',
    summary: '1. 已联系3家供应商，...',
    summaryDetail: '已联系3家供应商，正在比较报价和服务。现有绿植约60%需要更换，主要是走廊和公共区域的大型绿植。',
    executor: '王静静',
    progress: '待开始',
    priority: '不紧急不重要',
    startDate: '2023/11/20',
    expectEndDate: '2023/11/30',
    isDelay: '正常',
    actualEndDate: '',
    latestProgress: '正在筛选供应商，等待批...',
    progressDetail: '正在筛选供应商，等待审批。初步选定两家供应商，报价相差约15%，正在核实服务内容差异。'
  },
  {
    taskDesc: '更新员工通讯录',
    summary: '1. 收集各部门最新联...',
    summaryDetail: '正在收集各部门最新联系方式，已完成市场部和销售部的信息更新，技术部和人力资源部资料待收。',
    executor: '李小明',
    progress: '待开始',
    priority: '不紧急不重要',
    startDate: '2023/11/25',
    expectEndDate: '2023/12/15',
    isDelay: '正常',
    actualEndDate: '',
    latestProgress: '等待各部门提交最新联...',
    progressDetail: '已发送通知邮件给各部门负责人，要求提供最新员工联系方式，目前收到60%的回复。'
  },
  {
    taskDesc: '整理归档旧项目文档',
    summary: '1. 开始整理2022年...',
    summaryDetail: '开始整理2022年度已完成项目的文档，按照项目类型和日期进行分类归档，预计需要两周时间完成。',
    executor: '张小红',
    progress: '待开始',
    priority: '不紧急不重要',
    startDate: '2023/12/01',
    expectEndDate: '2023/12/15',
    isDelay: '正常',
    actualEndDate: '',
    latestProgress: '准备归档工具和分类标...',
    progressDetail: '已准备好归档所需的文件夹和标签，正在制定分类标准，等待主管审批。'
  }
])

// 分组键（固定四个重要紧急程度）
const groupKeys = ref(['重要紧急', '紧急不重要', '重要不紧急', '不紧急不重要'])

// 分组状态管理
const groupCollapseState = ref<Record<string, boolean>>({})

// 构建分组数据：按重要紧急程度分组
const groupedTasks = computed(() => {
  const groups: Record<string, TaskGroup> = {}
  
  // 初始化分组
  groupKeys.value.forEach(key => {
    // 初始化折叠状态，如果已有状态则使用，否则默认展开(false)
    groupCollapseState.value[key] = groupCollapseState.value[key] ?? false
    
    groups[key] = {
      collapsed: groupCollapseState.value[key],
      tasks: []
    }
  })

  // 将任务分配到对应分组
  rawTasks.value.forEach(task => {
    const groupKey = task.priority
    if (groups[groupKey]) {
      groups[groupKey].tasks.push(task)
    }
  })

  return groups
})

// 折叠/展开分组
function toggleGroup(groupKey: string) {
  groupCollapseState.value[groupKey] = !groupCollapseState.value[groupKey]
  // 保存状态到本地存储
  localStorage.setItem('taskGroupCollapse', JSON.stringify(groupCollapseState.value))
}

// 组件挂载时恢复折叠状态
onMounted(() => {
  const savedState = localStorage.getItem('taskGroupCollapse')
  if (savedState) {
    groupCollapseState.value = JSON.parse(savedState)
  }
})

// 弹窗状态
const popupVisible = ref(false)
const popupTitle = ref('')
const popupContent = ref('')
const popupTop = ref(0)
const popupLeft = ref(0)
let popupTimer: number | null = null

// 打开详情弹窗
function openPopup(event: MouseEvent, content: string, title: string) {
  // 清除之前的关闭计时器
  if (popupTimer) {
    clearTimeout(popupTimer)
    popupTimer = null
  }
  
  const target = event.currentTarget as HTMLElement
  const rect = target.getBoundingClientRect()
  
  popupVisible.value = true
  popupTitle.value = title
  popupContent.value = content
  
  // 固定居中显示
  popupTop.value = window.scrollY + window.innerHeight / 2 - 100
  popupLeft.value = window.innerWidth / 2 - 150
}

// 延迟关闭弹窗（防止鼠标移动时意外关闭）
function closePopup() {
  popupTimer = setTimeout(() => {
    popupVisible.value = false
    popupTimer = null
  }, 200)
}

// 取消延迟关闭
function cancelClosePopup() {
  if (popupTimer) {
    clearTimeout(popupTimer)
    popupTimer = null
  }
}

// 点击页面其他区域关闭弹窗
function handleDocumentClick(e: MouseEvent) {
  const popup = document.querySelector('.popup')
  const infoCells = document.querySelectorAll('.info-cell')
  
  // 如果点击的不是弹窗也不是信息单元格，则关闭弹窗
  if (popup && !popup.contains(e.target as Node) && 
      !Array.from(infoCells).some(cell => cell.contains(e.target as Node))) {
    closePopup()
  }
}

onMounted(() => {
  document.addEventListener('click', handleDocumentClick)
})

onUnmounted(() => {
  document.removeEventListener('click', handleDocumentClick)
})
</script>

<style scoped>
/* 页面基础样式 */
.task-tracking-page {
  padding: 20px;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.page-description {
  color: #666;
  font-size: 14px;
}

/* 公共表头 */
.shared-header {
  background: #f8f9fa;
  border: 1px solid #eee;
  margin-bottom: 10px;
  border-radius: 4px;
}

.header-row {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.header-row .col {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-right: 1px solid #eee;
  padding: 0 8px;
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.header-row .col:last-child {
  border-right: none;
}

/* 分组样式 */
.task-group {
  margin-bottom: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  background: #fff;
}

/* 分组标题（带折叠/展开按钮） */
.group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 15px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  background: transparent;
}

.group-title-text {
  font-weight: 500;
  font-size: 15px;
  padding: 4px 8px;
  border-radius: 8px;
  color: #fff;
}

.group-title-text.重要紧急 {
  background: #dc3545;
}

.group-title-text.紧急不重要 {
  background: #fd7e14;
}

.group-title-text.重要不紧急 {
  background: #ffc107;
  color: #333;
}

.group-title-text.不紧急不重要 {
  background: #28a745;
}

/* 折叠/展开按钮 */
.toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background-color: #e9ecef;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #495057;
  transition: all 0.2s ease;
}

.toggle-btn:hover {
  background-color: #dee2e6;
  color: #212529;
}

.toggle-btn .icon {
  font-size: 14px;
}

.toggle-text {
  user-select: none;
}

/* 任务列表（展开时显示） */
.task-tracking-page {
  padding: 20px;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  height: calc(100vh - 100px);
  overflow-y: auto;
  position: relative;
}

.sticky-headers {
  position: sticky;
  top: -20px; /* 向上移动消除空隙 */
  background: #fff;
  z-index: 10;
  padding: 20px 0 10px;
  margin-top: -20px; /* 消除外部空隙 */
}

.page-header {
  padding: 20px 0 10px;
  margin-bottom: 0;
}

.shared-header {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 10px;
}

.task-list {
  padding: 10px;
}

/* 自定义滚动条样式 */
.task-tracking-page::-webkit-scrollbar {
  width: 8px;
}

.task-tracking-page::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.task-tracking-page::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.task-tracking-page::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 任务行样式 */
.task-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding: 10px 0;
  transition: background-color 0.2s;
}

.task-row:hover {
  background-color: #f8f9fa;
}

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

.task-row .col {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-right: 1px solid #eee;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: #333;
  height: 40px;
}

.task-row .col:last-child {
  border-right: none;
}

/* 信息单元格（带弹窗） */
.info-cell {
  cursor: pointer;
  color: #1890ff;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

.info-cell:hover {
  text-decoration: underline;
}

.info-cell .el-icon-info {
  font-size: 14px;
  color: #666;
}

/* 进展标签样式 */
.progress-tag {
  padding: 4px 8px;
  border-radius: 8px;
  color: #fff;
  text-align: center;
  font-weight: 500;
}

.progress-tag.进行中 {
  background: #ffc107;
}

.progress-tag.已完成 {
  background: #4caf50;
}

.progress-tag.待开始 {
  background: #ff9800;
}

/* 是否延期标签 */
.delay-tag {
  text-align: center;
  font-weight: 500;
}

.delay-tag.正常 {
  color: #28a745;
}

.delay-tag.已延期 {
  color: #f44336;
}

/* 重要紧急程度标签 */
.priority-tag {
  padding: 4px 8px;
  border-radius: 8px;
  color: #fff;
  text-align: center;
  font-weight: 500;
}

.priority-tag.重要紧急 {
  background: #dc3545;
}

.priority-tag.紧急不重要 {
  background: #fd7e14;
}

.priority-tag.重要不紧急 {
  background: #ffc107;
  color: #333;
}

.priority-tag.不紧急不重要 {
  background: #28a745;
}

/* 弹窗样式 */
.popup {
  /* 定位到页面中间 */
  top: 50%;
  left: 50%;
  position: fixed;
  width: 300px;
  max-width: 80vw;
  background: #fff;
  border: 1px solid #f70b0b;
  border-radius: 4px;
  padding: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  z-index: 999;
  animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.popup-title {
  font-weight: bold;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  color: #333;
  font-size: 15px;
}

.popup-content {
  color: #555;
  font-size: 14px;
  line-height: 1.6;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
}



/* 弹窗过渡动画 */
.popup-enter-active {
  transition: all 0.15s ease-out;
}

.popup-enter-from {
  opacity: 0;
  transform: translateY(5px);
}

.popup-enter-to {
  opacity: 1;
  transform: translateY(0);
}
</style>