<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: Object,
        required: true,
    },
});
console.log(props.data)
// 正确解构props.data中的字段并处理默认值
const {
    entout: PropEntout = [],
    sxbzxr: PropSxbzxr = [],
    xgbzxr: PropXgbzxr = []
} = props.data || {}

// 安全获取entout数据(带响应式)
const entout = ref(PropEntout[0]?.entout || {
    administrative: {},
    bankrupt: {},
    cases_tree: { criminal: [] },
    civil: {},
    count: {},
    criminal: { cases: [], count: {} },
    implement: {},
    preservation: {}
})

// 获取其他字段(按需添加响应式)
const sx = ref(PropSxbzxr[0]?.sxbzxr || [])
const xg = ref(PropXgbzxr[0]?.xgbzxr || [])
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 chartOptions = ref({});
const chartDom = ref(null); // 用于绑定 DOM 容器
const totalCases = ref(0);

onMounted(() => {
    // 计算每种案件的数量
    const caseCounts = {
        criminal: entout.value.criminal?.cases?.length || 0,
        civil: entout.value.civil?.cases?.length || 0,
        administrative: entout.value.administrative?.cases?.length || 0,
        preservation: entout.value.preservation?.cases?.length || 0,
        implement: entout.value.implement?.cases?.length || 0,
        bankrupt: entout.value.bankrupt?.cases?.length || 0,
        sx: sx.value.length,
        xg: xg.value.length
    };

    // 计算涉诉总案件数
    totalCases.value = Object.values(caseCounts).reduce(
        (sum, count) => sum + count,
        0
    );

    chartOptions.value = {
        title: {
            // text: "涉诉案件数",
            // subtext: totalCases.toString(),
            // left: "35%", // 与 series.center 的第一个值保持一致
            // top: "50%", // 与 series.center 的第二个值保持一致
            // textAlign: "center", // 确保文本居中
            // textStyle: {
            //     fontSize: 16,
            //     fontWeight: "bold",
            //     color: "#333",
            // },
            // subtextStyle: {
            //     fontSize: 24,
            //     fontWeight: "bold",
            //     color: "#EE6666",
            // },
        },
        tooltip: {
            trigger: "item",
            formatter: "{b}: {c}件 ({d}%)",
        },
        legend: {
            orient: "vertical",
            right: "0", // 调整到右边
            top: "middle", // 垂直居中
            itemGap: 10, // 图例项间距
            textStyle: {
                fontSize: 12,
                color: "#666",
            },
        },
        series: [
            {
                name: "案件类型",
                type: "pie",
                radius: ["30%", "60%"], // 调整环形图半径
                center: ["30%", "50%"], // 调整环形图的位置
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 8, // 添加圆角效果
                    borderColor: "#fff",
                    borderWidth: 2,
                },
                label: {
                    show: false, // 隐藏标签
                    position: "center",
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: "18",
                        fontWeight: "bold",
                        formatter: "{b}\n{c}件",
                    },
                },
                labelLine: {
                    show: false,
                },
                data: [
                    {
                        value: caseCounts.criminal,
                        name: `刑事案件${caseCounts.criminal}件`,
                    },
                    {
                        value: caseCounts.civil,
                        name: `民事案件${caseCounts.civil}件`,
                    },
                    {
                        value: caseCounts.administrative,
                        name: `行政案件${caseCounts.administrative}件`,
                    },
                    {
                        value: caseCounts.preservation,
                        name: `非诉保全审查${caseCounts.preservation}件`,
                    },
                    {
                        value: caseCounts.implement,
                        name: `执行案件${caseCounts.implement}件`,
                    },
                    {
                        value: caseCounts.bankrupt,
                        name: `强制清算与破产${caseCounts.bankrupt}件`,
                    },
                    {
                        value: caseCounts.bankrupt,
                        name: `失信${caseCounts.sx}件`,
                    }, {
                        value: caseCounts.bankrupt,
                        name: `限高${caseCounts.xg}件`,
                    },
                ],
            },
        ],
    };

    // 初始化 ECharts 实例
    const chartInstance = echarts.init(chartDom.value);
    chartInstance.setOption(chartOptions.value);

    // 监听窗口大小变化，动态调整图表
    window.addEventListener("resize", () => {
        chartInstance.resize();
    });
});

const caseTypes = computed(() => {
    const data = entout.value;
    return {
        civil: data.civil?.cases || [],
        criminal: data.criminal?.cases || [],
        administrative: data.administrative?.cases || [],
        preservation: data.preservation?.cases || [],
        implement: data.implement?.cases || [],
        bankrupt: data.bankrupt?.cases || [],
        sx: sx.value,
        xg: xg.value
    };
});

function getCaseTypeName(caseType) {
    const caseTypeNames = {
        civil: "民事",
        criminal: "刑事",
        administrative: "行政",
        preservation: "非诉保全审查",
        implement: "执行",
        bankrupt: "强制清算与破产",
        sx: "失信",
        xg: "限高"
    };
    return caseTypeNames[caseType] || caseType;
}
</script>

<template>
    <div class="card">
        <div class="flex flex-col gap-y-4">
            <!-- 涉诉案件统计 -->
            <LTitle title="涉诉案件统计" type="blue-green" />
            <div class="font-bold ml-4 text-lg">
                涉诉案件数共
                <span class="text-red-500 text-2xl font-bold">{{
                    totalCases
                }}</span>件
            </div>
            <div ref="chartDom" style="
                    width: 100%;
                    height: 300px;
                    margin-top: -40px;
                    margin-bottom: -40px;
                "></div>
            <template v-for="(caseType, typeName) in caseTypes" :key="typeName">
                <LTitle :title="` ${getCaseTypeName(typeName)}案件`" type="blue-green" />
                <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 || "-" }}
                                </div>
                            </div>
                            <div class="case-row">
                                <div class="case-label">案件类型:</div>
                                <div class="case-value">
                                    {{ caseData.n_ajlx || "-" }}
                                </div>
                            </div>
                            <div class="case-row">
                                <div class="case-label">经办法院:</div>
                                <div class="case-value">
                                    {{ caseData.n_jbfy || "-" }}
                                </div>
                            </div>
                            <div class="case-row">
                                <div class="case-label">立案日期:</div>
                                <div class="case-value">
                                    {{ caseData.d_larq || "-" }}
                                </div>
                            </div>
                            <div class="case-row">
                                <div class="case-label">结案方式:</div>
                                <div class="case-value">
                                    {{ caseData.n_jafs || "-" }}
                                </div>
                            </div>
                            <div class="case-row">
                                <div class="case-label">当事人信息:</div>
                                <div class="case-value">
                                    <div v-for="dsr in caseData.c_dsrxx" :key="dsr.c_mc">
                                        {{ dsr.c_mc }} -
                                        {{
                                            dsr.n_ssdw
                                        }}
                                    </div>
                                </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>
