<script setup lang="ts">
import { computed } from 'vue';
import type { PaginationProps } from 'element-plus';
import { RDMS_REQ_PRIORITY_DICT_CODE } from '@/constants/dict';
import { useAuthStore } from '@/store/modules/auth';
import DictTag from '@/components/custom/dict-tag.vue';
import {
  SHOW_TASK_PARENT_FIELD,
  formatDate,
  formatDateRange,
  getTaskStatusName,
  getTaskStatusTagType
} from '../shared';
import { useTaskActions } from '../composables/use-task-actions';

defineOptions({ name: 'ProjectExecutionTaskTableView' });

interface Props {
  data: Api.Project.ProjectTask[];
  loading: boolean;
  pagination: Partial<PaginationProps & Record<string, any>>;
  /**
   * 跨执行模式：显示「所属执行 pill」、「角色」列；隐藏「父任务」、「实际周期」、「最近更新」列。
   * 「进度」列在两种模式下都显示。
   * 由父组件根据视角类型传入：跨执行视角(my/all) = true；单执行视角 = false。
   */
  crossExecutionMode?: boolean;
}

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 = withDefaults(defineProps<Props>(), {
  crossExecutionMode: false
});
const emit = defineEmits<Emits>();

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

type RoleTagType = 'success' | 'info';

function getRoleLabel(row: Api.Project.ProjectTask): { label: string; type: RoleTagType | undefined } {
  if (!currentUserId.value) return { label: '--', type: undefined };
  if (row.ownerId === currentUserId.value) return { label: '负责人', type: 'success' };
  if (row.assignees?.some(item => item.userId === currentUserId.value)) return { label: '协办', type: 'info' };
  return { label: '旁观', type: undefined };
}

const { createActions } = useTaskActions({
  edit: row => emit('edit', row),
  report: row => emit('report', row),
  remove: row => emit('delete', row),
  statusAction: (row, action) => emit('status-action', row, action)
});

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) || '--';
}

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 v-if="crossExecutionMode" label="所属执行" width="200" show-overflow-tooltip>
          <template #default="{ row }">
            <ElTag
              v-if="row.executionId"
              size="small"
              type="info"
              effect="plain"
              class="task-table-exec-tag"
              :title="row.executionName || ''"
            >
              {{ row.executionName || '未命名执行' }}
            </ElTag>
            <span v-else>--</span>
          </template>
        </ElTableColumn>
        <ElTableColumn v-if="crossExecutionMode" label="角色" width="80" align="center">
          <template #default="{ row }">
            <ElTag v-if="getRoleLabel(row).type" :type="getRoleLabel(row).type" size="small" effect="light">
              {{ getRoleLabel(row).label }}
            </ElTag>
            <span v-else class="task-table-role-mute">{{ getRoleLabel(row).label }}</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="优先级" width="90" align="center">
          <template #default="{ row }">
            <DictTag :dict-code="RDMS_REQ_PRIORITY_DICT_CODE" :value="row.priority" />
          </template>
        </ElTableColumn>
        <ElTableColumn v-if="!crossExecutionMode" label="负责人" min-width="120" show-overflow-tooltip>
          <template #default="{ row }">{{ row.ownerNickname || row.ownerId || '--' }}</template>
        </ElTableColumn>
        <ElTableColumn
          v-if="!crossExecutionMode && SHOW_TASK_PARENT_FIELD"
          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"
                :status="row.progressRate >= 100 ? 'success' : undefined"
                :stroke-width="18"
                text-inside
              />
            </div>
          </template>
        </ElTableColumn>
        <ElTableColumn :label="crossExecutionMode ? '计划完成' : '计划周期'" min-width="190" show-overflow-tooltip>
          <template #default="{ row }">
            <span v-if="crossExecutionMode">{{ row.plannedEndDate || '--' }}</span>
            <span v-else>{{ formatDateRange(row.plannedStartDate, row.plannedEndDate) }}</span>
          </template>
        </ElTableColumn>
        <ElTableColumn v-if="!crossExecutionMode" label="实际周期" min-width="190" show-overflow-tooltip>
          <template #default="{ row }">{{ formatDateRange(row.actualStartDate, row.actualEndDate) }}</template>
        </ElTableColumn>
        <ElTableColumn v-if="!crossExecutionMode" label="最近更新" width="130">
          <template #default="{ row }">{{ formatDate(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-exec-tag {
  max-width: 100%;
}

.task-table-role-mute {
  color: rgb(148 163 184);
  font-size: 12px;
}

.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>
