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

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

// 获取限高数据
const xg = ref(props.data || []);

const fieldLabel = [
    // ================= 案件基础信息 =================
    { "field": "n_jbfy", "label": "经办法院" },

    { "field": "n_jbfy_cj", "label": "法院所属层级" },
    { "field": "c_ssdy", "label": "所属地域" },

    // ================= 时间维度 =================
    { "field": "d_larq", "label": "立案时间" },
    { "field": "larq_stat", "label": "涉案时间分布" },
    { "field": "d_jarq", "label": "结案时间" },

    // ================= 案由与罪名 =================
    { "field": "n_laay", "label": "立案案由" },
    { "field": "n_laay_tag", "label": "立案案由标签" },
    { "field": "n_laay_tree", "label": "立案案由详细" },
    { "field": "n_jaay", "label": "结案案由" },

    { "field": "n_jaay_tag", "label": "结案案由标签" },
    { "field": "n_jaay_tree", "label": "结案案由详细" },
    { "field": "n_dzzm", "label": "定罪罪名" },
    { "field": "n_dzzm_tree", "label": "定罪罪名详细" },

    // ================= 当事人与诉讼 =================
    { "field": "c_gkws_dsr", "label": "当事人" },
    { "field": "n_dsrlx", "label": "当事人类型" },
    { "field": "n_ssdw", "label": "诉讼地位" },
    { "field": "n_ssdw_ys", "label": "一审诉讼地位" },
    { "field": "c_gkws_glah", "label": "相关案件号" },

    // ================= 审理与判决 =================
    { "field": "n_slcx", "label": "审理程序" },
    { "field": "c_slfsxx", "label": "审理方式信息" },
    { "field": "n_ajjzjd", "label": "案件进展阶段" },
    { "field": "n_pcjg", "label": "判处结果" },
    { "field": "c_gkws_pjjg", "label": "判决结果" },
    { "field": "n_pj_victory", "label": "胜诉估计" },

    // ================= 金额与执行 =================
    // --- 起诉金额 ---
    { "field": "n_qsbdje_level", "label": "起诉标的金额等级" },
    { "field": "n_qsbdje", "label": "起诉标的金额" },
    { "field": "n_qsbdje_gj_level", "label": "起诉标的金额估计等级" },
    { "field": "n_qsbdje_gj", "label": "起诉标的金额估计" },

    // --- 结案金额 ---
    { "field": "n_jabdje_level", "label": "结案标的金额等级" },
    { "field": "n_jabdje", "label": "结案标的金额" },
    { "field": "n_jabdje_gj_level", "label": "结案标的金额估计等级" },
    { "field": "n_jabdje_gj", "label": "结案标的金额估计" },

    // --- 执行金额 ---
    { "field": "n_sqzxbdje", "label": "申请执行标的金额" },
    { "field": "n_sjdwje", "label": "实际到位金额" },
    { "field": "n_wzxje", "label": "未执行金额" },

    // --- 其他金额 ---
    { "field": "n_fzje_level", "label": "犯罪金额等级" },
    { "field": "n_fzje", "label": "犯罪金额" },
    { "field": "n_bqqpcje_level", "label": "被请求赔偿金额等级" },
    { "field": "n_bqqpcje", "label": "被请求赔偿金额" },
    { "field": "n_pcpcje_level", "label": "判处赔偿金额等级" },
    { "field": "n_pcpcje", "label": "判处赔偿金额" },
    { "field": "n_pcpcje_gj_level", "label": "判处赔偿金额估计等级" },
    { "field": "n_pcpcje_gj", "label": "判处赔偿金额估计" },
    { "field": "n_ccxzxje_level", "label": "财产刑执行金额等级" },
    { "field": "n_ccxzxje", "label": "财产刑执行金额" },
    { "field": "n_ccxzxje_gj_level", "label": "财产刑执行金额估计等级" },
    { "field": "n_ccxzxje_gj", "label": "财产刑执行金额估计" },

    // ================= 其他辅助字段 =================
    { "field": "n_sqbqse_level", "label": "申请保全数额等级" },
    { "field": "n_sqbqse", "label": "申请保全数额" },
    { "field": "c_sqbqbdw", "label": "申请保全标的物" },

    // ================= 失信被执行人专项 、限制高消费专项 =================
    { "field": "xb", "label": "性别" },
    { "field": "zxfy", "label": "执行法院" },
    { "field": "sf", "label": "省份" },
    { "field": "ah", "label": "案号" },
    { "field": "zxyjwh", "label": "执行依据文号" },
    { "field": "zxyjdw", "label": "执行依据单位" },
    { "field": "yw", "label": "生成法律文书确定的义务" },
    { "field": "lxqk", "label": "履行情况" },
    { "field": "xwqx", "label": "失信行为情形" },
    { "field": "pjje_gj", "label": "失信金额估计" },
    { "field": "larq", "label": "立案日期" },
    { "field": "fbrq", "label": "发布日期" },
];
const collapse = ref([]);
const totalCases = ref(0);

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

const caseTypes = computed(() => {
    return {
        xg: xg.value
    };
});

function getCaseTypeName(caseType) {
    const caseTypeNames = {
        xg: "限高"
    };
    return caseTypeNames[caseType] || caseType;
}
</script>

<template>
    <div class="card">
        <div class="flex flex-col gap-y-4">
            <!-- 限高案件统计 -->
            <!-- <LTitle title="限制高消费案件统计" type="blue-green" /> -->
            <template v-for="(caseType, typeName) in caseTypes" :key="typeName">
                <LTitle :title="` ${getCaseTypeName(typeName)}案件`" type="blue-green" />
                <div class="font-bold ml-4 text-lg">
                    限高案件数共
                    <span class="text-red-500 text-2xl font-bold">{{
                        totalCases
                    }}</span>件
                </div>
                <div v-if="!caseType || caseType.length === 0">
                    无记录，或数据未被公开
                </div>
                <template v-else>
                    <van-collapse v-model="collapse">
                        <van-collapse-item v-for="(caseData, index) in caseType" :key="index" custom-class="collapse"
                            :name="index" :title="`案件: ${caseData.c_ah || caseData.ah}`">
                            <div class="case-row">
                                <div class="case-label">案号:</div>
                                <div class="case-value">
                                    {{ caseData.c_ah || caseData.ah || "-" }}
                                </div>
                            </div>
                            <template v-for="(item, index) in fieldLabel" :key="index">
                                <div class="case-row" v-if="caseData[item.field]">
                                    <div class="case-label">{{ item.label }}:</div>
                                    <div class="case-value">{{ caseData[item.field] || '无' }}</div>
                                </div>
                            </template>
                        </van-collapse-item>
                    </van-collapse>
                </template>
            </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;
}

:deep(.van-cell) {}
</style>
