<template>
  <article v-if="!isApplicationDocument" class="detail-card panel">
    <div class="detail-card-head">
      <div>
        <h3>关联单据信息</h3>
        <p>展示本次报销关联的前置申请，便于核对申请内容、天数、事由和预计金额。</p>
      </div>
    </div>
    <div v-if="relatedApplicationFactItems.length" class="application-detail-facts related-application-facts">
      <div
        v-for="item in relatedApplicationFactItems"
        :key="item.key"
        class="application-detail-fact related-application-fact"
        :class="{ highlight: item.highlight, emphasis: item.emphasis }"
      >
        <span>{{ item.label }}</span>
        <strong>{{ item.value }}</strong>
      </div>
    </div>
    <div v-else class="related-application-empty">
      <strong>暂未识别到关联申请单</strong>
      <p>差旅报销应先关联已审批的申请单，请核对本单据是否由申请单生成或已在智能录入中完成关联。</p>
    </div>
  </article>
</template>

<script setup>
defineProps({
  isApplicationDocument: { type: Boolean, default: false },
  relatedApplicationFactItems: { type: Array, default: () => [] }
})
</script>

<style scoped src="../../assets/styles/components/travel-request-related-application-card.css"></style>
