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

const props = defineProps({
    data: {
        type: Object,
        default: () => ({}),
    },
    apiId: {
        type: String,
        default: '',
    },
    index: {
        type: Number,
        default: 0,
    },
    notifyRiskStatus: {
        type: Function,
        default: () => { },
    },
});

// 计算得分，如果没有数据则默认为0
const score = computed(() => {
    return props.data?.score ? Number(props.data.score) : 0;
});

// 计算风险评分（0-100分，分数越高越安全）
const riskScore = computed(() => {
    // 还款压力分数越高风险越大，转换为安全分数
    // 压力分数 0-20：100分（最安全）
    // 压力分数 20-50：70分（较安全）
    // 压力分数 50-80：40分（有风险）
    // 压力分数 80-100：10分（高风险）
    const pressure = score.value;
    if (pressure <= 20) return 100;
    if (pressure <= 50) return 70;
    if (pressure <= 80) return 40;
    return 10;
});

// 使用 composable 通知父组件风险评分
useRiskNotifier(props, riskScore);

// 暴露给父组件
defineExpose({
    riskScore
});

// 根据分值确定压力等级
const pressureLevel = computed(() => {
    if (score.value <= 20)
        return {
            level: "低",
            color: "#67C23A",
            text: "还款压力小",
            bgGradient: "from-green-500 to-green-300",
            lightBg: "bg-green-50",
            borderColor: "border-green-200",
            gradient: [
                { offset: 0, color: "#67C23A" },
                { offset: 1, color: "#85ce61" }
            ]
        };
    if (score.value <= 50)
        return {
            level: "中",
            color: "#E6A23C",
            text: "还款压力中等",
            bgGradient: "from-yellow-500 to-yellow-300",
            lightBg: "bg-yellow-50",
            borderColor: "border-yellow-200",
            gradient: [
                { offset: 0, color: "#E6A23C" },
                { offset: 1, color: "#ebb563" }
            ]
        };
    if (score.value <= 80)
        return {
            level: "高",
            color: "#E53E3E",
            text: "还款压力较大",
            bgGradient: "from-orange-500 to-red-400",
            lightBg: "bg-red-50",
            borderColor: "border-red-200",
            gradient: [
                { offset: 0, color: "#E53E3E" },
                { offset: 1, color: "#fc8181" }
            ]
        };
    return {
        level: "极高",
        color: "#FF0000",
        text: "还款压力非常大",
        bgGradient: "from-red-600 to-red-500",
        lightBg: "bg-red-50",
        borderColor: "border-red-300",
        gradient: [
            { offset: 0, color: "#FF0000" },
            { offset: 1, color: "#ff3333" }
        ]
    };
});

// 计算进度条宽度百分比
const progressWidth = computed(() => {
    return `${score.value}%`;
});

// 计算评分对应的Tailwind文本颜色类
const scoreColorClass = computed(() => {
    if (score.value <= 20) return "text-green-500";
    if (score.value <= 50) return "text-yellow-500";
    if (score.value <= 80) return "text-orange-500";
    return "text-red-600";
});

// 获取图标路径（根据压力等级）
const getIconPath = () => {
    // 低压力使用 zq
    if (score.value <= 20) {
        return new URL('@/assets/images/report/zq.png', import.meta.url).href
    }
    // 中等压力使用 zfx
    if (score.value <= 50) {
        return new URL('@/assets/images/report/zfx.png', import.meta.url).href
    }
    // 高压力和极高压力使用 gfx
    return new URL('@/assets/images/report/gfx.png', import.meta.url).href
};

// 获取边框颜色
const getBorderColor = () => {
    if (score.value <= 20) return '#bbf7d0'; // 绿色
    if (score.value <= 50) return '#fef3c7'; // 黄色
    if (score.value <= 80) return '#fecaca'; // 红色
    return '#fecaca'; // 极高压力也是红色
};

// ECharts 仪表盘
const chartRef = ref(null);
let chartInstance = null;

const initChart = () => {
    if (!chartRef.value) return;
    chartInstance = echarts.init(chartRef.value);
    updateChart();
};

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

    const risk = pressureLevel.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"
                                },
                                {
                                    offset: 1,
                                    color: risk.color + "25"
                                }
                            ])]
                        ]
                    }
                },
                axisTick: {
                    show: true,
                    distance: -30,
                    length: 6,
                    splitNumber: 10,
                    lineStyle: {
                        color: risk.color,
                        width: 1,
                        opacity: 0.5
                    }
                },
                splitLine: {
                    show: true,
                    distance: -36,
                    length: 12,
                    splitNumber: 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: score.value
                    }
                ],
                title: {
                    fontSize: 14,
                    color: risk.color,
                    offsetCenter: [0, "10%"],
                    formatter: risk.level + "级还款压力"
                }
            }
        ]
    };

    chartInstance.setOption(option);
};

watch(
    () => score.value,
    () => {
        updateChart();
    }
);

onMounted(() => {
    initChart();
    window.addEventListener("resize", () => {
        if (chartInstance) {
            chartInstance.resize();
        }
    });
});

onUnmounted(() => {
    if (chartInstance) {
        chartInstance.dispose();
        chartInstance = null;
    }
    window.removeEventListener("resize", chartInstance?.resize);
});
</script>

<template>
    <div class="card">
        <div class="rounded-lg border border-gray-200 pb-2 mb-4">

            <!-- 标题栏 -->
            <div class="flex items-center mb-4 p-4">
                <div class="w-8 h-8 flex items-center justify-center mr-2">
                    <img src="@/assets/images/report/hkylfx.png" alt="还款压力分析" class="w-8 h-8 object-contain" />
                </div>
                <span class="font-bold text-gray-800">还款压力分析</span>
            </div>

            <div class="px-4 pb-4">
                <!-- 仪表盘图表 -->
                <div class="mb-6">
                    <div ref="chartRef" :style="{ width: '100%', height: '200px' }"></div>
                </div>

                <!-- 压力等级显示 -->
                <div class="mb-6">
                    <div class="space-y-3 p-4 rounded-lg border" :class="pressureLevel.lightBg"
                        :style="{ borderColor: getBorderColor() }">
                        <div class="flex items-start">
                            <div class="mr-3 mt-1">
                                <img :src="getIconPath()" alt="还款压力" class="w-10 h-10 object-contain" />
                            </div>
                            <div class="flex-1">
                                <h4 class="font-semibold text-gray-800 mb-2">{{ pressureLevel.text }}</h4>
                                <p class="text-gray-400 text-sm">
                                    分值越高表示还款压力越大，建议关注债务比例
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 财务建议 -->
                <div class="mb-6">
                    <div class="flex items-center mb-3">
                        <div class="w-4 h-4 flex items-center justify-center mr-2">
                            <img src="@/assets/images/report/wxts_icon.png" alt="财务建议" class="w-4 h-4 object-contain" />
                        </div>
                        <div class="font-bold text-gray-800">财务建议</div>
                    </div>
                    <div class="ml-6 text-sm text-gray-600 space-y-1">
                        <p v-if="score > 50">
                            建议合理规划财务，控制债务比例，增加收入来源，避免过度负债。
                        </p>
                        <p v-if="score > 50" class="mt-1">
                            可尝试分期付款或延长还款周期，减轻每月还款压力。
                        </p>
                        <p v-else>
                            当前还款压力在可控范围内，继续保持良好的财务习惯。
                        </p>
                        <p v-if="score <= 50" class="mt-1">
                            建议定期检查收支平衡，确保及时还款，维持良好信用记录。
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<style scoped>
/* 样式已通过 Tailwind CSS 类实现 */
</style>
