<script setup>
import LTitle from "@/components/LTitle.vue";
import { defineProps, onMounted, ref, computed } from "vue";

const props = defineProps({
    data: {
        type: Array,
        required: true,
    },
});

// 兼容data为空对象的情况
const isEmptyData = computed(() => !props.data || Array.isArray(props.data) && props.data.length === 0 || Object.keys(props.data).length === 0);
const exitRestrictions = ref(Array.isArray(props.data) ? props.data : []);

// 定义展示的字段标签
const fieldLabels = [
    { field: "executedPerson", label: "被执行人" },
    { field: "case_code", label: "案号" },
    { field: "restrictedPerson", label: "被限制人" },
    { field: "publishDate", label: "发布日期" },
    { field: "executedAddress", label: "执行地址" },
    { field: "courtTel", label: "法院电话" },
    { field: "execMoney", label: "执行金额" },
    { field: "court", label: "法院" },
    { field: "applicant", label: "申请人" }
];

const collapse = ref([]);
const totalCases = ref(0);

onMounted(() => {
    // 计算限制出境案件数量
    totalCases.value = exitRestrictions.value.length;
    // 默认展开所有案件
    collapse.value = Array.from({ length: totalCases.value }, (_, i) => i);
});

// 格式化金额的函数
const formatMoney = (money) => {
    if (!money) return "-";
    return `${money} 元`;
};
</script>

<template>
    <div class="card">
        <div class="flex flex-col gap-y-4">
            <LTitle title="限制出境记录" type="blue-green" />

            <template v-if="isEmptyData">
                <div class="flex flex-col items-center justify-center p-6">
                    <van-icon name="passed" size="60" color="#10b981" />
                    <div class="mt-4 text-lg font-bold text-green-600">无限制出境记录</div>
                    <div class="mt-2 text-gray-500 text-center">该对象暂无相关记录，未被限制出境</div>
                </div>
            </template>

            <template v-else>
                <div class="font-bold ml-4 text-lg">
                    限制出境记录共
                    <span class="text-red-500 text-2xl font-bold">{{ totalCases }}</span>件
                </div>
                <van-collapse v-model="collapse">
                    <van-collapse-item v-for="(caseData, index) in exitRestrictions" :key="index"
                        custom-class="collapse" :name="index" :title="`案件: ${caseData.case_code || '未知案号'}`">
                        <template v-for="(item, idx) in fieldLabels" :key="idx">
                            <div class="case-row" v-if="caseData[item?.field]">
                                <div class="case-label">{{ item?.label }}:</div>
                                <div class="case-value">
                                    {{ item?.field === 'execMoney' ? formatMoney(caseData[item?.field]) :
                                        caseData[item?.field]
                                        || "-" }}
                                </div>
                            </div>
                        </template>
                    </van-collapse-item>
                </van-collapse>
            </template>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.case-row {
    @apply flex items-start justify-between my-2;
}

.case-label {
    @apply flex-shrink-0 font-bold text-gray-700;
}

.case-value {
    @apply text-left text-gray-500;
}
</style>