<script setup>
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
})
const { data } = props

// 状态映射，包括显示的文字和样式
const statusMap = {
  0: { text: '未登记', bgClass: 'bg-yellow-100', textClass: 'text-yellow-700', description: '尚未登记婚姻信息' },
  1: { text: '已婚', bgClass: 'bg-green-100', textClass: 'text-green-700', description: '已登记婚姻，家庭幸福美满' },
  2: { text: '离异', bgClass: 'bg-red-100', textClass: 'text-red-700', description: '离异状态，未来生活可期' },
  3: { text: '离婚冷静期', bgClass: 'bg-blue-100', textClass: 'text-blue-700', description: '目前处于离婚冷静期，请谨慎决策' },
}

// 根据 `data.status` 确定当前状态，默认值为 “无相关记录”
const currentStatus = data.status !== undefined ? statusMap[data.status] || statusMap['0'] : { text: '无相关记录', bgClass: 'bg-gray-200', textClass: 'text-gray-500', description: '暂无婚姻相关记录' }
</script>

<template>
  <div class="card">
    <div class="status-info mb-4 flex flex-col items-center">
      <div
        :class="`status-label rounded-full px-6 py-3 text-center font-bold shadow-md ${currentStatus.bgClass} ${currentStatus.textClass}`"
      >
        {{ currentStatus.text }}
      </div>
      <p class="status-description mt-3 text-sm text-gray-600">
        {{ currentStatus.description }}
      </p>
    </div>

    <!-- <div class="additional-info mt-6 text-center">
      <p class="text-xs text-gray-500">
        <strong>数据更新时间：</strong> {{ lastUpdated }}
      </p>
      <p class="text-xs text-gray-500">
        本数据仅供参考，如有疑问请联系相关部门。
      </p>
    </div> -->
  </div>
</template>

<style lang="scss" scoped>
.status-info {
  text-align: center;
}

.status-label {
  font-size: 1.25rem;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.status-description {
  color: #4a5568;
  margin-top: 0.5rem;
  font-weight: 500;
}

.additional-info p {
  margin-top: 0.5rem;
}
</style>
