<template>
    <div>
        <div class="px-4 text-sm text-gray-500">
            分析指数是根据网络行为大数据出具的分析评估参考分数，分数越高越好。该指数仅对本报告有效，不代表对报告查询人的综合定性评价。
        </div>
        <div ref="chartRef" :style="{ width: '100%', height: '200px' }"></div>
        <div class="risk-description">
            {{ riskDescription }}
        </div>
        <div class="risk-legend mt-6">
            <div v-for="item in legendItems" :key="item.level" class="risk-legend__item">
                <span class="risk-legend__pill" :style="{ backgroundColor: item.color, color: item.textColor }">
                    {{ item.range }}
                </span>
                <span class="risk-legend__text">{{ item.level }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted, onUnmounted, watch, computed } from "vue";

const props = defineProps({
    score: {
        type: Number,
        required: true,
    },
});

// 根据分数计算风险等级和颜色（分数越高越安全）
const riskLevel = computed(() => {
    const score = props.score;
    if (score >= 75 && score <= 100) {
        return {
            level: "无任何风险",
            color: "#52c41a",
            gradient: [
                { offset: 0, color: "#52c41a" },
                { offset: 1, color: "#7fdb42" }
            ]
        };
    } else if (score >= 50 && score < 75) {
        return {
            level: "风险指数较低",
            color: "#faad14",
            gradient: [
                { offset: 0, color: "#faad14" },
                { offset: 1, color: "#ffc53d" }
            ]
        };
    } else if (score >= 25 && score < 50) {
        return {
            level: "风险指数较高",
            color: "#fa8c16",
            gradient: [
                { offset: 0, color: "#fa8c16" },
                { offset: 1, color: "#ffa940" }
            ]
        };
    } else {
        return {
            level: "高风险警告",
            color: "#f5222d",
            gradient: [
                { offset: 0, color: "#f5222d" },
                { offset: 1, color: "#ff4d4f" }
            ]
        };
    }
});

// 评分解释文本（分数越高越安全）
const riskDescription = computed(() => {
    const score = props.score;
    if (score >= 75 && score <= 100) {
        return "根据综合分析，当前报告未检测到明显风险因素，各项指标表现正常，总体状况良好。";
    } else if (score >= 50 && score < 75) {
        return "根据综合分析，当前报告存在少量风险信号，建议关注相关指标变化，保持警惕。";
    } else if (score >= 25 && score < 50) {
        return "根据综合分析，当前报告风险指数较高，多项指标显示异常，建议进一步核实相关情况。";
    } else {
        return "根据综合分析，当前报告显示高度风险状态，多项重要指标严重异常，请立即采取相应措施。";
    }
});

const chartRef = ref(null);
let chartInstance = null;

const legendItems = [
    { level: "高风险", color: "#f5222d", range: "0-24", textColor: "#ffffff" },
    { level: "一般", color: "#fa8c16", range: "25-49", textColor: "#ffffff" },
    { level: "良好", color: "#faad14", range: "50-74", textColor: "#ffffff" },
    { level: "优秀", color: "#52c41a", range: "75-100", textColor: "#ffffff" }
];

const initChart = () => {
    if (!chartRef.value) return;

    // 初始化ECharts实例
    chartInstance = echarts.init(chartRef.value);
    updateChart();
};

const updateChart = () => {
    if (!chartInstance) return;

    // 获取当前风险等级信息
    const risk = riskLevel.value;

    // 配置项
    const option = {
        series: [
            {
                type: "gauge",
                startAngle: 180,
                endAngle: 0,
                min: 0,
                max: 100,
                radius: "100%",
                center: ["50%", "80%"],
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, risk.gradient),
                    shadowBlur: 6,
                    shadowColor: risk.color,
                },
                progress: {
                    show: true,
                    width: 20,
                    roundCap: true,
                    clip: false
                },
                axisLine: {
                    roundCap: true,
                    lineStyle: {
                        width: 20,
                        color: [
                            [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: risk.color + "30" // 使用风险颜色，透明度20%
                                },
                                {
                                    offset: 1,
                                    color: risk.color + "25" // 使用风险颜色，透明度10%
                                }
                            ])]
                        ]
                    }
                },
                axisTick: {
                    show: true,
                    distance: -30,
                    length: 6,
                    splitNumber: 10, // 每1分一个小刻度
                    lineStyle: {
                        color: risk.color,
                        width: 1,
                        opacity: 0.5
                    }
                },
                splitLine: {
                    show: true,
                    distance: -36,
                    length: 12,
                    splitNumber: 9, // 9个大刻度，100分分成9个区间
                    lineStyle: {
                        color: risk.color,
                        width: 2,
                        opacity: 0.5
                    }
                },
                axisLabel: {
                    show: false,
                },
                anchor: {
                    show: false
                },
                pointer: {
                    icon: "triangle",
                    iconStyle: {
                        color: risk.color,
                        borderColor: risk.color,
                        borderWidth: 1
                    },
                    offsetCenter: ["7%", "-67%"],
                    length: "10%",
                    width: 15
                },
                detail: {
                    valueAnimation: true,
                    fontSize: 30,
                    fontWeight: "bold",
                    color: risk.color,
                    offsetCenter: [0, "-25%"],
                    formatter: function (value) {
                        return `{value|${value}分}\n{level|${risk.level}}`;
                    },
                    rich: {
                        value: {
                            fontSize: 30,
                            fontWeight: 'bold',
                            color: risk.color,
                            padding: [0, 0, 5, 0]
                        },
                        level: {
                            fontSize: 14,
                            fontWeight: 'normal',
                            color: risk.color,
                            padding: [5, 0, 0, 0]
                        }
                    }
                },
                data: [
                    {
                        value: props.score
                    }
                ],
                title: {
                    fontSize: 14,
                    color: risk.color,
                    offsetCenter: [0, "10%"],
                    formatter: risk.level
                }
            }
        ]
    };

    // 使用配置项设置图表
    chartInstance.setOption(option);
};

// 监听分数变化
watch(
    () => props.score,
    () => {
        updateChart();
    }
);

onMounted(() => {
    initChart();

    // 处理窗口大小变化
    window.addEventListener("resize", () => {
        if (chartInstance) {
            chartInstance.resize();
        }
    });
});

// 在组件销毁前清理
onUnmounted(() => {
    if (chartInstance) {
        chartInstance.dispose();
        chartInstance = null;
    }
    window.removeEventListener("resize", chartInstance?.resize);
});
</script>

<style scoped>
.risk-description {
    margin-bottom: 4px;
    padding: 0 12px;
        color: #666666;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}
.risk-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 0 16px 12px;
    font-size: 12px;
    color: #666666;
}

.risk-legend__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.risk-legend__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    min-width: 64px;
}

.risk-legend__text {
    white-space: nowrap;
}
</style>