<template>
    <div class="income-overview-container">
        <LTitle title="收入评估" class="mb-4" />

        <!-- 收入展示区域 -->
        <div class="income-display">
            <div class="income-card">
                <div class="income-header">
                    <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1">
                        </path>
                    </svg>
                    <span class="income-title">预估月收入</span>
                </div>

                <div class="income-amount" :class="getRangeClass(level)">
                    {{ getIncomeRange(level) }}
                </div>

                <div class="income-description">
                    {{ getIncomeDescription(level) }}
                </div>
            </div>
        </div>

        <!-- 评估结果 -->
        <div class="assessment-card">
            <div class="assessment-header">
                <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="assessment-title">评估结果</span>
            </div>
            <div class="assessment-content">
                <p class="assessment-text">{{ getAssessmentDescription(level) }}</p>
            </div>
        </div>
    </div>
  
  <!-- 温馨提示 -->
  <LRemark content="收入概览展示申请人的收入情况和收入稳定性分析。包括月收入水平、收入来源、收入变化趋势等关键信息。数据来源于银行流水、工资发放记录、税务信息等多个渠道。收入情况是评估还款能力的重要依据，包括收入水平、收入稳定性和收入来源的多样化程度。建议重点关注收入与申请金额的匹配度和收入来源的可持续性。" />
</template>

<script setup>
import { computed } from 'vue'
import LTitle from '@/components/LTitle.vue'
import LRemark from '@/components/LRemark.vue'

const props = defineProps({
    level: {
        type: String,
        default: '-'
    }
})

// 收入范围映射（只显示数值，不显示等级）
const getIncomeRange = (level) => {
    const rangeMap = {
        '-': '查询无社保记录',
        'A': '2,000 - 4,000 元',
        'B': '4,000 - 6,000 元',
        'C': '6,000 - 8,000 元',
        'D': '8,000 - 10,000 元',
        'E': '10,000 - 14,000 元',
        'F': '14,000 - 18,000 元',
        'G': '18,000 - 22,000 元',
        'H': '22,000 - 26,000 元',
        'I': '26,000 - 30,000 元',
        'J': '30,000+ 元'
    }
    return rangeMap[level] || '无相关记录'
}

// 收入范围样式类
const getRangeClass = (level) => {
    if (level === '-') return 'range-none'
    if (['A', 'B', 'C'].includes(level)) return 'range-low'
    if (['D', 'E', 'F'].includes(level)) return 'range-medium'
    if (['G', 'H', 'I', 'J'].includes(level)) return 'range-high'
    return 'range-unknown'
}

// 收入水平描述（不显示等级）
const getIncomeDescription = (level) => {
    const descriptions = {
        '-': '暂未发现社保缴费记录',
        'A': '基础收入水平',
        'B': '一般收入水平',
        'C': '中等收入水平',
        'D': '中等偏上收入水平',
        'E': '良好收入水平',
        'F': '较高收入水平',
        'G': '高收入水平',
        'H': '很高收入水平',
        'I': '优秀收入水平',
        'J': '卓越收入水平'
    }
    return descriptions[level] || '无相关记录'
}

// 评估描述（不显示等级）
const getAssessmentDescription = (level) => {
    const descriptions = {
        '-': '根据社保查询结果，暂未发现该用户的社保缴费记录，无法进行收入评估。',
        'A': '根据社保缴费基数分析，该用户收入水平较低，消费能力有限。',
        'B': '根据社保缴费基数分析，该用户收入水平一般，具备基础消费能力。',
        'C': '根据社保缴费基数分析，该用户收入水平中等，消费能力良好。',
        'D': '根据社保缴费基数分析，该用户收入水平中等偏上，消费能力较强。',
        'E': '根据社保缴费基数分析，该用户收入水平良好，消费能力强劲。',
        'F': '根据社保缴费基数分析，该用户收入水平较高，消费能力很强。',
        'G': '根据社保缴费基数分析，该用户收入水平高，消费能力强大。',
        'H': '根据社保缴费基数分析，该用户收入水平很高，消费能力顶级。',
        'I': '根据社保缴费基数分析，该用户收入水平优秀，消费能力超强。',
        'J': '根据社保缴费基数分析，该用户收入水平卓越，消费潜力无限。'
    }
    return descriptions[level] || '无相关记录，无法进行准确评估。'
}
</script>

<style scoped>
.income-overview-container {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 收入展示区域 */
.income-display {
    margin-bottom: 15px;
}

.income-card {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.income-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
}

.income-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
}

.income-amount {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.income-description {
    font-size: 0.9rem;
    color: #6b7280;
}

/* 收入范围样式 */
.range-none {
    color: #94a3b8;
}

.range-low {
    color: #f59e0b;
}

.range-medium {
    color: #10b981;
}

.range-high {
    color: #3b82f6;
}

/* 评估卡片 */
.assessment-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 15px;
}

.assessment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.assessment-title {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
}

.assessment-text {
    color: #6b7280;
    line-height: 1.5;
    margin: 0;
    font-size: 0.9rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .income-overview-container {
        padding: 15px;
    }

    .income-amount {
        font-size: 1.5rem;
    }
}
</style>
