<script setup>
const props = defineProps({
    data: {
        type: Object,
        required: false,
        default: () => null,
    },
});
console.log("data", props.data);
// 获取实际的数据对象
const actualData = props.data?.data;

// 日期格式化函数，将 2009-04-16 转换为 2009年04月16日
const formatDate = (dateStr) => {
    if (!dateStr) return "";
    const [year, month, day] = dateStr.split("-");
    return `${year}年${month}月${day}日`;
};

// 状态映射，根据 op_type 判断
const statusMap = {
    IA: {
        text: "已婚",
        bgClass: "bg-green-100",
        textClass: "text-green-700",
        description: "已登记婚姻，家庭幸福美满",
    },
    IB: {
        text: "离异",
        bgClass: "bg-red-100",
        textClass: "text-red-700",
        description: "离异状态，未来生活可期",
    },
    INR: {
        text: "未登记",
        bgClass: "bg-yellow-100",
        textClass: "text-yellow-700",
        description: "未进行民政登记婚姻",
    },
};

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

// 根据 op_type 确定当前状态，默认值为 "无相关记录"
const currentStatus = !actualData
    ? noRecordStatus
    : actualData.op_type
        ? { ...statusMap[actualData.op_type], opDate: formatDate(actualData.op_date) }
        : 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>
            <div v-if="currentStatus.opDate" class="op-date-container mt-4 px-4 py-2 bg-blue-50 rounded-lg border border-blue-200">
                <p class="op-date text-sm font-medium text-blue-700">
                    登记日期：{{ currentStatus.opDate }}
                </p>
            </div>
            <p v-html="currentStatus.description" class="status-description mt-3 text-sm text-gray-600"></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;
}

.op-date-container {
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
}

.op-date-container:hover {
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.15);
}
</style>
