<script setup lang="ts">
import { DIALOG_WIDTH } from "../../../constants/ui";

const visible = defineModel<boolean>({ required: true });

defineProps<{
  auditProgressRows: any[];
  auditProgressPageNo: number;
  auditProgressPageSize: number;
  auditProgressTotal: number;
  resolveAuditTime: (row: any) => string;
  detailTimelineType: (status: unknown) => "success" | "warning" | "danger" | "primary" | "info";
  toZhAuditNode: (value: unknown) => string;
  toZhStatus: (value: unknown) => string;
  detailStatusTagType: (status: unknown) => "success" | "danger" | "warning" | "info";
}>();

defineEmits<{
  pageChange: [page: number];
  pageSizeChange: [size: number];
}>();
</script>

<template>
  <el-dialog v-model="visible" title="审核进度与意见" :width="DIALOG_WIDTH.lg">
    <el-timeline v-if="auditProgressRows.length > 0" style="padding-left: 8px">
      <el-timeline-item
        v-for="item in auditProgressRows"
        :key="`${item.id || item.taskId || item.node}-${resolveAuditTime(item)}`"
        :timestamp="resolveAuditTime(item)"
        placement="top"
        :type="detailTimelineType(item.status)"
      >
        <el-card shadow="never">
          <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
            <span class="fw-600">{{ toZhAuditNode(item.node) }}</span>
            <el-tag size="small" :type="detailStatusTagType(item.status)">{{ toZhStatus(item.status) }}</el-tag>
            <span class="text-regular">处理人：{{ item.assigneeUserName || item.assigneeName || "-" }}</span>
          </div>
          <div class="mt-xs text-regular">
            审核意见：{{ item.opinion || "（未填写）" }}
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <el-empty v-else description="暂无阶段审核意见" />
    <div class="flex-end mt-md">
      <el-pagination
        :current-page="auditProgressPageNo"
        :page-size="auditProgressPageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="auditProgressTotal"
        @current-change="$emit('pageChange', $event)"
        @size-change="$emit('pageSizeChange', $event)"
      />
    </div>
    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>
