<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/srpg.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 text-center">
          <div class="text-sm text-gray-600 mb-2">预估月收入</div>
          <div class="text-3xl font-bold mb-3 text-[#333333]">
            <span class="income-amount-number">{{ getIncomeAmount(data.level) }}</span>
            <span class="income-amount-unit">元</span>
          </div>
          <div class="level-bar" :style="getLevelBarBgStyle(data.level)">
            <div class="level-fill" :style="getLevelBarStyle(data.level)"></div>
          </div>
          <div class="text-sm text-gray-600 mt-2">{{ getIncomeDescription(data.level) }}</div>
        </div>

        <!-- 评估结果 -->
        <div class="assessment-card" :class="getCardClass(data.level)">
          <div class="flex items-center">
            <div class="mr-4 mt-1">
              <img :src="getIconPath(data.level)" alt="评估结果" class="w-12 h-12 object-contain" />
            </div>
            <div class="flex-1">
              <div class="flex items-center justify-between mb-2">
                <h4 class="font-semibold text-gray-800">评估结果</h4>
              </div>
              <p class="text-gray-400 text-sm">
                {{ getAssessmentDescription(data.level) }}
              </p>
            </div>
          </div>
        </div>

        <!-- 市场对比 -->
        <div class="assessment-card" :class="getCardClass(data.level)">
          <div class="flex items-center mb-8">
            <div class="mr-4 mt-1">
              <img :src="getIconPath(data.level)" alt="市场对比" class="w-12 h-12 object-contain" />
            </div>
            <div class="flex-1">
              <div class="flex items-center justify-between mb-2">
                <h4 class="font-semibold text-gray-800">市场对比</h4>
              </div>
              <p class="text-gray-400 text-sm">
                {{ getMarketComparison(data.level) }}
              </p>
            </div>
          </div>
          <div class="comparison-indicator mt-4">
            <div class="indicator-bar">
              <div class="indicator-fill" :style="getIndicatorStyle(data.level)"></div>
              <div class="indicator-marker" :style="getMarkerPosition(data.level)">
                <img src="@/assets/images/report/srbq.png" alt="市场对比" class="marker-image" />
                <div class="marker-dot"></div>
              </div>
            </div>
            <div class="indicator-labels">
              <span>低收入</span>
              <span>高收入</span>
            </div>
          </div>
        </div>

        <!-- 信用风险 -->
        <div class="assessment-card risk-card" :class="getCardClass(data.level)">
          <div class="risk-level-badge" :class="getRiskClass(data.level)">
            {{ getRiskLevel(data.level) }}
          </div>
          <div class="flex items-center">
            <div class="mr-4 mt-1">
              <img :src="getIconPath(data.level)" alt="信用风险" class="w-12 h-12 object-contain" />
            </div>
            <div class="flex-1">
              <div class="mb-2">
                <h4 class="font-semibold text-gray-800">信用风险</h4>
              </div>
              <p class="text-gray-400 text-sm">
                {{ getRiskAssessment(data.level) }}
              </p>
            </div>
          </div>
        </div>

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

<script setup>
import { computed, watch } from 'vue'
import { useRiskNotifier } from '@/composables/useRiskNotifier';
import LTitle from '@/components/LTitle.vue'

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

// 确保data是响应式的
const data = computed(() => props.data || {})

// 收入范围映射
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 getIncomeAmount = (level) => {
  const amountMap = {
    '-': '查询无社保记录',
    '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 amountMap[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 getLevelBarStyle = (level) => {
  const levelOrder = ['-', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
  const levelIndex = levelOrder.findIndex(l => l === level)
  const percentage = levelIndex >= 0 ? ((levelIndex + 1) / levelOrder.length) * 100 : 0

  // 按档次划分颜色：低=红色，中=黄色，高=绿色
  let color = '#94a3b8' // 默认灰色
  if (level === '-') color = '#94a3b8' // 无记录
  else if (['A', 'B', 'C'].includes(level)) color = '#ef4444' // 低=红色
  else if (['D', 'E', 'F'].includes(level)) color = '#eab308' // 中=黄色
  else if (['G', 'H', 'I', 'J'].includes(level)) color = '#5EBC62' // 高=绿色

  return {
    width: percentage + '%',
    background: color
  }
}

// 进度条背景色样式
const getLevelBarBgStyle = (level) => {
  // 根据收入等级返回对应的淡色背景
  let bgColor = '#e5e7eb' // 默认灰色背景
  if (level === '-') bgColor = '#e5e7eb' // 无记录
  else if (['A', 'B', 'C'].includes(level)) bgColor = '#fee2e2' // 低=淡红色
  else if (['D', 'E', 'F'].includes(level)) bgColor = '#fef3c7' // 中=淡黄色
  else if (['G', 'H', 'I', 'J'].includes(level)) bgColor = '#ECF9EF' // 高=淡绿色

  return {
    background: bgColor
  }
}

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

// 市场对比分析
const getMarketComparison = (level) => {
  const comparisons = {
    '-': '无社保记录，无法与市场平均水平进行对比。',
    'A': '低于市场平均收入水平，处于收入分布的底部区间。',
    'B': '略低于市场平均收入水平，处于收入分布的中下区间。',
    'C': '接近市场平均收入水平，处于收入分布的中等区间。',
    'D': '高于市场平均收入水平，处于收入分布的中上区间。',
    'E': '明显高于市场平均收入水平，处于收入分布的上层区间。',
    'F': '显著高于市场平均收入水平，处于收入分布的高层区间。',
    'G': '远高于市场平均收入水平，处于收入分布的顶部区间。',
    'H': '远超市场平均收入水平，处于收入分布的精英区间。',
    'I': '极高于市场平均收入水平，处于收入分布的卓越区间。',
    'J': '超越市场绝大多数收入水平，处于收入分布的顶级区间。'
  }
  return comparisons[level] || '数据异常，无法进行市场对比。'
}

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

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

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

// 指示器样式
const getIndicatorStyle = (level) => {
  const levelOrder = ['-', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
  const levelIndex = levelOrder.findIndex(l => l === 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 = (level) => {
  const levelOrder = ['-', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
  const levelIndex = levelOrder.findIndex(l => l === level)
  const percentage = levelIndex >= 0 ? (levelIndex / (levelOrder.length - 1)) * 100 : 0
  return {
    left: percentage + '%'
  }
}

// 获取图标路径（根据风险等级）
const getIconPath = (level) => {
  // 高风险和中高风险使用 gfx
  if (['-', 'A'].includes(level)) {
    return new URL('@/assets/images/report/gfx.png', import.meta.url).href
  }
  // 中等风险和中低风险使用 zfx
  if (['B', 'C'].includes(level)) {
    return new URL('@/assets/images/report/zfx.png', import.meta.url).href
  }
  // 低风险、很低风险、极低风险、无风险、零风险使用 zq
  return new URL('@/assets/images/report/zq.png', import.meta.url).href
}

// 获取卡片样式类（根据风险等级）
const getCardClass = (level) => {
  // 高风险和中高风险 - 红色
  if (['-', 'A'].includes(level)) {
    return 'card-risk-high'
  }
  // 中等风险和中低风险 - 黄色
  if (['B', 'C'].includes(level)) {
    return 'card-risk-medium'
  }
  // 低风险、很低风险、极低风险、无风险、零风险 - 绿色
  return 'card-risk-low'
}

// 计算风险评分（0-100分，分数越高越安全）
const riskScore = computed(() => {
  // 收入评估不算风险，始终返回100分（最安全）
  return 100;
});

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

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

<style scoped>
/* 收入范围颜色 */
.range-none {
  color: #94a3b8;
}

.range-low {
  color: #f59e0b;
}

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

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

/* 收入数字样式 */
.income-amount-number {
  color: #333333;
  font-weight: bold;
}

.income-amount-unit {
  font-size: 0.5em;
  color: #999999;
  margin-left: 4px;
}

/* 进度条 */
.level-bar {
  height: 12px;
  border-radius: 8px;
  overflow: hidden;
}

.level-fill {
  height: 100%;
  border-radius: 4px;
  transition: all 0.6s ease;
}

/* 评估卡片 */
.assessment-card {
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid;
}

/* 信用风险卡片 */
.risk-card {
  position: relative;
}

/* 高风险卡片 - 红色 */
.card-risk-high {
  background: #fef2f2;
  border-color: #fecaca;
}

/* 中等风险卡片 - 黄色 */
.card-risk-medium {
  background: #fffbeb;
  border-color: #fef3c7;
}

/* 低风险卡片 - 绿色 */
.card-risk-low {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

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

.indicator-bar {
  position: relative;
  height: 6px;
  border-radius: 3px;
  margin-bottom: 8px;
  background: linear-gradient(90deg, #ef4444 0%, #eab308 50%, #22c55e 100%);
}

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

.indicator-marker {
  position: absolute;
  top: -26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.marker-image {
  width: 24px;
  margin-bottom: 0px;
}

.marker-dot {
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  box-shadow: 0px 4px 4px 0px #00000040;
}

.indicator-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #9ca3af;
}

/* 风险等级标签 */
.risk-level-badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px 6px;
  border-radius: 0 8px 0 8px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 1;
}

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

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

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

.risk-none {
  background: #2563eb;
  color: white;
}
</style>
