<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,
    },
});
const fieldLabel = [
    { "field": "n_jbfy_cj", "label": "法院层级" },
    { "field": "n_ajjzjd", "label": "案件进展阶段" },
    { "field": "n_slcx", "label": "审理程序" },
    { "field": "c_ssdy", "label": "所属地域" },
    { "field": "n_ssdw", "label": "诉讼地位" },
    { "field": "larq_stat", "label": "涉案时间分布" },
    { "field": "n_laay", "label": "立案案由" },
    { "field": "n_laay_tree", "label": "立案案由详细" },
    { "field": "n_sqzxbdje", "label": "申请执行标的金额" },
    { "field": "n_wzxje", "label": "未执行金额" },
    { "field": "n_sjdwje", "label": "实际到位金额" },
    { "field": "n_jabdje", "label": "结案标的金额" },
    { "field": "n_dzzm", "label": "定罪罪名" },
    { "field": "n_dzzm_tree", "label": "定罪罪名详细" },
    { "field": "n_pcjg", "label": "判处结果" },
    { "field": "d_jarq", "label": "结案时间" },
    { "field": "n_jaay", "label": "结案案由" },
    { "field": "n_jaay_tree", "label": "结案案由详细" },
    { "field": "c_gkwsdsr", "label": "当事人说明" },
    { "field": "c_gkws_pj", "label": "判决结果" },
    { "field": "n_fzje", "label": "犯罪金额" },
    { "field": "n_pcpcje", "label": "判处赔偿金额" }
]
const collapse = ref([]);
const jsonData = ref({});
const chartOptions = ref({});
const chartDom = ref(null); // 用于绑定 DOM 容器
const totalCases = ref(0);
onMounted(() => {
    jsonData.value = props.data;
    // 计算每种案件的数量
    const caseCounts = {
        criminal: jsonData.value.criminal?.cases?.length || 0,
        civil: jsonData.value.civil?.cases?.length || 0,
        administrative: jsonData.value.administrative?.cases?.length || 0,
        preservation: jsonData.value.preservation?.cases?.length || 0,
        implement: jsonData.value.implement?.cases?.length || 0,
        bankrupt: jsonData.value.bankrupt?.cases?.length || 0,
    };

    // 计算涉诉总案件数
    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}件`,
                    },
                ],
            },
        ],
    };

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

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

const caseTypes = computed(() => {
    const data = jsonData.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 || [],
    };
});

function getCaseTypeName(caseType) {
    const caseTypeNames = {
        civil: "民事",
        criminal: "刑事",
        administrative: "行政",
        preservation: "非诉保全审查",
        implement: "执行",
        bankrupt: "强制清算与破产",
    };
    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}`">
                            <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-right text-gray-500;
}

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