<template>
  <div class="income-level-guide-container">
    <LTitle title="社保评级对照表" class="mb-6" />
    
    <div class="guide-content">
      <!-- 评级表格 -->
      <div class="level-table-container">
        <div class="table-header">
          <h3 class="table-title">
            <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v3m0 4v2m0-6V7"></path>
            </svg>
            收入等级详细对照
          </h3>
          <p class="table-description">基于社保缴费基数的收入水平评估标准</p>
        </div>
        
        <div class="level-grid">
          <div 
            v-for="levelInfo in levelDetails" 
            :key="levelInfo.level"
            class="level-card"
            :class="{ 'premium': ['H', 'I', 'J'].includes(levelInfo.level) }"
          >
            <div class="level-header">
              <div class="level-badge" :style="{ background: levelInfo.color }">
                {{ levelInfo.level === '-' ? '无' : levelInfo.level }}
              </div>
              <div class="level-name">{{ levelInfo.name }}</div>
            </div>
            <div class="level-income">
              <div class="income-range">{{ levelInfo.range }}</div>
              <div class="income-description">{{ levelInfo.description }}</div>
            </div>
            <div class="level-features">
              <div class="feature-list">
                <div 
                  v-for="feature in levelInfo.features" 
                  :key="feature"
                  class="feature-item"
                >
                  <svg class="w-4 h-4 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                  </svg>
                  {{ feature }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 说明信息 -->
      <div class="explanation-section">
        <div class="explanation-card">
          <div class="explanation-header">
            <svg class="w-6 h-6 text-blue-500" 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>
            <span class="explanation-title">评估说明</span>
          </div>
          <div class="explanation-content">
            <ul class="explanation-list">
              <li>本评估基于全国社会保险信息系统的缴费基数数据</li>
              <li>收入范围为税前月收入，实际到手收入会有所差异</li>
              <li>评级反映的是相对收入水平，不代表绝对收入能力</li>
              <li>社保缴费存在地区差异，评估结果仅供参考</li>
              <li>建议结合其他收入证明材料进行综合评估</li>
            </ul>
          </div>
        </div>

        <div class="data-accuracy-card">
          <div class="accuracy-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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
            </svg>
            <span class="accuracy-title">数据可靠性</span>
          </div>
          <div class="accuracy-content">
            <div class="accuracy-stats">
              <div class="stat-item">
                <div class="stat-value">95%</div>
                <div class="stat-label">数据准确率</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">实时</div>
                <div class="stat-label">数据更新</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">全国</div>
                <div class="stat-label">覆盖范围</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 温馨提示 -->
  <LRemark content="收入水平指导基于申请人的收入情况提供个性化的收入水平评估和改善建议。包括收入等级划分、收入结构优化建议和收入提升路径等。分析结果基于大数据和机器学习模型，结合行业标准和地区特点进行个性化评估。指导建议可以帮助申请人了解自身收入水平在市场中的位置和改善方向。建议结合具体职业和地区情况进行参考。" />
</template>

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

// 等级详细信息
const levelDetails = [
  {
    level: '-',
    name: '无记录',
    range: '查询无社保记录',
    description: '未发现社保缴费记录',
    color: '#94a3b8',
    features: ['需核实收入来源', '建议补充材料', '谨慎评估风险']
  },
  {
    level: 'A',
    name: 'A级收入',
    range: '2,000 - 4,000 元',
    description: '基础收入水平',
    color: '#ef4444',
    features: ['基本生活保障', '消费能力有限', '需关注还款能力']
  },
  {
    level: 'B',
    name: 'B级收入',
    range: '4,000 - 6,000 元',
    description: '普通收入水平',
    color: '#f97316',
    features: ['一般消费能力', '基础信用条件', '稳定收入来源']
  },
  {
    level: 'C',
    name: 'C级收入',
    range: '6,000 - 8,000 元',
    description: '中等收入水平',
    color: '#eab308',
    features: ['良好消费能力', '稳定信用基础', '可承担一定债务']
  },
  {
    level: 'D',
    name: 'D级收入',
    range: '8,000 - 10,000 元',
    description: '中等偏上收入',
    color: '#84cc16',
    features: ['较强消费能力', '良好信用条件', '债务承受能力强']
  },
  {
    level: 'E',
    name: 'E级收入',
    range: '10,000 - 14,000 元',
    description: '良好收入水平',
    color: '#22c55e',
    features: ['强劲消费能力', '优质信用基础', '投资理财能力']
  },
  {
    level: 'F',
    name: 'F级收入',
    range: '14,000 - 18,000 元',
    description: '较高收入水平',
    color: '#10b981',
    features: ['很强消费能力', '优秀信用条件', '多元投资能力']
  },
  {
    level: 'G',
    name: 'G级收入',
    range: '18,000 - 22,000 元',
    description: '高收入水平',
    color: '#06b6d4',
    features: ['强大消费能力', '卓越信用基础', '高端消费群体']
  },
  {
    level: 'H',
    name: 'H级收入',
    range: '22,000 - 26,000 元',
    description: '很高收入水平',
    color: '#3b82f6',
    features: ['顶级消费能力', '极佳信用条件', '财富积累能力']
  },
  {
    level: 'I',
    name: 'I级收入',
    range: '26,000 - 30,000 元',
    description: '优秀收入水平',
    color: '#8b5cf6',
    features: ['超强消费能力', '完美信用基础', '高净值人群']
  },
  {
    level: 'J',
    name: 'J级收入',
    range: '30,000+ 元',
    description: '卓越收入水平',
    color: '#d946ef',
    features: ['无限消费潜力', '最优信用条件', '精英收入群体']
  }
]
</script>

<style scoped>
.income-level-guide-container {
  background: white;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.guide-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 表格区域 */
.level-table-container {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 15px;
  padding: 25px;
}

.table-header {
  text-align: center;
  margin-bottom: 30px;
}

.table-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
}

.table-description {
  color: #6b7280;
  margin: 0;
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.level-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  border: 2px solid #e5e7eb;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.level-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.level-card.premium {
  border-color: #d946ef;
  background: linear-gradient(135deg, #fdf4ff 0%, #f3e8ff 100%);
}

.level-card.premium::before {
  content: '⭐';
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.2rem;
}

.level-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.level-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.level-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f2937;
}

.level-income {
  margin-bottom: 15px;
}

.income-range {
  font-size: 1.3rem;
  font-weight: 700;
  color: #059669;
  margin-bottom: 5px;
}

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

.level-features {
  border-top: 1px solid #e5e7eb;
  padding-top: 15px;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feature-item {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  color: #374151;
}

/* 说明区域 */
.explanation-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.explanation-card,
.data-accuracy-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e5e7eb;
}

.explanation-header,
.accuracy-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.explanation-title,
.accuracy-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f2937;
}

.explanation-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.explanation-list li {
  padding: 8px 0;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
  position: relative;
  padding-left: 20px;
}

.explanation-list li:last-child {
  border-bottom: none;
}

.explanation-list li::before {
  content: '•';
  color: #3b82f6;
  position: absolute;
  left: 0;
  font-weight: bold;
}

.accuracy-stats {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.stat-item {
  text-align: center;
  padding: 15px;
  background: #f8fafc;
  border-radius: 8px;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #059669;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 0.9rem;
  color: #6b7280;
  text-transform: uppercase;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .level-grid {
    grid-template-columns: 1fr;
  }
  
  .explanation-section {
    grid-template-columns: 1fr;
  }
  
  .income-level-guide-container {
    padding: 20px;
  }
}

@media (max-width: 640px) {
  .level-card {
    padding: 15px;
  }
  
  .table-title {
    font-size: 1.3rem;
  }
  
  .income-range {
    font-size: 1.1rem;
  }
}
</style>
