<script setup lang="ts">
import { computed, markRaw } from 'vue';
import type { PaginationProps } from 'element-plus';
import { useAuthStore } from '@/store/modules/auth';
import {
  canReportTaskWorklog,
  formatDateRange,
  formatDateTime,
  getTaskStatusName,
  getTaskStatusTagType
} from '../shared';
import { useTaskPermissions } from '../composables/use-task-permissions';
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 IconMdiDeleteOutline from '~icons/mdi/delete-outline';
import IconMdiPause from '~icons/mdi/pause';
import IconMdiPencilOutline from '~icons/mdi/pencil-outline';
import IconMdiRestart from '~icons/mdi/restart';
import IconMdiSync from '~icons/mdi/sync';

defineOptions({ name: 'ProjectExecutionTaskTableView' });

interface Props {
  data: Api.Project.ProjectTask[];
  loading: boolean;
  pagination: Partial<PaginationProps & Record<string, any>>;
}

interface Emits {
  (e: 'detail', row: Api.Project.ProjectTask): void;
  (e: 'edit', row: Api.Project.ProjectTask): void;
  (e: 'report', row: Api.Project.ProjectTask): void;
  (e: 'delete', row: Api.Project.ProjectTask): void;
  (
    e: 'status-action',
    row: Api.Project.ProjectTask,
    action: Api.Project.LifecycleAction<Api.Project.ProjectTaskActionCode> | null
  ): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

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

const { canEditTask, canDeleteTask, canReportTaskWorklog: hasReportWorklogPermission } = useTaskPermissions();

const paginationVisible = computed(() => Boolean(props.pagination.total));

const taskTitleMap = computed(() => {
  const map = new Map<string, string>();
  props.data.forEach(item => {
    if (item.id && item.taskTitle) {
      map.set(item.id, item.taskTitle);
    }
  });
  return map;
});

function getParentTaskLabel(parentTaskId: string | null) {
  if (!parentTaskId) {
    return '--';
  }
  return taskTitleMap.value.get(parentTaskId) || '--';
}

interface TaskAction {
  key: string;
  tooltip: string;
  icon: object;
  type: 'primary' | 'success' | 'danger';
  onClick: () => void;
}

const STATUS_ACTION_ICON_MAP: Record<string, object> = {
  pause: markRaw(IconMdiPause),
  complete: markRaw(IconMdiCheckCircleOutline),
  resume: markRaw(IconMdiRestart),
  cancel: markRaw(IconMdiCloseCircleOutline)
};

function createActions(row: Api.Project.ProjectTask): TaskAction[] {
  const actions: TaskAction[] = [];

  // 填报：权限码门槛 AND 业务规则（叶子/身份/状态）双重判定
  if (hasReportWorklogPermission() && canReportTaskWorklog(row, props.data, currentUserId.value)) {
    actions.push({
      key: 'report',
      tooltip: '填报',
      icon: markRaw(IconMdiClipboardEditOutline),
      type: 'primary',
      onClick: () => emit('report', row)
    });
  }

  if (canEditTask(row)) {
    actions.push({
      key: 'edit',
      tooltip: '编辑',
      icon: markRaw(IconMdiPencilOutline),
      type: 'primary',
      onClick: () => emit('edit', row)
    });
  }

  if (canDeleteTask(row)) {
    actions.push({
      key: 'delete',
      tooltip: '删除',
      icon: markRaw(IconMdiDeleteOutline),
      type: 'danger',
      onClick: () => emit('delete', row)
    });
  }

  if (!row.availableActions.length) {
    return actions;
  }

  row.availableActions.forEach(action => {
    // auto_start 由后端在填工时时自动触发，无手工开始通道；防御后端误下发，前端不渲染
    if (action.actionCode === 'auto_start') {
      return;
    }
    // 完成任务至少要求任务进度达到 100%；父级提交入口仍保留同样兜底校验。
    if (action.actionCode === 'complete' && row.progressRate < 100) {
      return;
    }
    actions.push({
      key: `status-${action.actionCode}`,
      tooltip: action.actionName,
      icon: markRaw(STATUS_ACTION_ICON_MAP[action.actionCode] ?? IconMdiSync),
      type: action.actionCode === 'cancel' ? 'danger' : 'success',
      onClick: () => emit('status-action', row, action)
    });
  });

  return actions;
}

function handlePageChange(page: number) {
  props.pagination['current-change']?.(page);
}

function handleSizeChange(pageSize: number) {
  props.pagination['size-change']?.(pageSize);
}
</script>

<template>
  <ElCard class="task-table-card" body-class="business-table-card-body">
    <div class="flex-1">
      <ElTable v-loading="loading" :data="data" height="100%" border row-key="id" highlight-current-row>
        <ElTableColumn type="index" label="序号" width="64" align="center" />
        <ElTableColumn label="任务名称" min-width="220" show-overflow-tooltip>
          <template #default="{ row }">
            <span
              v-if="row.taskTitle"
              class="task-table-title"
              role="button"
              tabindex="0"
              @click.stop="emit('detail', row)"
              @keydown.enter.prevent="emit('detail', row)"
            >
              {{ row.taskTitle }}
            </span>
            <span v-else>--</span>
          </template>
        </ElTableColumn>
        <ElTableColumn label="状态" width="100" align="center">
          <template #default="{ row }">
            <ElTag effect="plain" :type="getTaskStatusTagType(row.statusCode)">{{ getTaskStatusName(row) }}</ElTag>
          </template>
        </ElTableColumn>
        <ElTableColumn label="负责人" min-width="120" show-overflow-tooltip>
          <template #default="{ row }">{{ row.ownerNickname || row.ownerId || '--' }}</template>
        </ElTableColumn>
        <ElTableColumn label="父任务" min-width="140" show-overflow-tooltip>
          <template #default="{ row }">{{ getParentTaskLabel(row.parentTaskId) }}</template>
        </ElTableColumn>
        <ElTableColumn label="进度" width="160">
          <template #default="{ row }">
            <div class="task-table-progress">
              <ElProgress :percentage="row.progressRate" :stroke-width="18" text-inside />
            </div>
          </template>
        </ElTableColumn>
        <ElTableColumn label="计划周期" min-width="190" show-overflow-tooltip>
          <template #default="{ row }">{{ formatDateRange(row.plannedStartDate, row.plannedEndDate) }}</template>
        </ElTableColumn>
        <ElTableColumn label="实际周期" min-width="190" show-overflow-tooltip>
          <template #default="{ row }">{{ formatDateRange(row.actualStartDate, row.actualEndDate) }}</template>
        </ElTableColumn>
        <ElTableColumn label="最近更新" width="170">
          <template #default="{ row }">{{ formatDateTime(row.updateTime) }}</template>
        </ElTableColumn>
        <ElTableColumn label="操作" width="210" fixed="right" align="center" class-name="task-operate-column">
          <template #default="{ row }">
            <div class="task-action-cell" @click.stop>
              <ElTooltip v-for="action in createActions(row)" :key="action.key" :content="action.tooltip">
                <ElButton link :type="action.type" class="task-action-btn" @click="action.onClick()">
                  <component :is="action.icon" class="text-15px" />
                </ElButton>
              </ElTooltip>
            </div>
          </template>
        </ElTableColumn>
      </ElTable>
    </div>

    <div v-if="paginationVisible" class="task-table-pagination">
      <ElPagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        v-bind="pagination"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
      />
    </div>
  </ElCard>
</template>

<style scoped lang="scss">
.task-table-card {
  min-height: 0;
  flex: 1;
}

.task-table-title {
  color: var(--el-color-primary);
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

.task-table-progress {
  padding: 0 8px;
}

.task-action-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.task-action-cell :deep(.el-button + .el-button) {
  margin-left: 0;
}

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

.task-table-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

:deep(.el-table__row.current-row > td.el-table__cell) {
  background-color: rgb(64 158 255 / 8%);
}

:deep(.task-operate-column) {
  background-color: var(--el-bg-color, #ffffff) !important;
}

:deep(.el-table__row.current-row) {
  .task-operate-column {
    background-color: var(--el-bg-color, #ffffff) !important;
  }

  td.el-table__cell.is-fixed-right {
    background-color: var(--el-bg-color, #ffffff) !important;
  }
}
</style>
