<template>
  <ConfirmDialog
    :open="open"
    :badge="badge"
    badge-tone="info"
    :title="title"
    :description="description"
    cancel-text="返回核对"
    :confirm-text="confirmText"
    :busy-text="busyText"
    confirm-tone="primary"
    confirm-icon="mdi mdi-check-circle-outline"
    :busy="busy"
    @close="emit('close')"
    @confirm="emit('confirm')"
  >
    <div class="submit-confirm-summary" aria-label="领导审批通过摘要">
      <div class="submit-confirm-row">
        <span>单据编号</span>
        <strong>{{ documentNo }}</strong>
      </div>
      <div class="submit-confirm-row">
        <span>当前节点</span>
        <strong>{{ node }}</strong>
      </div>
      <div class="submit-confirm-row">
        <span>{{ summaryLabel }}</span>
        <strong>{{ nextStage }}</strong>
      </div>
      <div class="submit-confirm-row">
        <span>{{ opinionTitle }}</span>
        <strong>{{ normalizedOpinion }}</strong>
      </div>
    </div>
  </ConfirmDialog>
</template>

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

import ConfirmDialog from '../shared/ConfirmDialog.vue'

const props = defineProps({
  open: { type: Boolean, required: true },
  badge: { type: String, required: true },
  title: { type: String, required: true },
  description: { type: String, required: true },
  confirmText: { type: String, required: true },
  busyText: { type: String, required: true },
  busy: { type: Boolean, required: true },
  documentNo: { type: [String, Number], required: true },
  node: { type: String, default: '' },
  summaryLabel: { type: String, required: true },
  nextStage: { type: String, required: true },
  opinionTitle: { type: String, required: true },
  opinion: { type: String, default: '' }
})

const emit = defineEmits(['close', 'confirm'])

const normalizedOpinion = computed(() => props.opinion.trim() || '未填写')
</script>
