<script setup>
import LTitle from "@/components/LTitle.vue";

const props = defineProps({
    data: {
        type: Object,
        required: false,
        default: () => null
    },
});
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: "目前处于离婚冷静期，请谨慎决策",
    },
};

// 无记录时的状态
const noRecordStatus = {
    text: "无相关记录",
    bgClass: "bg-gray-200",
    textClass: "text-gray-500",
    description: "暂无婚姻相关记录",
};

// 根据 `data.status` 确定当前状态，默认值为 "无相关记录"
const currentStatus = !data ? noRecordStatus :
    (data.status !== undefined ? statusMap[data.status] || statusMap["0"] : noRecordStatus);
</script>

<template>
    <div class="card">
        <div class="status-info 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>
</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>
