<script setup>
import { computed } from "vue";

const props = defineProps({
    data: {
        type: Object,
        default: () => ({}),
    },
});

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

// 根据分值确定压力等级
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",
            icon: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>`,
        };
    if (score.value <= 50)
        return {
            level: "中",
            color: "#E6A23C",
            text: "还款压力中等",
            bgGradient: "from-yellow-500 to-yellow-300",
            lightBg: "bg-yellow-50",
            borderColor: "border-yellow-200",
            icon: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>`,
        };
    if (score.value <= 80)
        return {
            level: "高",
            color: "#F56C6C",
            text: "还款压力较大",
            bgGradient: "from-orange-500 to-red-400",
            lightBg: "bg-red-50",
            borderColor: "border-red-200",
            icon: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>`,
        };
    return {
        level: "极高",
        color: "#FF0000",
        text: "还款压力非常大",
        bgGradient: "from-red-600 to-red-500",
        lightBg: "bg-red-50",
        borderColor: "border-red-300",
        icon: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>`,
    };
});

// 计算进度条宽度百分比
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";
});
</script>

<template>
    <div
        class="p-6 rounded-xl bg-white shadow-lg border border-gray-100 transition-all duration-300 hover:shadow-xl relative overflow-hidden font-sans"
    >
        <!-- 装饰背景元素 -->
        <div
            class="absolute -right-10 -top-10 w-40 h-40 bg-gray-50 rounded-full opacity-30"
        ></div>
        <div
            class="absolute -left-12 -bottom-12 w-36 h-36 bg-gray-50 rounded-full opacity-20"
        ></div>

        <!-- 标题栏 -->
        <div class="flex justify-between items-center mb-6 relative z-10">
            <h3
                class="text-lg font-bold text-gray-800 tracking-wide flex items-center"
            >
                <span
                    class="bg-gradient-to-r from-blue-500 to-blue-600 w-1.5 h-5 rounded mr-2 inline-block"
                ></span>
                还款压力分析
            </h3>
            <div
                class="px-3 py-1 bg-blue-50 rounded-full text-xs text-blue-500 font-medium"
            >
                借贷风险评估
            </div>
        </div>

        <!-- 分数显示 - 无仪表盘设计 -->
        <div class="flex flex-col items-center justify-center mb-6">
            <!-- 分数圆环 -->
            <div
                class="relative h-32 w-32 flex items-center justify-center mb-2"
            >
                <!-- 背景圆环 -->
                <div
                    class="absolute inset-0 rounded-full border-[8px] border-gray-100"
                ></div>

                <!-- 彩色进度圆环 - 根据分数变化颜色 -->
                <svg
                    class="absolute inset-0 w-full h-full -rotate-90"
                    viewBox="0 0 100 100"
                >
                    <circle
                        cx="50"
                        cy="50"
                        r="46"
                        fill="none"
                        :stroke="pressureLevel.color"
                        stroke-width="8"
                        stroke-dasharray="289.02"
                        :stroke-dashoffset="
                            289.02 - (289.02 * score.value) / 100
                        "
                        stroke-linecap="round"
                        class="transition-all duration-700 ease-out"
                    />
                </svg>

                <!-- 分数显示 -->
                <div class="flex flex-col items-center justify-center z-10">
                    <span :class="['text-5xl font-bold', scoreColorClass]">{{
                        score
                    }}</span>
                    <span class="text-sm text-gray-500 mt-1">得分</span>
                </div>
            </div>

            <!-- 等级标签 -->
            <div
                class="inline-flex items-center px-4 py-1.5 rounded-full shadow-sm mb-1"
                :class="[pressureLevel.lightBg, pressureLevel.borderColor]"
            >
                <span class="mr-1.5" v-html="pressureLevel.icon"></span>
                <span
                    class="font-medium"
                    :style="{ color: pressureLevel.color }"
                >
                    {{ pressureLevel.level }}级还款压力
                </span>
            </div>
        </div>

        <!-- 进度条 -->
        <div class="mb-6">
            <div class="h-2.5 bg-gray-100 rounded-full overflow-hidden mb-2">
                <div
                    class="h-full rounded-full transition-all duration-500 ease-out bg-gradient-to-r"
                    :class="pressureLevel.bgGradient"
                    :style="{ width: progressWidth }"
                ></div>
            </div>
            <div class="flex justify-between text-xs text-gray-400">
                <span class="font-medium">0</span>
                <span>25</span>
                <span>50</span>
                <span>75</span>
                <span class="font-medium">100</span>
            </div>
        </div>

        <!-- 压力等级显示 -->
        <div class="flex justify-center mb-6">
            <div
                class="py-3 px-5 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg border border-blue-100 text-center"
            >
                <span class="text-gray-700">{{ pressureLevel.text }}</span>
                <div class="mt-1 text-xs text-gray-500">
                    分值越高表示还款压力越大，建议关注债务比例
                </div>
            </div>
        </div>

        <!-- 建议区域 -->
        <div class="bg-gray-50 rounded-lg p-4 border border-gray-100 relative">
            <div
                class="absolute -top-3 left-4 bg-white px-2 text-xs font-medium text-gray-500"
            >
                财务建议
            </div>
            <div class="flex items-start">
                <div class="mt-0.5 mr-3 text-blue-500">
                    <svg
                        class="w-5 h-5"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                        ></path>
                    </svg>
                </div>
                <div>
                    <p v-if="score > 50" class="text-gray-600 leading-relaxed">
                        建议合理规划财务，控制债务比例，增加收入来源，避免过度负债。
                        <span class="block mt-1 text-sm text-gray-500"
                            >可尝试分期付款或延长还款周期，减轻每月还款压力。</span
                        >
                    </p>
                    <p v-else class="text-gray-600 leading-relaxed">
                        当前还款压力在可控范围内，继续保持良好的财务习惯。
                        <span class="block mt-1 text-sm text-gray-500"
                            >建议定期检查收支平衡，确保及时还款，维持良好信用记录。</span
                        >
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.repayment-pressure {
    padding: 20px;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

.title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
    color: #303133;
}

.score-display {
    text-align: center;
    margin-bottom: 20px;
}

.score-value {
    font-size: 40px;
    font-weight: bold;
}

.score-unit {
    font-size: 16px;
    margin-left: 4px;
    color: #606266;
}

.progress-container {
    margin-bottom: 20px;
}

.progress-bar {
    height: 10px;
    background-color: #ebeef5;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 4px;
}

.progress-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.5s ease, background-color 0.5s ease;
}

.progress-markers {
    display: flex;
    justify-content: space-between;
    color: #909399;
    font-size: 12px;
}

.pressure-level {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 16px;
    text-align: center;
}

.suggestion {
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 6px;
    color: #606266;
    font-size: 14px;
}

.suggestion p {
    margin: 0;
}

/* 适配移动端 */
@media screen and (max-width: 768px) {
    .repayment-pressure {
        padding: 16px;
    }

    .score-value {
        font-size: 32px;
    }

    .title {
        font-size: 16px;
    }
}
</style>
