cn-rdms-web/src/views/workbench/modules/workbench-todo-panel.vue

<script setup lang="ts">
import { type Component, computed, markRaw, onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import type { RouteKey } from '@elegant-router/types';
import { OBJECT_CONTEXT_QUERY_KEY } from '@/constants/object-context';
import { RDMS_REQ_PRIORITY_DICT_CODE } from '@/constants/dict';
import {
  fetchApproveOvertimeApplication,
  fetchChangePersonalItemStatus,
  fetchChangeProjectTaskStatus,
  fetchGetMonthlyReportApprovalPage,
  fetchGetMyTaskPage,
  fetchGetOvertimeApplicationApprovalPage,
  fetchGetPersonalItemDetail,
  fetchGetPersonalItemPage,
  fetchGetProjectReportApprovalPage,
  fetchGetProjectTask,
  fetchGetWeeklyReportApprovalPage,
  fetchRejectOvertimeApplication
} from '@/service/api';
import { useAuthStore } from '@/store/modules/auth';
import { useRouterPush } from '@/hooks/common/router';
import { useDict } from '@/hooks/business/dict';
import type { WorklogChangedPayload } from '@/views/project/project/execution/shared';
import TaskStatusActionDialog from '@/views/project/project/execution/modules/status-action-dialog.vue';
import TaskWorklogDialog from '@/views/project/project/execution/modules/task-worklog-dialog.vue';
import PersonalItemDetailDialog from '@/views/personal-center/my-item/modules/personal-item-detail-dialog.vue';
import PersonalItemOperateDialog from '@/views/personal-center/my-item/modules/personal-item-operate-dialog.vue';
import PersonalItemStatusActionDialog from '@/views/personal-center/my-item/modules/personal-item-status-action-dialog.vue';
import OvertimeApplicationActionDialog from '@/views/personal-center/overtime-application/modules/overtime-application-action-dialog.vue';
import OvertimeApplicationDetailDialog from '@/views/personal-center/overtime-application/modules/overtime-application-detail-dialog.vue';
import WorkReportPrototypePageDialog from '@/views/personal-center/work-report/shared/components/prototype-page-dialog.vue';
import {
  WORK_REPORT_TYPE_LABEL,
  type WorkReportRow,
  type WorkReportType,
  formatPeriod
} from '@/views/personal-center/work-report/shared/types';
import {
  type WorkbenchTodoDeadlineFilter,
  type WorkbenchTodoItem,
  type WorkbenchTodoMainTab,
  buildWorkbenchTodoItems,
  filterWorkbenchTodoItemsByCategory,
  filterWorkbenchTodoItemsByDeadline,
  isWorkbenchTodoOverdue,
  sortWorkbenchTodoItemsByPriority
} from '../homepage';
import { useWorkbenchRefresh } from '../composables/use-workbench-refresh';
import WorkbenchModuleCard from './workbench-module-card.vue';
import IconMdiCheckCircleOutline from '~icons/mdi/check-circle-outline';
import IconMdiClipboardEditOutline from '~icons/mdi/clipboard-edit-outline';
import IconMdiCloseCircleOutline from '~icons/mdi/close-circle-outline';
import IconMdiEyeOutline from '~icons/mdi/eye-outline';
import IconMdiPauseCircleOutline from '~icons/mdi/pause-circle-outline';
import IconMdiPlayCircleOutline from '~icons/mdi/play-circle-outline';

type SortKey = 'created' | 'priority' | 'deadline';
type OvertimeApprovalActionType = 'approve' | 'reject';
type ApprovalBizType = 'overtime_application' | WorkReportType;

defineOptions({ name: 'WorkbenchTodoPanel' });

interface Props {
  editing?: boolean;
}

withDefaults(defineProps<Props>(), { editing: false });

defineEmits<{
  (e: 'hide'): void;
}>();

const router = useRouter();
const { routerPushByKey } = useRouterPush();

const authStore = useAuthStore();
const currentUserId = computed(() => authStore.userInfo.userId || '');

const { loading, refresh } = useWorkbenchRefresh(async () => {
  await Promise.all([
    loadMyTaskItems(),
    loadPersonalTodoItems(),
    loadOvertimeApprovalItems(),
    loadWorkReportApprovalItems()
  ]);
});

const PAGE_SIZE = 5;

const activeTab = ref<WorkbenchTodoMainTab>('all');
const activeDeadlineFilter = ref<WorkbenchTodoDeadlineFilter>(null);
const activeApprovalBizType = ref<ApprovalBizType>('weekly');
const activeSort = ref<SortKey>('deadline');
const currentPage = ref(1);

const sortOptions = computed<Array<{ key: SortKey; label: string }>>(() => {
  const base: Array<{ key: SortKey; label: string }> = [
    { key: 'deadline', label: '截止时间' },
    { key: 'created', label: '创建时间' }
  ];
  if (activeTab.value === 'task') {
    base.push({ key: 'priority', label: '优先级' });
  }
  return base;
});

const mainTabs: Array<{ key: WorkbenchTodoMainTab; label: string }> = [
  { key: 'all', label: '全部' },
  { key: 'task', label: '任务' },
  { key: 'ticket', label: '工单' },
  { key: 'personal', label: '个人事项' },
  { key: 'approval', label: '待审批' }
];

const deadlineFilters: Array<{ key: Exclude<WorkbenchTodoDeadlineFilter, null>; label: string }> = [
  { key: 'overdue', label: '已逾期' },
  { key: 'today', label: '今日到期' },
  { key: 'week', label: '本周到期' }
];

const approvalBizTabs: Array<{ key: ApprovalBizType; label: string }> = [
  { key: 'weekly', label: '周报' },
  { key: 'monthly', label: '月报' },
  { key: 'project', label: '项目半月报' },
  { key: 'overtime_application', label: '加班申请' }
];

const myTaskItems = ref<WorkbenchTodoItem[]>([]);
// 保留任务原始行，供操作图标按 availableActions 渲染并取 projectId / executionId 调状态变更接口
const myTaskRows = ref<Api.Project.MyTaskItem[]>([]);
const personalTodoItems = ref<WorkbenchTodoItem[]>([]);
// 保留个人事项原始行，供操作图标（详情/填报/完成）按 availableActions 渲染并回传给弹层
const personalItemRows = ref<Api.PersonalItem.PersonalItem[]>([]);
const overtimeApprovalItems = ref<WorkbenchTodoItem[]>([]);
const overtimeApprovalRows = ref<Api.OvertimeApplication.OvertimeApplication[]>([]);
const workReportApprovalItems = ref<WorkbenchTodoItem[]>([]);
const weeklyApprovalRows = ref<Api.WorkReport.Weekly.WeeklyReport[]>([]);
const monthlyApprovalRows = ref<Api.WorkReport.Monthly.MonthlyReport[]>([]);
const projectApprovalRows = ref<Api.WorkReport.Project.ProjectReport[]>([]);
// 工单 tab 等工单业务上线，当前为空态
const mergedItems = computed(() => [
  ...myTaskItems.value,
  ...personalTodoItems.value,
  ...overtimeApprovalItems.value,
  ...workReportApprovalItems.value
]);

// 个人事项操作弹层：详情用 view 模式、新增用 add 模式，共用同一实例
const personalOperateVisible = ref(false);
const personalOperateType = ref<'add' | 'view'>('add');
const personalOperateRow = ref<Api.PersonalItem.PersonalItem | null>(null);
// 个人事项填报：复用详情弹层的 worklog tab
const personalDetailVisible = ref(false);
const personalDetailRow = ref<Api.PersonalItem.PersonalItem | null>(null);
// 个人事项完成：复用状态动作弹层收集原因 + 二次确认
const personalStatusVisible = ref(false);
const personalStatusRow = ref<Api.PersonalItem.PersonalItem | null>(null);
const personalStatusAction = ref<Api.PersonalItem.PersonalItemLifecycleAction | null>(null);
// 任务生命周期动作：复用任务工作区的状态动作弹层收集原因
const taskStatusVisible = ref(false);
const taskStatusRow = ref<Api.Project.MyTaskItem | null>(null);
const taskStatusAction = ref<Api.Project.LifecycleAction<Api.Project.ProjectTaskActionCode> | null>(null);
// 任务填报工时：复用任务工作区的工时弹层；弹层需要完整任务详情，点击时按需拉取
const taskWorklogVisible = ref(false);
const taskWorklogTask = ref<Api.Project.ProjectTask | null>(null);
const overtimeDetailVisible = ref(false);
const overtimeActionVisible = ref(false);
const overtimeActionSubmitting = ref(false);
const currentOvertimeApplication = ref<Api.OvertimeApplication.OvertimeApplication | null>(null);
const currentOvertimeActionType = ref<OvertimeApprovalActionType>('approve');
const workReportDetailVisible = ref(false);
const currentWorkReport = ref<WorkReportRow | null>(null);
const currentWorkReportType = ref<WorkReportType>('weekly');

const OVERTIME_APPROVAL_ACTION_ICONS = {
  detail: markRaw(IconMdiEyeOutline)
};

const PERSONAL_ACTION_ICONS = {
  detail: markRaw(IconMdiEyeOutline),
  worklog: markRaw(IconMdiClipboardEditOutline),
  complete: markRaw(IconMdiCheckCircleOutline)
};

// auto_start 是系统自动动作，接口不返回；无图标的未知动作不渲染按钮
const TASK_ACTION_ICONS: Partial<Record<Api.Project.ProjectTaskActionCode, Component>> = {
  pause: markRaw(IconMdiPauseCircleOutline),
  resume: markRaw(IconMdiPlayCircleOutline),
  complete: markRaw(IconMdiCheckCircleOutline),
  cancel: markRaw(IconMdiCloseCircleOutline)
};

function getTaskActionButtonType(code: Api.Project.ProjectTaskActionCode) {
  if (code === 'complete') return 'success' as const;
  if (code === 'cancel') return 'danger' as const;
  return 'primary' as const;
}

function getTodoProgress(item: WorkbenchTodoItem) {
  if (typeof item.progressRate !== 'number' || !Number.isFinite(item.progressRate)) {
    return 0;
  }

  return Math.min(100, Math.max(0, Math.round(item.progressRate)));
}

function shouldShowTodoProgress(item: WorkbenchTodoItem) {
  return (item.category === 'task' || item.category === 'personal') && typeof item.progressRate === 'number';
}

function handleOpenAdd() {
  personalOperateType.value = 'add';
  personalOperateRow.value = null;
  personalOperateVisible.value = true;
}

async function handleAddSubmitted() {
  activeTab.value = 'personal';
  activeDeadlineFilter.value = null;
  await loadPersonalTodoItems();
}

function findPersonalItemRow(item: WorkbenchTodoItem) {
  return personalItemRows.value.find(row => `personal-${row.id}` === item.id) || null;
}

function getPersonalCompleteAction(row: Api.PersonalItem.PersonalItem) {
  return row.availableActions?.find(action => action.actionCode === 'complete') || null;
}

// 仅当个人事项当前可完成（availableActions 含 complete）时才渲染完成图标
function canCompletePersonalItem(item: WorkbenchTodoItem) {
  const row = findPersonalItemRow(item);
  return Boolean(row && getPersonalCompleteAction(row));
}

// 详情：复用个人事项操作弹层的 view 只读模式
function openPersonalDetail(item: WorkbenchTodoItem) {
  const row = findPersonalItemRow(item);
  if (!row) return;

  personalOperateType.value = 'view';
  personalOperateRow.value = row;
  personalOperateVisible.value = true;
}

// 填报：拉最新详情后打开详情弹层的 worklog tab
async function openPersonalWorklog(item: WorkbenchTodoItem) {
  const row = findPersonalItemRow(item);
  if (!row) return;

  const { error, data } = await fetchGetPersonalItemDetail(row.id);
  personalDetailRow.value = error || !data ? row : data;
  personalDetailVisible.value = true;
}

// 完成：走状态动作弹层（二次确认 + 按 needReason 收集原因）
function openPersonalComplete(item: WorkbenchTodoItem) {
  const row = findPersonalItemRow(item);
  if (!row) return;

  const completeAction = getPersonalCompleteAction(row);
  if (!completeAction) return;

  personalStatusRow.value = row;
  personalStatusAction.value = completeAction;
  personalStatusVisible.value = true;
}

async function handlePersonalStatusSubmit(reason: string | null) {
  if (!personalStatusRow.value || !personalStatusAction.value) return;

  const { error } = await fetchChangePersonalItemStatus(personalStatusRow.value.id, {
    actionCode: personalStatusAction.value.actionCode,
    reason
  });

  if (error) return;

  personalStatusVisible.value = false;
  window.$message?.success(`${personalStatusAction.value.actionName}成功`);
  await loadPersonalTodoItems();
}

async function handlePersonalWorklogChanged() {
  await loadPersonalTodoItems();
}

function findMyTaskRow(item: WorkbenchTodoItem) {
  return myTaskRows.value.find(row => `task-${row.id}` === item.id) || null;
}

// 状态变更接口挂在执行路径下，未挂执行的任务不渲染动作按钮
function getTaskActions(item: WorkbenchTodoItem) {
  const row = findMyTaskRow(item);
  if (!row?.executionId) return [];
  return row.availableActions.filter(action => Boolean(TASK_ACTION_ICONS[action.actionCode]));
}

// 填报工时同样依赖执行路径（工时接口挂在 project/execution/task 下）
function canReportTaskWorklog(item: WorkbenchTodoItem) {
  return Boolean(findMyTaskRow(item)?.executionId);
}

// 填报：工时弹层需要完整任务详情（负责人/状态/日期），按需拉一次详情再打开
async function openTaskWorklog(item: WorkbenchTodoItem) {
  const row = findMyTaskRow(item);
  if (!row?.executionId) return;

  const { error, data } = await fetchGetProjectTask(row.projectId, row.executionId, row.id);
  if (error || !data) return;

  taskWorklogTask.value = data;
  taskWorklogVisible.value = true;
}

// 填报会联动任务进度/状态（如 auto_start），变更后刷新任务列表
async function handleTaskWorklogChanged(payload: WorklogChangedPayload) {
  await loadMyTaskItems();

  // 与任务工作区联动一致：进度填到 100 且我是任务负责人时提示完成（仅单任务，不做级联）
  if (payload.mode === 'delete' || payload.progressRate !== 100) return;

  const task = taskWorklogTask.value;
  if (!task || task.id !== payload.taskId || task.ownerId !== currentUserId.value) return;

  // 以刷新后的行为准：后端按进度/负责人口径返回了 complete 才提示
  const row = myTaskRows.value.find(item => item.id === payload.taskId);
  const completeAction = row?.availableActions.find(action => action.actionCode === 'complete');
  if (!row || !completeAction) return;

  taskStatusRow.value = row;
  taskStatusAction.value = completeAction;

  try {
    await window.$messageBox?.confirm('任务进度已达 100%，是否完成当前任务？', '完成确认', {
      confirmButtonText: '完成任务',
      cancelButtonText: '仅保留工时',
      type: 'info'
    });
  } catch {
    return;
  }

  await submitTaskStatusChange(null);
}

const taskStatusActionTitle = computed(() =>
  taskStatusAction.value ? `任务状态变更：${taskStatusAction.value.actionName}` : '任务状态变更'
);

async function handleTaskAction(
  item: WorkbenchTodoItem,
  action: Api.Project.LifecycleAction<Api.Project.ProjectTaskActionCode>
) {
  const row = findMyTaskRow(item);
  if (!row?.executionId) return;

  taskStatusRow.value = row;
  taskStatusAction.value = action;

  // 完成动作：二次确认后直接提交（与任务工作区同口径；有未完成子任务时后端会拒绝，按业务错误提示）
  if (action.actionCode === 'complete') {
    try {
      await window.$messageBox?.confirm(`确定要完成任务“${row.taskTitle}”吗？`, '完成确认', {
        confirmButtonText: '完成任务',
        cancelButtonText: '取消',
        type: 'warning'
      });
    } catch {
      return;
    }
    await submitTaskStatusChange(null);
    return;
  }

  // 其他非必填原因的动作（暂停/恢复）直接提交，不弹原因弹层
  if (!action.needReason) {
    await submitTaskStatusChange(null);
    return;
  }

  taskStatusVisible.value = true;
}

async function submitTaskStatusChange(reason: string | null) {
  const row = taskStatusRow.value;
  const action = taskStatusAction.value;
  if (!row?.executionId || !action) return;

  const { error } = await fetchChangeProjectTaskStatus(row.projectId, row.executionId, {
    taskId: row.id,
    data: { actionCode: action.actionCode, reason }
  });

  if (error) return;

  taskStatusVisible.value = false;
  window.$message?.success(`${action.actionName}成功`);
  await loadMyTaskItems();
}

const tabCounts = computed(() => {
  const counts: Record<WorkbenchTodoMainTab, number> = {
    all: mergedItems.value.length,
    task: 0,
    ticket: 0,
    personal: 0,
    approval: 0
  };
  mergedItems.value.forEach(item => {
    counts[item.category] += 1;
  });
  return counts;
});

const tabOverdueCount = computed(() => {
  const map: Record<WorkbenchTodoMainTab, number> = {
    all: 0,
    task: 0,
    ticket: 0,
    personal: 0,
    approval: 0
  };
  mergedItems.value.forEach(item => {
    if (!isWorkbenchTodoOverdue(item)) return;
    map.all += 1;
    map[item.category] += 1;
  });
  return map;
});

const itemsInTab = computed(() => filterWorkbenchTodoItemsByCategory(mergedItems.value, activeTab.value));

const filteredItems = computed(() => {
  if (activeTab.value === 'approval') {
    return itemsInTab.value.filter(item => item.approvalBizType === activeApprovalBizType.value);
  }

  return filterWorkbenchTodoItemsByDeadline(itemsInTab.value, activeDeadlineFilter.value);
});

const approvalBizTabCounts = computed(() => {
  const counts: Record<ApprovalBizType, number> = {
    overtime_application: 0,
    weekly: 0,
    monthly: 0,
    project: 0
  };

  itemsInTab.value.forEach(item => {
    if (item.approvalBizType === 'overtime_application') {
      counts.overtime_application += 1;
    }

    if (isWorkReportApprovalBizType(item.approvalBizType)) {
      counts[item.approvalBizType] += 1;
    }
  });

  return counts;
});

const sortedItems = computed(() => {
  const base = filteredItems.value;
  if (activeSort.value === 'priority') {
    return sortWorkbenchTodoItemsByPriority(base, 'desc');
  }
  if (activeSort.value === 'deadline') {
    return [...base].sort((left, right) => {
      const leftValue = left.remainingDays === null ? Number.POSITIVE_INFINITY : left.remainingDays;
      const rightValue = right.remainingDays === null ? Number.POSITIVE_INFINITY : right.remainingDays;
      return leftValue - rightValue;
    });
  }
  return base;
});

const currentSortLabel = computed(
  () => sortOptions.value.find(option => option.key === activeSort.value)?.label ?? '排序'
);

const pagedItems = computed(() => {
  const start = (currentPage.value - 1) * PAGE_SIZE;
  return sortedItems.value.slice(start, start + PAGE_SIZE);
});

watch([activeTab, activeDeadlineFilter, activeSort], () => {
  currentPage.value = 1;
});

function handleSelectTab(key: WorkbenchTodoMainTab) {
  if (activeTab.value === key) return;
  activeTab.value = key;
  if (key === 'approval') activeDeadlineFilter.value = null;
  activeDeadlineFilter.value = null;
  if (key !== 'task' && activeSort.value === 'priority') {
    activeSort.value = 'deadline';
  }
}

function handleSelectDeadlineFilter(key: Exclude<WorkbenchTodoDeadlineFilter, null>) {
  activeDeadlineFilter.value = activeDeadlineFilter.value === key ? null : key;
}

function handleSelectApprovalBizType(key: ApprovalBizType) {
  activeApprovalBizType.value = key;
}

function handleSelectSort(key: SortKey) {
  activeSort.value = key;
}

function handleClickItem(item: WorkbenchTodoItem) {
  if (item.approvalBizType === 'overtime_application') {
    openOvertimeDetail(item);
    return;
  }

  if (isWorkReportApprovalBizType(item.approvalBizType)) {
    openWorkReportDetail(item);
    return;
  }

  // 任务条目：带项目对象上下文跳进该项目的任务导航（执行池页）
  if (item.category === 'task' && item.projectId) {
    router.push({
      path: '/project/project/execution',
      query: { [OBJECT_CONTEXT_QUERY_KEY]: item.projectId }
    });
    return;
  }

  if (!item.routeKey) return;
  routerPushByKey(item.routeKey as RouteKey);
}

function isWorkReportApprovalBizType(value?: string): value is WorkReportType {
  return value === 'weekly' || value === 'monthly' || value === 'project';
}

function findOvertimeApprovalRow(item: WorkbenchTodoItem) {
  if (!item.approvalBizId) {
    return null;
  }

  return overtimeApprovalRows.value.find(row => row.id === item.approvalBizId) || null;
}

function openOvertimeDetail(item: WorkbenchTodoItem) {
  const row = findOvertimeApprovalRow(item);
  if (!row) return;

  currentOvertimeApplication.value = row;
  overtimeDetailVisible.value = true;
}

function openCurrentOvertimeAction(actionType: OvertimeApprovalActionType) {
  if (!currentOvertimeApplication.value) return;

  currentOvertimeActionType.value = actionType;
  overtimeActionVisible.value = true;
}

function findWorkReportApprovalRow(item: WorkbenchTodoItem) {
  if (!item.approvalBizId || !isWorkReportApprovalBizType(item.approvalBizType)) {
    return null;
  }

  if (item.approvalBizType === 'weekly') {
    return weeklyApprovalRows.value.find(row => row.id === item.approvalBizId) || null;
  }

  if (item.approvalBizType === 'monthly') {
    return monthlyApprovalRows.value.find(row => row.id === item.approvalBizId) || null;
  }

  return projectApprovalRows.value.find(row => row.id === item.approvalBizId) || null;
}

function openWorkReportDetail(item: WorkbenchTodoItem) {
  const row = findWorkReportApprovalRow(item);
  if (!row || !isWorkReportApprovalBizType(item.approvalBizType)) return;

  currentWorkReport.value = row;
  currentWorkReportType.value = item.approvalBizType;
  workReportDetailVisible.value = true;
}

async function handleOvertimeActionSubmit(reason: string | null) {
  if (!currentOvertimeApplication.value) {
    return;
  }

  overtimeActionSubmitting.value = true;
  const result =
    currentOvertimeActionType.value === 'approve'
      ? await fetchApproveOvertimeApplication(currentOvertimeApplication.value.id, { reason })
      : await fetchRejectOvertimeApplication(currentOvertimeApplication.value.id, { reason });
  overtimeActionSubmitting.value = false;

  if (result.error) {
    return;
  }

  overtimeActionVisible.value = false;
  overtimeDetailVisible.value = false;
  window.$message?.success(currentOvertimeActionType.value === 'approve' ? '加班申请已通过' : '加班申请已退回');
  await loadOvertimeApprovalItems();
}

async function handleWorkReportSubmitted() {
  workReportDetailVisible.value = false;
  await loadWorkReportApprovalItems();
}

// 优先级角标用字典 label 原样回显（rdms_req_priority：P0~P3），不翻译成高/中/低
const { getLabel: getPriorityLabel } = useDict(RDMS_REQ_PRIORITY_DICT_CODE);

// 任务优先级字典 value（"0" P0 ~ "3" P3，数字越小越高）映射待办优先级（仅用于排序与高亮权重）
function mapTaskTodoPriority(priority: string) {
  if (priority === '0') return 'high' as const;
  if (priority === '1') return 'mid' as const;
  return 'low' as const;
}

// 我的任务：跨项目单接口聚合（负责/协办并集、只返回非终态，过滤排序、进度与可执行动作均由后端完成）
async function loadMyTaskItems() {
  const { error, data } = await fetchGetMyTaskPage({ pageNo: 1, pageSize: -1 });

  if (error || !data) {
    myTaskRows.value = [];
    myTaskItems.value = [];
    return;
  }

  myTaskRows.value = data.list;
  myTaskItems.value = buildWorkbenchTodoItems(
    data.list.map(task => ({
      id: `task-${task.id}`,
      category: 'task' as const,
      title: task.taskTitle,
      createdTime: task.createTime,
      deadline: task.plannedEndDate,
      source: task.projectName,
      progressRate: task.progressRate,
      priority: mapTaskTodoPriority(task.priority),
      priorityLabel: getPriorityLabel(task.priority) || task.priority,
      projectId: task.projectId
    }))
  );
}

// 待办口径：未到终态的个人事项（pending / active / paused），terminal 态（completed / cancelled）不进待办
const PERSONAL_TODO_STATUSES: Api.PersonalItem.PersonalItemStatusCode[] = ['pending', 'active', 'paused'];

async function loadPersonalTodoItems() {
  const { error, data } = await fetchGetPersonalItemPage({ pageNo: 1, pageSize: 100 });

  if (error || !data) {
    personalItemRows.value = [];
    personalTodoItems.value = [];
    return;
  }

  const rows = data.list.filter(item => PERSONAL_TODO_STATUSES.includes(item.statusCode));
  personalItemRows.value = rows;
  personalTodoItems.value = buildWorkbenchTodoItems(
    rows.map(item => ({
      id: `personal-${item.id}`,
      category: 'personal',
      title: item.taskTitle,
      createdTime: item.createTime,
      deadline: item.plannedEndDate,
      source: '个人事项',
      progressRate: item.progressRate,
      routeKey: 'personal-center_my-item'
    }))
  );
}

async function loadOvertimeApprovalItems() {
  const { error, data } = await fetchGetOvertimeApplicationApprovalPage({
    pageNo: 1,
    pageSize: 20,
    statusCode: 'pending',
    keyword: undefined,
    applicantName: undefined,
    approverId: undefined,
    approverName: undefined,
    overtimeDate: undefined,
    createTime: undefined
  });

  if (error || !data) {
    overtimeApprovalRows.value = [];
    overtimeApprovalItems.value = [];
    return;
  }

  overtimeApprovalRows.value = data.list;
  overtimeApprovalItems.value = buildWorkbenchTodoItems(
    data.list.map(item => ({
      id: `overtime-application-${item.id}`,
      category: 'approval',
      title: `${item.applicantName} · ${item.overtimeDate.slice(5, 7)} 月加班 ${item.overtimeDuration} 申请待审批`,
      createdTime: item.submitTime || item.createTime,
      deadline: item.submitTime || item.createTime,
      source: `加班申请 · ${item.applicantName}`,
      priority: 'mid',
      approvalBizType: 'overtime_application',
      approvalBizId: item.id
    }))
  );
}

function buildWorkReportApprovalItems<T extends WorkReportRow>(
  bizType: WorkReportType,
  rows: T[]
): WorkbenchTodoItem[] {
  const reportTypeLabel = WORK_REPORT_TYPE_LABEL[bizType];

  return buildWorkbenchTodoItems(
    rows.map(item => ({
      id: `${bizType}-${item.id}`,
      category: 'approval',
      title: `${reportTypeLabel} · ${formatPeriod(item)} 待审批`,
      createdTime: item.submitTime || item.createTime || '',
      deadline: item.submitTime || item.createTime || null,
      source: `${reportTypeLabel} · ${'projectName' in item ? item.projectName : item.reporterName}`,
      priority: 'mid',
      approvalBizType: bizType,
      approvalBizId: item.id
    }))
  );
}

async function loadWorkReportApprovalItems() {
  const [weeklyResult, monthlyResult, projectResult] = await Promise.all([
    fetchGetWeeklyReportApprovalPage({
      pageNo: 1,
      pageSize: 20,
      statusCode: 'pending_approval',
      keyword: undefined,
      periodStartDate: undefined,
      submitTime: undefined,
      supervisorName: undefined,
      isBusinessTrip: undefined
    }),
    fetchGetMonthlyReportApprovalPage({
      pageNo: 1,
      pageSize: 20,
      statusCode: 'pending_approval',
      keyword: undefined,
      periodStartDate: undefined,
      submitTime: undefined,
      supervisorName: undefined
    }),
    fetchGetProjectReportApprovalPage({
      pageNo: 1,
      pageSize: 20,
      statusCode: 'pending_approval',
      keyword: undefined,
      periodStartDate: undefined,
      submitTime: undefined,
      supervisorName: undefined,
      projectId: undefined,
      flag: undefined
    })
  ]);

  weeklyApprovalRows.value = weeklyResult.error || !weeklyResult.data ? [] : weeklyResult.data.list;
  monthlyApprovalRows.value = monthlyResult.error || !monthlyResult.data ? [] : monthlyResult.data.list;
  projectApprovalRows.value = projectResult.error || !projectResult.data ? [] : projectResult.data.list;
  workReportApprovalItems.value = [
    ...buildWorkReportApprovalItems('weekly', weeklyApprovalRows.value),
    ...buildWorkReportApprovalItems('monthly', monthlyApprovalRows.value),
    ...buildWorkReportApprovalItems('project', projectApprovalRows.value)
  ];
}

function getDeadlineToneClass(item: WorkbenchTodoItem) {
  if (isWorkbenchTodoOverdue(item)) return 'workbench-todo__deadline--rose';
  if (item.remainingDays === 0) return 'workbench-todo__deadline--amber';
  return 'workbench-todo__deadline--slate';
}

onMounted(async () => {
  await Promise.all([
    loadMyTaskItems(),
    loadPersonalTodoItems(),
    loadOvertimeApprovalItems(),
    loadWorkReportApprovalItems()
  ]);
});
</script>

<template>
  <WorkbenchModuleCard
    v-loading="loading"
    title="我的待办"
    icon="mdi:clipboard-text-clock-outline"
    :editing="editing"
    @hide="$emit('hide')"
    @refresh="refresh"
  >
    <div class="workbench-todo__tabs">
      <div class="workbench-todo__tabs-group">
        <ElTooltip
          v-for="tab in mainTabs"
          :key="tab.key"
          :content="`已逾期 ${tabOverdueCount[tab.key]} 项，建议尽快处理`"
          :disabled="tabOverdueCount[tab.key] === 0"
          placement="top"
          effect="dark"
        >
          <button
            type="button"
            class="workbench-todo__tab"
            :class="{ 'workbench-todo__tab--active': activeTab === tab.key }"
            @click="handleSelectTab(tab.key)"
          >
            <span>{{ tab.label }}</span>
            <span class="workbench-todo__tab-count">{{ tabCounts[tab.key] }}</span>
            <span v-if="tabOverdueCount[tab.key] > 0" class="workbench-todo__tab-dot" />
          </button>
        </ElTooltip>
      </div>

      <button type="button" class="workbench-todo__add" @click="handleOpenAdd">
        <SvgIcon icon="mdi:plus" class="workbench-todo__add-icon" />
        <span>个人事项</span>
      </button>
    </div>

    <div class="workbench-todo__filters">
      <div v-if="activeTab !== 'approval'" class="workbench-todo__filters-left">
        <button
          v-for="filter in deadlineFilters"
          :key="filter.key"
          type="button"
          class="workbench-todo__filter"
          :class="{ 'workbench-todo__filter--active': activeDeadlineFilter === filter.key }"
          @click="handleSelectDeadlineFilter(filter.key)"
        >
          {{ filter.label }}
        </button>
      </div>
      <div v-else class="workbench-todo__filters-left">
        <button
          v-for="tab in approvalBizTabs"
          :key="tab.key"
          type="button"
          class="workbench-todo__filter"
          :class="{ 'workbench-todo__filter--active': activeApprovalBizType === tab.key }"
          @click="handleSelectApprovalBizType(tab.key)"
        >
          {{ tab.label }}
          <span class="workbench-todo__filter-count">{{ approvalBizTabCounts[tab.key] }}</span>
        </button>
      </div>

      <ElDropdown trigger="click" placement="bottom-end" @command="handleSelectSort">
        <span class="workbench-todo__sort">
          排序：{{ currentSortLabel }}
          <SvgIcon icon="mdi:chevron-down" class="workbench-todo__sort-icon" />
        </span>
        <template #dropdown>
          <ElDropdownMenu>
            <ElDropdownItem
              v-for="option in sortOptions"
              :key="option.key"
              :command="option.key"
              :class="{ 'is-active': activeSort === option.key }"
            >
              {{ option.label }}
            </ElDropdownItem>
          </ElDropdownMenu>
        </template>
      </ElDropdown>
    </div>

    <div class="workbench-todo__content">
      <div v-if="pagedItems.length" class="workbench-todo__list">
        <article v-for="item in pagedItems" :key="item.id" class="workbench-todo__item">
          <div class="workbench-todo__leading">
            <span class="workbench-todo__category" :class="`workbench-todo__category--${item.categoryTone}`">
              {{ item.categoryLabel }}
            </span>
            <span
              v-if="item.priorityLabel"
              class="workbench-todo__priority"
              :class="{ 'workbench-todo__priority--high': item.priority === 'high' }"
            >
              {{ item.priorityLabel }}
            </span>
          </div>

          <div class="workbench-todo__body">
            <h4 class="workbench-todo__item-title">
              <span
                class="workbench-todo__item-title-text"
                :class="{
                  'workbench-todo__item-title-text--clickable': Boolean(
                    item.routeKey || item.approvalBizType || item.projectId
                  )
                }"
                @click="handleClickItem(item)"
              >
                {{ item.title }}
              </span>
            </h4>
            <div class="workbench-todo__meta">
              <span class="workbench-todo__source">{{ item.source }}</span>
            </div>
            <div
              v-if="shouldShowTodoProgress(item)"
              class="workbench-todo__progress"
              :aria-label="`进度 ${getTodoProgress(item)}%`"
            >
              <span class="workbench-todo__progress-label">进度：</span>
              <ElProgress
                class="workbench-todo__progress-bar"
                :percentage="getTodoProgress(item)"
                :stroke-width="6"
                :show-text="false"
              />
              <span class="workbench-todo__progress-text">{{ getTodoProgress(item) }}%</span>
            </div>
          </div>

          <div class="workbench-todo__trailing">
            <div v-if="item.approvalBizType === 'overtime_application'" class="workbench-todo__actions" @click.stop>
              <ElTooltip content="详情">
                <ElButton link type="primary" class="workbench-todo__action-btn" @click="openOvertimeDetail(item)">
                  <component :is="OVERTIME_APPROVAL_ACTION_ICONS.detail" class="text-15px" />
                </ElButton>
              </ElTooltip>
            </div>
            <div
              v-else-if="isWorkReportApprovalBizType(item.approvalBizType)"
              class="workbench-todo__actions"
              @click.stop
            >
              <ElTooltip content="详情">
                <ElButton link type="primary" class="workbench-todo__action-btn" @click="openWorkReportDetail(item)">
                  <component :is="OVERTIME_APPROVAL_ACTION_ICONS.detail" class="text-15px" />
                </ElButton>
              </ElTooltip>
            </div>
            <div
              v-else-if="item.category === 'task' && canReportTaskWorklog(item)"
              class="workbench-todo__actions"
              @click.stop
            >
              <ElTooltip content="填报工时">
                <ElButton link type="primary" class="workbench-todo__action-btn" @click="openTaskWorklog(item)">
                  <component :is="PERSONAL_ACTION_ICONS.worklog" class="text-15px" />
                </ElButton>
              </ElTooltip>
              <ElTooltip v-for="action in getTaskActions(item)" :key="action.actionCode" :content="action.actionName">
                <ElButton
                  link
                  :type="getTaskActionButtonType(action.actionCode)"
                  class="workbench-todo__action-btn"
                  @click="handleTaskAction(item, action)"
                >
                  <component :is="TASK_ACTION_ICONS[action.actionCode]" class="text-15px" />
                </ElButton>
              </ElTooltip>
            </div>
            <div v-else-if="item.category === 'personal'" class="workbench-todo__actions" @click.stop>
              <ElTooltip content="详情">
                <ElButton link type="primary" class="workbench-todo__action-btn" @click="openPersonalDetail(item)">
                  <component :is="PERSONAL_ACTION_ICONS.detail" class="text-15px" />
                </ElButton>
              </ElTooltip>
              <ElTooltip content="填报工时">
                <ElButton link type="primary" class="workbench-todo__action-btn" @click="openPersonalWorklog(item)">
                  <component :is="PERSONAL_ACTION_ICONS.worklog" class="text-15px" />
                </ElButton>
              </ElTooltip>
              <ElTooltip v-if="canCompletePersonalItem(item)" content="完成">
                <ElButton link type="success" class="workbench-todo__action-btn" @click="openPersonalComplete(item)">
                  <component :is="PERSONAL_ACTION_ICONS.complete" class="text-15px" />
                </ElButton>
              </ElTooltip>
            </div>
            <span class="workbench-todo__deadline" :class="getDeadlineToneClass(item)">
              {{ item.deadlineLabel }}
            </span>
          </div>
        </article>
      </div>
      <ElEmpty v-else description="当前筛选下暂无待办" :image-size="72" />
    </div>

    <div class="workbench-todo__pager">
      <ElPagination
        v-if="filteredItems.length > PAGE_SIZE"
        v-model:current-page="currentPage"
        :page-size="PAGE_SIZE"
        :total="filteredItems.length"
        background
        small
        layout="prev, pager, next"
      />
    </div>

    <!-- append-to-body：脱离 grid item 的 transform 容器，弹窗才能正常全屏居中 -->
    <PersonalItemOperateDialog
      v-model:visible="personalOperateVisible"
      :operate-type="personalOperateType"
      :row-data="personalOperateRow"
      append-to-body
      @submitted="handleAddSubmitted"
    />

    <PersonalItemDetailDialog
      v-model:visible="personalDetailVisible"
      :row-data="personalDetailRow"
      default-tab="worklog"
      append-to-body
      @changed="handlePersonalWorklogChanged"
    />

    <PersonalItemStatusActionDialog
      v-model:visible="personalStatusVisible"
      :action="personalStatusAction"
      append-to-body
      @submit="handlePersonalStatusSubmit"
    />

    <TaskStatusActionDialog
      v-model:visible="taskStatusVisible"
      :title="taskStatusActionTitle"
      :action="taskStatusAction"
      append-to-body
      @submit="submitTaskStatusChange"
    />

    <TaskWorklogDialog
      v-model:visible="taskWorklogVisible"
      :task="taskWorklogTask"
      append-to-body
      @changed="handleTaskWorklogChanged"
    />

    <OvertimeApplicationDetailDialog
      v-model:visible="overtimeDetailVisible"
      :row-data="currentOvertimeApplication"
      show-approval-actions
      :action-loading="overtimeActionSubmitting"
      @approve="openCurrentOvertimeAction('approve')"
      @reject="openCurrentOvertimeAction('reject')"
    />
    <OvertimeApplicationActionDialog
      v-model:visible="overtimeActionVisible"
      :action-type="currentOvertimeActionType"
      :loading="overtimeActionSubmitting"
      @submit="handleOvertimeActionSubmit"
    />

    <WorkReportPrototypePageDialog
      v-model:visible="workReportDetailVisible"
      mode="detail"
      scene="approval"
      :report-type="currentWorkReportType"
      :row-data="currentWorkReport"
      @submitted="handleWorkReportSubmitted"
    />
  </WorkbenchModuleCard>
</template>

<style scoped>
.workbench-todo__tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.workbench-todo__tabs-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.workbench-todo__add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border: 1px solid rgb(14 116 144 / 60%);
  border-radius: 999px;
  background-color: rgb(240 253 250 / 80%);
  color: rgb(14 116 144 / 96%);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 160ms ease;
}

.workbench-todo__add:hover {
  background-color: rgb(14 116 144 / 96%);
  border-color: rgb(14 116 144 / 96%);
  color: white;
}

.workbench-todo__add-icon {
  font-size: 14px;
}

.workbench-todo__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgb(226 232 240 / 92%);
  border-radius: 999px;
  background-color: rgb(255 255 255 / 96%);
  color: rgb(71 85 105 / 94%);
  font-size: 13px;
  cursor: pointer;
  transition: all 160ms ease;
}

.workbench-todo__tab:hover {
  border-color: rgb(14 116 144 / 64%);
  color: rgb(14 116 144 / 96%);
}

.workbench-todo__tab--active {
  border-color: rgb(14 116 144 / 92%);
  background-color: rgb(14 116 144 / 96%);
  color: white;
}

.workbench-todo__tab--active:hover {
  color: white;
}

.workbench-todo__tab-count {
  padding: 1px 6px;
  border-radius: 999px;
  background-color: rgb(241 245 249 / 96%);
  color: rgb(71 85 105 / 94%);
  font-size: 11px;
  font-weight: 600;
}

.workbench-todo__tab--active .workbench-todo__tab-count {
  background-color: rgb(255 255 255 / 22%);
  color: white;
}

.workbench-todo__tab-dot {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: rgb(225 29 72 / 96%);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 96%);
}

.workbench-todo__tab--active .workbench-todo__tab-dot {
  box-shadow: 0 0 0 2px rgb(14 116 144 / 96%);
}

.workbench-todo__filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.workbench-todo__filters-left {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.workbench-todo__sort {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  border-radius: 6px;
  color: rgb(100 116 139 / 92%);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 160ms ease;
}

.workbench-todo__sort:hover {
  background-color: rgb(241 245 249 / 96%);
  color: rgb(14 116 144 / 96%);
}

.workbench-todo__sort-icon {
  font-size: 14px;
}

:deep(.el-dropdown-menu__item.is-active) {
  color: var(--el-color-primary);
  font-weight: 600;
}

.workbench-todo__filter {
  padding: 3px 10px;
  border: 1px dashed rgb(203 213 225 / 92%);
  border-radius: 999px;
  background-color: transparent;
  color: rgb(100 116 139 / 92%);
  font-size: 12px;
  cursor: pointer;
  transition: all 160ms ease;
}

.workbench-todo__filter:hover {
  border-style: solid;
  border-color: rgb(14 116 144 / 60%);
  color: rgb(14 116 144 / 96%);
}

.workbench-todo__filter--active {
  border-style: solid;
  border-color: rgb(190 18 60 / 80%);
  background-color: rgb(255 228 230 / 96%);
  color: rgb(190 18 60 / 96%);
}

.workbench-todo__filter--active:hover {
  border-color: rgb(190 18 60 / 92%);
  color: rgb(190 18 60 / 96%);
}

.workbench-todo__filter-count {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 700;
}

.workbench-todo__content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.workbench-todo__content :deep(.el-empty) {
  margin: auto;
}

.workbench-todo__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.workbench-todo__item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgb(226 232 240 / 90%);
  border-radius: 16px;
  background-color: rgb(255 255 255 / 98%);
  transition:
    border-color 160ms ease,
    background-color 160ms ease;
}

.workbench-todo__leading {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 72px;
  min-width: 0;
}

.workbench-todo__category {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.workbench-todo__category--sky {
  background-color: rgb(224 242 254 / 96%);
  color: rgb(14 116 144 / 96%);
}

.workbench-todo__category--emerald {
  background-color: rgb(220 252 231 / 96%);
  color: rgb(5 150 105 / 96%);
}

.workbench-todo__category--amber {
  background-color: rgb(254 243 199 / 96%);
  color: rgb(180 83 9 / 96%);
}

.workbench-todo__category--rose {
  background-color: rgb(255 228 230 / 96%);
  color: rgb(190 18 60 / 96%);
}

.workbench-todo__category--violet {
  background-color: rgb(237 233 254 / 96%);
  color: rgb(109 40 217 / 96%);
}

.workbench-todo__priority {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 6px;
  background-color: rgb(241 245 249 / 96%);
  color: rgb(71 85 105 / 96%);
  font-size: 11px;
  font-weight: 800;
}

.workbench-todo__priority--high {
  background-color: rgb(254 226 226 / 96%);
  color: rgb(220 38 38 / 96%);
}

.workbench-todo__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.workbench-todo__item-title {
  margin: 0;
  color: rgb(15 23 42 / 98%);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workbench-todo__item-title-text--clickable {
  cursor: pointer;
  transition: color 160ms ease;
}

.workbench-todo__item-title-text--clickable:hover {
  color: rgb(14 116 144 / 96%);
  text-decoration: underline;
}

.workbench-todo__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.workbench-todo__source {
  color: rgb(100 116 139 / 92%);
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workbench-todo__progress {
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(100%, 260px);
  margin-top: 1px;
}

.workbench-todo__progress-label {
  flex: 0 0 auto;
  color: rgb(100 116 139 / 92%);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.workbench-todo__progress-bar {
  flex: 1 1 auto;
  min-width: 96px;
}

.workbench-todo__progress-text {
  flex: 0 0 34px;
  color: rgb(71 85 105 / 94%);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.workbench-todo__progress :deep(.el-progress-bar__outer) {
  background-color: rgb(226 232 240 / 96%);
}

.workbench-todo__trailing {
  display: flex;
  align-items: center;
  gap: 12px;
}

.workbench-todo__actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.workbench-todo__actions :deep(.el-button + .el-button) {
  margin-left: 0;
}

:deep(.workbench-todo__action-btn) {
  min-width: auto;
  height: auto;
  padding: 3px;
  line-height: 1;
}

.workbench-todo__deadline {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.workbench-todo__deadline--slate {
  background-color: rgb(241 245 249 / 96%);
  color: rgb(71 85 105 / 94%);
}

.workbench-todo__deadline--amber {
  background-color: rgb(254 243 199 / 96%);
  color: rgb(180 83 9 / 96%);
}

.workbench-todo__deadline--rose {
  background-color: rgb(255 228 230 / 96%);
  color: rgb(190 18 60 / 96%);
}

.workbench-todo__pager {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 32px;
  margin-top: 12px;
}

@media (width <= 600px) {
  .workbench-todo__item {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .workbench-todo__trailing {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}
</style>