<template>
  <aside v-if="result" class="approval-batch-result" aria-live="polite">
    <header>
      <div>
        <span>批量审批结果</span>
        <strong>{{ statusLabel }}</strong>
      </div>
      <button type="button" aria-label="关闭批量审批结果" @click="emit('close')">
        <i class="mdi mdi-close"></i>
      </button>
    </header>

    <div class="approval-batch-summary">
      <span class="success">成功 {{ successCount }}</span>
      <span v-if="result.blockedCount" class="warning">风险阻断 {{ result.blockedCount }}</span>
      <span v-if="result.conflictCount" class="warning">状态冲突 {{ result.conflictCount }}</span>
      <span v-if="result.forbiddenCount" class="danger">无权限 {{ result.forbiddenCount }}</span>
      <span v-if="result.failedCount" class="danger">失败 {{ result.failedCount }}</span>
    </div>

    <ul v-if="result.items?.length">
      <li v-for="item in result.items" :key="`${item.taskId}:${item.status}`">
        <em :class="item.status">{{ itemStatusLabel(item.status) }}</em>
        <div>
          <strong>{{ item.claimId || item.taskId }}</strong>
          <span>{{ item.message || item.code || '服务器未返回详细说明。' }}</span>
        </div>
      </li>
    </ul>

    <footer v-if="retryableCount">
      <button type="button" @click="emit('retry-failed')">
        重新处理保留的 {{ retryableCount }} 项
      </button>
    </footer>
  </aside>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  result: { type: Object, default: null },
  retryableCount: { type: Number, default: 0 }
})

const emit = defineEmits(['close', 'retry-failed'])

const successCount = computed(() =>
  Number(props.result?.succeededCount || 0) + Number(props.result?.replayedCount || 0)
)

const statusLabel = computed(() => {
  if (props.result?.status === 'succeeded') return '全部处理成功'
  if (props.result?.status === 'partial') return '部分任务未完成'
  return '批量处理失败'
})

function itemStatusLabel(status) {
  return {
    succeeded: '成功',
    replayed: '已处理',
    conflict: '冲突',
    blocked: '阻断',
    forbidden: '无权限',
    failed: '失败'
  }[String(status || '')] || '未知'
}
</script>

<style scoped>
.approval-batch-result {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #dbe5ef;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

.approval-batch-result header,
.approval-batch-result header > div,
.approval-batch-result li,
.approval-batch-summary {
  display: flex;
  align-items: center;
}

.approval-batch-result header {
  justify-content: space-between;
  gap: 12px;
}

.approval-batch-result header > div {
  gap: 10px;
}

.approval-batch-result header span,
.approval-batch-result li span {
  color: #64748b;
  font-size: 12px;
}

.approval-batch-result header strong,
.approval-batch-result li strong {
  color: #0f172a;
  font-size: 13px;
}

.approval-batch-result header button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
}

.approval-batch-summary {
  flex-wrap: wrap;
  gap: 8px;
}

.approval-batch-summary span,
.approval-batch-result li em {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.success,
.approval-batch-result li em.succeeded,
.approval-batch-result li em.replayed {
  background: #ecfdf5;
  color: #047857;
}

.warning,
.approval-batch-result li em.blocked,
.approval-batch-result li em.conflict {
  background: #fffbeb;
  color: #b45309;
}

.danger,
.approval-batch-result li em.forbidden,
.approval-batch-result li em.failed {
  background: #fef2f2;
  color: #b91c1c;
}

.approval-batch-result ul {
  display: grid;
  gap: 7px;
  max-height: 260px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.approval-batch-result li {
  align-items: flex-start;
  gap: 9px;
  padding: 9px;
  border: 1px solid #edf2f7;
  border-radius: 6px;
  background: #f8fafc;
}

.approval-batch-result li div {
  display: grid;
  gap: 3px;
}

.approval-batch-result footer {
  display: flex;
  justify-content: flex-end;
}

.approval-batch-result footer button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--theme-primary);
  border-radius: 6px;
  background: #fff;
  color: var(--theme-primary-active);
  font-weight: 800;
}
</style>
