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

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

const chartInstance = ref(null); // ECharts 实例
const chartRef = ref(null); // 图表容器 DOM
const riskLevel = ref("");
const riskLevelText = ref("");
const riskLevelClass = ref("");
const riskInfoList = ref([
    {
        level: "无风险",
        description: "无任何不良风险记录",
        class: "text-green-600",
    },
    { level: "低风险", description: "涉稳、寻衅滋事", class: "text-yellow-500" },
    {
        level: "中风险",
        description: "吸毒、涉毒、犯罪前科",
        class: "text-orange-500",
    },
    {
        level: "高风险",
        description: "涉案人员、在逃、犯罪嫌疑人",
        class: "text-red-500",
    },

]);

// 根据风险等级动态设置图表配置
function getChartOption(level) {
    const valueMap = {
        A: 10, // 无风险
        F: 30, // 低风险
        C: 60, // 中风险
        D: 60, // 中风险
        B: 90, // 高风险
        E: 90, // 高风险
        default: 0, // 未知风险
    };
    const labelNameMap = {
        A: "无风险", // 无风险
        F: "低风险", // 低风险
        C: "中风险", // 中风险
        D: "中风险", // 中风险
        B: "高风险", // 高风险
        E: "高风险", // 高风险
        default: "未知风险", // 未知风险
    };
    const value = valueMap[level] || valueMap.default;
    const labelName = labelNameMap[level] || valueMap.default;
    return {
        tooltip: {
            formatter: "{a} <br/>{b} : {c}",
        },
        series: [
            {
                name: "风险分值",
                type: "gauge",
                min: 0,
                max: 100,
                splitNumber: 5, // 分成 5 个区间
                radius: "90%",
                detail: {
                    formatter: "{value}", // 显示分值
                    fontSize: 18,
                    fontWeight: "bold",
                    color: "#333",
                },
                data: [{ value, name: labelName }],
                axisLine: {
                    lineStyle: {
                        width: 15,
                        shadowBlur: 15, // 添加阴影
                        shadowColor: "rgba(0, 0, 0, 0.3)", // 阴影颜色
                        color: [
                            [
                                0.25,
                                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: "#10B981" },
                                    { offset: 1, color: "#34D399" },
                                ]),
                            ], // 无风险渐变
                            [
                                0.5,
                                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: "#FFC300" },
                                    { offset: 1, color: "#EAB308" },
                                ]),
                            ], // 低风险渐变
                            [
                                0.75,
                                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: "#F97316" },
                                    { offset: 1, color: "#E68416" },
                                ]),
                            ], // 中风险渐变
                            [
                                1,
                                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: "#EF4444" },
                                    { offset: 1, color: "#FF6347" },
                                ]),
                            ], // 高风险渐变
                        ],
                    },
                },
                pointer: {
                    icon: "path://M512 0L560 200H464L512 0Z", // 自定义指针形状
                    length: "70%", // 指针长度
                    width: 8,
                    itemStyle: {
                        color: "#FF6347", // 指针颜色
                        borderWidth: 2,
                        borderColor: "#FF4500",
                        shadowBlur: 8, // 添加阴影
                        shadowColor: "rgba(255, 99, 71, 0.5)", // 阴影颜色
                    },
                },
                title: {
                    offsetCenter: [0, "75%"], // 标题位置
                    fontSize: 20,
                    fontWeight: "bold",
                },
                detail: {
                    formatter: "{value}", // 显示分值
                    fontSize: 18,
                    fontWeight: "bold",
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: "#FF7F50" },
                        { offset: 1, color: "#FF4500" },
                    ]), // 渐变文本颜色
                },
                anchor: {
                    show: true, // 显示圆心锚点
                    size: 14,
                    itemStyle: {
                        color: "#FF6347", // 圆心颜色
                        borderWidth: 2,
                        borderColor: "#FF4500",
                        shadowBlur: 8, // 添加阴影
                        shadowColor: "rgba(255, 69, 0, 0.5)", // 阴影颜色
                    },
                },
                splitLine: {
                    length: 20, // 刻度线长度
                    lineStyle: {
                        width: 2,
                        color: "#999",
                        shadowBlur: 5, // 刻度阴影
                        shadowColor: "rgba(0, 0, 0, 0.2)",
                    },
                },
                axisTick: {
                    length: 10, // 刻度线长度
                    lineStyle: {
                        width: 1,
                        color: "#999",
                        shadowBlur: 5, // 刻度阴影
                        shadowColor: "rgba(0, 0, 0, 0.2)",
                    },
                },
                axisLabel: {
                    color: "#666", // 标签颜色
                    fontSize: 12,
                    shadowBlur: 5,
                    shadowColor: "rgba(0, 0, 0, 0.2)", // 标签阴影
                },
            },
        ],
    };
}

// 根据风险等级动态设置文本和样式
function setRiskProperties(level) {
    switch (level) {
        case "A":
            riskLevelText.value = "无风险";
            riskLevelClass.value = "text-green-600";
            break;
        case "F":
            riskLevelText.value = "低风险";
            riskLevelClass.value = "text-lime-600";
            break;
        case "C":
        case "D":
            riskLevelText.value = "中风险";
            riskLevelClass.value = "text-orange-400";
            break;
        case "B":
        case "E":
            riskLevelText.value = "高风险";
            riskLevelClass.value = "text-red-500";
            break;
        default:
            riskLevelText.value = "未知风险";
            riskLevelClass.value = "text-gray-500";
    }
}

// 初始化图表
function initChart() {
    if (!chartRef.value) return;

    if (!chartInstance.value) {
        chartInstance.value = echarts.init(chartRef.value);
    }

    const option = getChartOption(riskLevel.value);
    chartInstance.value.setOption(option);
}

// 更新图表
function updateChart(level) {
    const option = getChartOption(level);
    chartInstance.value.setOption(option, true);
}

onMounted(() => {
    riskLevel.value = props.data.risk_level;
    setRiskProperties(riskLevel.value);
    initChart();
});

watch(riskLevel, (newLevel) => {
    setRiskProperties(newLevel);
    updateChart(newLevel);
});
</script>

<template>
    <div class="card">
        <div class="span-2xl font-bold" :class="riskLevelClass">
            <div ref="chartRef" class="chart-container"></div>
        </div>
        <div class="mt-6">
            <LTitle title="信息解读" type="blue-green" />
            <div class="mt-4 rounded-lg bg-slate-100/80 px-4 py-2 space-y-4">
                <div v-for="(item, index) in riskInfoList" :key="index" class="flex items-center justify-between">
                    <span class="font-bold" :class="[item.class]">
                        {{ item.level }}
                    </span>
                    <span class="span-gray-700">
                        {{ item.description }}
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.chart-container {
    width: 100%;
    height: 300px;
}
</style>
