<template>
  <div class="income-analysis-container">
    <LTitle title="收入分析" class="mb-4" />
    
    <!-- 详细分析卡片 -->
    <div class="analysis-cards">
      <!-- 市场对比分析 -->
      <div class="analysis-card market-comparison-card">
        <div class="card-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 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
          </svg>
          <span class="card-title">市场水平对比</span>
        </div>
        <div class="card-content">
          <p class="card-description">{{ getMarketComparison() }}</p>
          <div class="comparison-indicator">
            <div class="indicator-bar">
              <div class="indicator-fill" :style="getIndicatorStyle()"></div>
              <div class="indicator-marker" :style="getMarkerPosition()">
                <div class="marker-dot"></div>
                <div class="marker-label">当前</div>
              </div>
            </div>
            <div class="indicator-labels">
              <span>低收入</span>
              <span>中等收入</span>
              <span>高收入</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 风险评估 -->
      <div class="analysis-card risk-assessment-card">
        <div class="card-header">
          <svg class="w-5 h-5 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="card-title">信用风险评估</span>
        </div>
        <div class="card-content">
          <p class="card-description">{{ getRiskAssessment() }}</p>
          <div class="risk-indicator">
            <div class="risk-level" :class="getRiskClass()">
              {{ getRiskLevel() }}
            </div>
          </div>
        </div>
      </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 getMarketComparison = () => {
  const comparisons = {
    '-': '无社保记录，无法与市场平均水平进行对比。',
    'A': '低于市场平均收入水平，处于收入分布的底部区间。',
    'B': '略低于市场平均收入水平，处于收入分布的中下区间。',
    'C': '接近市场平均收入水平，处于收入分布的中等区间。',
    'D': '高于市场平均收入水平，处于收入分布的中上区间。',
    'E': '明显高于市场平均收入水平，处于收入分布的上层区间。',
    'F': '显著高于市场平均收入水平，处于收入分布的高层区间。',
    'G': '远高于市场平均收入水平，处于收入分布的顶部区间。',
    'H': '远超市场平均收入水平，处于收入分布的精英区间。',
    'I': '极高于市场平均收入水平，处于收入分布的卓越区间。',
    'J': '超越市场绝大多数收入水平，处于收入分布的顶级区间。'
  }
  return comparisons[props.level] || '数据异常，无法进行市场对比。'
}

// 风险评估（不显示等级）
const getRiskAssessment = () => {
  const risks = {
    '-': '缺乏社保记录，收入稳定性存在不确定性，信用风险较高。',
    'A': '收入水平较低，还款能力有限，需要谨慎评估信用风险。',
    'B': '收入水平一般，具备基础还款能力，信用风险中等。',
    'C': '收入稳定，还款能力良好，信用风险较低。',
    'D': '收入较高，还款能力强，信用风险低。',
    'E': '收入良好，还款能力很强，信用风险很低。',
    'F': '高收入群体，还款能力优秀，信用风险极低。',
    'G': '高收入群体，还款能力卓越，信用风险极低。',
    'H': '高端收入群体，还款能力顶级，几乎无信用风险。',
    'I': '精英收入群体，还款能力完美，无信用风险。',
    'J': '顶级收入群体，还款能力无限，零信用风险。'
  }
  return risks[props.level] || '数据异常，无法进行风险评估。'
}

// 风险等级
const getRiskLevel = () => {
  const riskLevels = {
    '-': '高风险',
    'A': '中高风险',
    'B': '中等风险',
    'C': '中低风险',
    'D': '低风险',
    'E': '很低风险',
    'F': '极低风险',
    'G': '极低风险',
    'H': '无风险',
    'I': '无风险',
    'J': '零风险'
  }
  return riskLevels[props.level] || '未知风险'
}

// 风险样式类
const getRiskClass = () => {
  if (['-', 'A'].includes(props.level)) return 'risk-high'
  if (['B', 'C'].includes(props.level)) return 'risk-medium'
  if (['D', 'E', 'F', 'G'].includes(props.level)) return 'risk-low'
  if (['H', 'I', 'J'].includes(props.level)) return 'risk-none'
  return 'risk-unknown'
}

// 指示器样式（基于收入水平）
const getIndicatorStyle = () => {
  const levelOrder = ['-', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
  const levelIndex = levelOrder.findIndex(l => l === props.level)
  const percentage = levelIndex >= 0 ? (levelIndex / (levelOrder.length - 1)) * 100 : 0
  return {
    width: percentage + '%',
    background: `linear-gradient(90deg, #ef4444 0%, #eab308 50%, #22c55e 100%)`
  }
}

// 标记位置
const getMarkerPosition = () => {
  const levelOrder = ['-', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
  const levelIndex = levelOrder.findIndex(l => l === props.level)
  const percentage = levelIndex >= 0 ? (levelIndex / (levelOrder.length - 1)) * 100 : 0
  return {
    left: percentage + '%'
  }
}
</script>

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

/* 分析卡片 */
.analysis-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 15px;
}

.analysis-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 15px;
  transition: all 0.3s ease;
}

.analysis-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

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

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

.card-content {
  color: #6b7280;
}

.card-description {
  line-height: 1.5;
  margin-bottom: 12px;
  font-size: 0.9rem;
}

/* 对比指示器 */
.comparison-indicator {
  margin-top: 12px;
}

.indicator-bar {
  position: relative;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  margin-bottom: 8px;
}

.indicator-fill {
  height: 100%;
  border-radius: 3px;
  transition: all 0.5s ease;
}

.indicator-marker {
  position: absolute;
  top: -6px;
  transform: translateX(-50%);
}

.marker-dot {
  width: 10px;
  height: 10px;
  background: #1f2937;
  border-radius: 50%;
  margin-bottom: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.marker-label {
  font-size: 0.7rem;
  color: #374151;
  font-weight: 600;
  text-align: center;
}

.indicator-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #6b7280;
}

/* 风险指示器 */
.risk-indicator {
  display: flex;
  align-items: center;
  margin-top: 12px;
}

.risk-level {
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.risk-high {
  background: #fef2f2;
  color: #dc2626;
}

.risk-medium {
  background: #fffbeb;
  color: #d97706;
}

.risk-low {
  background: #f0fdf4;
  color: #16a34a;
}

.risk-none {
  background: #eff6ff;
  color: #2563eb;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .analysis-cards {
    grid-template-columns: 1fr;
  }
  
  .income-analysis-container {
    padding: 15px;
  }
}
</style>
