<template>
  <div class="rounded-lg border border-[#99999933] 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/fxzbxq.png" alt="风险指标详情" class="w-8 h-8 object-contain" />
      </div>
      <span class="font-bold text-gray-800">风险指标详情</span>
    </div>

    <!-- 核心风险指标 -->
    <div class="mb-6">
      <LTitle title="核心风险指标" class="mb-2" />
      <p class="text-xs text-[#999999] px-4 mb-3">关键风险评估指标汇总</p>

      <div class="space-y-3 px-4">
        <!-- 警示指标 -->
        <div class="bg-[#F9F5ED] border border-[#F0E2CB] rounded-xl">
          <h4 class="text-base font-bold text-[#333333] border-b border-[#F0E2CB]  px-4 py-2">警示指标</h4>
          <div class="space-y-2 p-4">
            <div class="flex justify-between items-center">
              <span class="text-sm text-[#999999]">最近1天申请机构</span>
              <span class="text-base font-bold text-[#333333]">{{ formatMetricValue(recent1DayInstitutions) }}家</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-[#999999]">最近7天申请机构</span>
              <span class="text-base font-bold text-[#333333]">{{ formatMetricValue(recent7DayInstitutions) }}家</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-[#999999]">履约金额指数</span>
              <span class="text-base font-bold text-[#333333]">{{ (amountComplianceIndex * 100).toFixed(0) }}%</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-[#999999]">履约笔数指数</span>
              <span class="text-base font-bold text-[#333333]">{{ (countComplianceIndex * 100).toFixed(0) }}%</span>
            </div>
          </div>
        </div>

        <!-- 正面指标 -->
        <div class="bg-[#ECF9EF] border border-[#CAECD3] rounded-xl">
          <h4 class="text-base font-bold text-[#333333]  px-4 py-2 border-b border-[#CAECD3]">正面指标</h4>
          <div class="space-y-2  p-4">
            <div class="flex justify-between items-center">
              <span class="text-sm text-[#999999]">已结清机构数</span>
              <span class="text-base font-bold text-[#333333]">{{ formatMetricValue(settledInstitutions) }}家</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-[#999999]">信用贷款时长</span>
              <span class="text-base font-bold text-[#333333]">{{ formatDays(creditLoanDuration) }}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-[#999999]">历史成功还款</span>
              <span class="text-base font-bold text-[#333333]">{{ formatMetricValue(historicalSuccessPayments)
                }}笔</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 交易失败后还款分析 -->
    <div class="mb-6">
      <LTitle title="交易失败后还款分析" class="mb-2" />
      <p class="text-xs text-[#999999] px-4 mb-3">失败后的恢复能力评估</p>

      <div class="space-y-3 px-4">
        <!-- 失败后还款次数 -->
        <div class="bg-[#F9F9F9] border border-[#EEEEEE] rounded-xl">
          <h4 class="text-base font-bold text-[#333333] px-4 py-2 border-b border-[#EEEEEE]">失败后还款次数</h4>
          <div class="space-y-3 p-4">
            <div class="flex items-center gap-3">
              <span class="text-sm text-[#999999] min-w-20">已结清机构数</span>
              <div class="flex-1 h-2 bg-[#E3EFFD] rounded-full overflow-hidden">
                <div class="h-full bg-[#2B79EE] rounded-full transition-all duration-300"
                  :style="`width: ${Math.max(getRecoveryPercentage(consumerFailureRecovery), 2)}%`"></div>
              </div>
              <span class="text-base font-bold text-[#333333] min-w-12 text-right">{{
                formatMetricValue(consumerFailureRecovery) }}次</span>
            </div>

            <div class="flex items-center gap-3">
              <span class="text-sm text-[#999999] min-w-20">信用贷款时长</span>
              <div class="flex-1 h-2 bg-[#E3EFFD] rounded-full overflow-hidden">
                <div class="h-full bg-[#2B79EE] rounded-full transition-all duration-300"
                  :style="`width: ${Math.max(getRecoveryPercentage(smallLoanFailureRecovery), 2)}%`"></div>
              </div>
              <span class="text-base font-bold text-[#333333] min-w-12 text-right">{{
                formatMetricValue(smallLoanFailureRecovery) }}次</span>
            </div>

            <div class="flex items-center gap-3">
              <span class="text-sm text-[#999999] min-w-20">历史成功还款</span>
              <div class="flex-1 h-2 bg-[#E3EFFD] rounded-full overflow-hidden">
                <div class="h-full bg-[#2B79EE] rounded-full transition-all duration-300"
                  :style="`width: ${Math.max(getRecoveryPercentage(overallFailureRecovery), 2)}%`"></div>
              </div>
              <span class="text-base font-bold text-[#333333] min-w-12 text-right">{{
                formatMetricValue(overallFailureRecovery) }}次</span>
            </div>
          </div>
        </div>

        <!-- 恢复时间分析 -->
        <div class="bg-[#F9F9F9] border border-[#EEEEEE] rounded-xl">
          <h4 class="text-base font-bold text-[#333333] px-4 py-2 border-b border-[#EEEEEE]">恢复时间分析</h4>
          <div class="p-4">
            <div class="flex justify-between items-center mb-2">
              <span class="text-sm text-[#999999]">平均恢复时间</span>
              <span class="text-base font-bold text-[#333333]">{{ formatDays(avgRecoveryTime) }}</span>
            </div>
            <div class="flex justify-between text-sm text-[#999999]">
              <span>最短: {{ formatDays(minRecoveryTime) }}</span>
              <span>最长: {{ formatDays(maxRecoveryTime) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 比例指标分析 -->
    <div class="mb-6">
      <LTitle title="比例指标分析" class="mb-2" />
      <p class="text-xs text-[#999999] px-4 mb-3">各类交易行为的比例统计</p>

      <div class="space-y-3 px-4">
        <!-- 金额比例指标 -->
        <div class="text-base font-bold text-[#333333]">金额比例指标</div>
        <div class="space-y-3">
          <div v-for="item in amountRatios" :key="item.id">
            <div class="bg-[#ECF2FD] border border-[#CADAF9] rounded-xl p-4">
              <div class="flex justify-between items-center mb-2">
                <span class="text-base font-bold text-[#333333]">{{ item.name }}</span>
                <span class="text-base font-bold text-[#333333]">{{ (item.ratio * 100).toFixed(1) }}%</span>
              </div>
              <div class="h-2 bg-[#DBE6FC] rounded-full overflow-hidden mb-1.5">
                <div class="h-full rounded-full transition-all duration-300"
                  :style="`width: ${Math.max(item.ratio * 100, 2)}%; background-color: #5079EA;`"></div>
              </div>
              <div class="text-sm text-[#999999]">{{ item.description }}</div>
            </div>
          </div>
        </div>

        <!-- 笔数比例指标 -->
        <div class="text-base font-bold text-[#333333]">笔数比例指标</div>
        <div class="space-y-3">
          <div v-for="item in countRatios" :key="item.id">
            <div class="rounded-xl p-4" :class="getRatioCardClass(item.id)">
              <div class="flex justify-between items-center mb-2">
                <span class="text-base font-bold text-[#333333]">{{ item.name }}</span>
                <span class="text-base font-bold text-[#333333]">{{ (item.ratio * 100).toFixed(1) }}%</span>
              </div>
              <div class="h-2 rounded-full overflow-hidden mb-1.5" :class="getRatioBarBgClass(item.id)">
                <div class="h-full rounded-full transition-all duration-300"
                  :style="`width: ${Math.max(item.ratio * 100, 2)}%; background-color: ${getRatioBarColor(item.id)};`">
                </div>
              </div>
              <div class="text-sm text-[#999999]">{{ item.description }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 特殊指标 -->
    <div class="mb-6">
      <LTitle title="特殊指标" class="mb-2" />
      <p class="text-xs text-[#999999] px-4 mb-3">其他重要风险评估指标</p>

      <div class="space-y-3 px-4">
        <!-- 时间相关指标 -->
        <div class="bg-[#F9F9F9] border border-[#EEEEEE] rounded-xl">
          <h4 class="text-base font-bold text-[#333333] px-4 py-2 border-b border-[#EEEEEE]">时间相关指标</h4>
          <div class="space-y-2 p-4">
            <div class="flex justify-between items-center">
              <span class="text-sm text-[#999999]">最近一次交易距今</span>
              <span class="text-base font-bold text-[#333333]">{{ formatDays(lastTransactionDays) }}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-[#999999]">最近一次还款距今</span>
              <span class="text-base font-bold text-[#333333]">{{ formatDays(lastRepaymentDays) }}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-[#999999]">信用贷款总时长</span>
              <span class="text-base font-bold text-[#333333]">{{ formatDays(creditLoanDuration) }}</span>
            </div>
          </div>
        </div>

        <!-- 交易失败机构 -->
        <div class="bg-[#F9F9F9] border border-[#EEEEEE] rounded-xl">
          <h4 class="text-base font-bold text-[#333333] px-4 py-2 border-b border-[#EEEEEE]">交易失败机构</h4>
          <div class="p-4">
            <div class="space-y-2" v-for="item in failureInstitutionTimeline" :key="item.period">
              <div class="flex justify-between items-center">
                <span class="text-sm text-[#999999]">{{ item.period }}</span>
                <span class="text-base font-bold text-[#333333]">{{ formatMetricValue(item.count) }}家</span>
              </div>
              <div class="h-2 bg-[#E3EFFD] rounded-full overflow-hidden">
                <div class="h-full rounded-full transition-all duration-300 bg-[#2B79EE]"
                  :style="`width: ${Math.max(item.percentage, 2)}%`"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 新增机构比例 -->
        <div class="bg-[#F9F9F9] border border-[#EEEEEE] rounded-xl">
          <h4 class="text-base font-bold text-[#333333] px-4 py-2 border-b border-[#EEEEEE]">新增机构比例</h4>
          <div class="space-y-2 p-4">
            <div class="flex justify-between items-center" v-for="item in newInstitutionRatios" :key="item.period">
              <span class="text-sm text-[#999999]">{{ item.period }}</span>
              <span class="text-base font-bold text-[#333333]">{{ (item.ratio * 100).toFixed(0) }}%</span>
            </div>
          </div>
        </div>

        <!-- 交易金额统计 -->
        <div class="bg-[#F9F9F9] border border-[#EEEEEE] rounded-xl">
          <h4 class="text-base font-bold text-[#333333] px-4 py-2 border-b border-[#EEEEEE]">交易金额统计</h4>
          <div class="space-y-2 p-4">
            <div class="flex justify-between items-center">
              <span class="text-sm text-[#999999]">近90天最大交易金额</span>
              <span class="text-base font-bold text-[#333333]">{{ formatAmount(parseIntervalValue(data.xyp_t01aafzzz))
                }}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-[#999999]">近90天最小交易金额</span>
              <span class="text-base font-bold text-[#333333]">{{ formatAmount(parseIntervalValue(data.xyp_t01abfzzz))
                }}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-[#999999]">近90天平均交易金额</span>
              <span class="text-base font-bold text-[#333333]">{{ formatAmount(parseIntervalValue(data.xyp_t01adfzzz))
                }}</span>
            </div>
          </div>
        </div>

        <!-- 机构去重统计 -->
        <div class="bg-[#F9F9F9] border border-[#EEEEEE] rounded-xl">
          <h4 class="text-base font-bold text-[#333333] px-4 py-2 border-b border-[#EEEEEE]">机构去重统计</h4>
          <div class="space-y-2 p-4">
            <div class="flex justify-between items-center">
              <span class="text-sm text-[#999999]">近20次交易还款成功机构</span>
              <span class="text-base font-bold text-[#333333]">{{
                formatMetricValue(parseIntervalValue(data.xyp_t01dejzzc)) }}家</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-[#999999]">近50次交易还款成功机构</span>
              <span class="text-base font-bold text-[#333333]">{{
                formatMetricValue(parseIntervalValue(data.xyp_t01dekzzc)) }}家</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-[#999999]">近100次交易还款成功机构</span>
              <span class="text-base font-bold text-[#333333]">{{
                formatMetricValue(parseIntervalValue(data.xyp_t01delzzc)) }}家</span>
            </div>
          </div>
        </div>

        <!-- 特殊风险指标 -->
        <div class="bg-[#F9F9F9] border border-[#EEEEEE] rounded-xl">
          <h4 class="text-base font-bold text-[#333333] px-4 py-2 border-b border-[#EEEEEE]">特殊风险指标</h4>
          <div class="space-y-2 p-4">
            <div class="flex justify-between items-center">
              <span class="text-sm text-[#999999]">最近90天交易失败机构</span>
              <span class="text-base font-bold text-[#333333]">{{
                formatMetricValue(parseIntervalValue(data.xyp_t03td111))
                }}家</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-[#999999]">最近180天交易失败机构</span>
              <span class="text-base font-bold text-[#333333]">{{
                formatMetricValue(parseIntervalValue(data.xyp_t03td115))
                }}家</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-[#999999]">最近一次交易为失败机构</span>
              <span class="text-base font-bold text-[#333333]">{{
                formatMetricValue(parseIntervalValue(data.xyp_t03td148))
                }}家</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 温馨提示 -->
  <div class="px-4 pb-4">
    <LRemark
      content="风险指标详情提供全面的风险评估指标分析，包括核心风险指标、警示指标和风险分布统计。核心风险指标包括当前逾期、近期逾期和信用风险评分等严重风险项目。警示指标涵盖申请频率、机构数量等预警信息。建议重点关注严重风险指标，及时评估申请人的还款能力和信用状况。指标数据基于多维度风险模型计算，具有较高的预测准确性。" />
  </div>
</template>

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

export default {
  name: 'RiskIndicators',
  components: {
    LTitle,
    LRemark
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    // 核心风险指标
    hasCurrentOverdue() {
      return this.data.xyp_cpl0044 === '1'
    },
    currentOverdueInstitutions() {
      return this.parseIntervalValue(this.data.xyp_cpl0071)
    },
    hasRecentOverdue() {
      return this.data.xyp_cpl0028 === '1' || this.data.xyp_cpl0029 === '1' || this.data.xyp_cpl0030 === '1'
    },
    creditRiskScore() {
      return parseFloat(this.data.xyp_cpl0081) || 0
    },
    highCreditRisk() {
      return this.creditRiskScore > 0.7
    },
    hasCriticalRisk() {
      return this.hasCurrentOverdue || this.hasRecentOverdue || this.highCreditRisk
    },

    // 警示指标
    recent1DayInstitutions() {
      return this.parseIntervalValue(this.data.xyp_cpl0070)
    },
    recent7DayInstitutions() {
      return this.parseIntervalValue(this.data.xyp_cpl0009)
    },
    amountComplianceIndex() {
      return parseFloat(this.data.xyp_cpl0082) || 0
    },
    countComplianceIndex() {
      return parseFloat(this.data.xyp_cpl0083) || 0
    },

    // 正面指标
    settledInstitutions() {
      return this.parseIntervalValue(this.data.xyp_cpl0002)
    },
    creditLoanDuration() {
      return this.parseIntervalValue(this.data.xyp_cpl0045)
    },
    historicalSuccessPayments() {
      return this.parseIntervalValue(this.data.xyp_cpl0014)
    },

    // 交易失败后还款分析
    consumerFailureRecovery() {
      return this.parseIntervalValue(this.data.xyp_cpl0052)
    },
    smallLoanFailureRecovery() {
      return this.parseIntervalValue(this.data.xyp_cpl0053)
    },
    overallFailureRecovery() {
      return this.parseIntervalValue(this.data.xyp_cpl0069)
    },

    // 恢复时间分析
    avgRecoveryTime() {
      return this.parseIntervalValue(this.data.xyp_cpl0062)
    },
    minRecoveryTime() {
      return this.parseIntervalValue(this.data.xyp_cpl0059)
    },
    maxRecoveryTime() {
      return this.parseIntervalValue(this.data.xyp_cpl0056)
    },

    // 金额比例指标
    amountRatios() {
      return [
        {
          id: 'recent_90_amount_ratio',
          name: '近90天还款成功金额比例',
          ratio: parseFloat(this.data.xyp_t02acfzbc_acfzbz) || 0,
          description: '小贷担保类近90天还款成功金额占比'
        },
        {
          id: 'recent_180_amount_ratio',
          name: '近180天还款成功金额比例',
          ratio: parseFloat(this.data.xyp_t02acgzbc_acgzbz) || 0,
          description: '小贷担保类近180天还款成功金额占比'
        },
        {
          id: 'recent_360_amount_ratio',
          name: '近360天还款成功金额比例',
          ratio: parseFloat(this.data.xyp_t02achzbc_achzbz) || 0,
          description: '小贷担保类近360天还款成功金额占比'
        },
        {
          id: 'failure_amount_ratio',
          name: '交易失败金额比例',
          ratio: parseFloat(this.data.xyp_t02aczzza_aczzzz) || 0,
          description: '因交易能力不足导致失败的金额占总交易金额比例'
        }
      ]
    },

    // 笔数比例指标
    countRatios() {
      return [
        {
          id: 'recent_90_count_ratio',
          name: '近90天还款成功笔数比例',
          ratio: parseFloat(this.data.xyp_t02ccfzbc_ccfzbz) || 0,
          description: '小贷担保类近90天还款成功笔数占比'
        },
        {
          id: 'recent_180_count_ratio',
          name: '近180天还款成功笔数比例',
          ratio: parseFloat(this.data.xyp_t02ccgzbc_ccgzbz) || 0,
          description: '小贷担保类近180天还款成功笔数占比'
        },
        {
          id: 'recent_360_count_ratio',
          name: '近360天还款成功笔数比例',
          ratio: parseFloat(this.data.xyp_t02cchzbc_cchzbz) || 0,
          description: '小贷担保类近360天还款成功笔数占比'
        },
        {
          id: 'overall_success_ratio',
          name: '总体还款成功率',
          ratio: parseFloat(this.data.xyp_t02cczzzc_cczzzz) || 0,
          description: '历史总体还款成功笔数占比'
        },
        {
          id: 'recent_5_failure_ratio',
          name: '近5次交易失败比例',
          ratio: parseFloat(this.data.xyp_t02ccizza_cczzza) || 0,
          description: '近5次交易中因交易能力不足导致失败的笔数占比'
        },
        {
          id: 'recent_30_failure_ratio',
          name: '近30天交易失败比例',
          ratio: parseFloat(this.data.xyp_t02ccezza_cczzza) || 0,
          description: '近30天因交易能力不足导致失败的笔数占比'
        },
        {
          id: 'recent_90_failure_ratio',
          name: '近90天交易失败比例',
          ratio: parseFloat(this.data.xyp_t02ccfzza_cczzza) || 0,
          description: '近90天因交易能力不足导致失败的笔数占比'
        },
        {
          id: 'recent_180_failure_ratio',
          name: '近180天交易失败比例',
          ratio: parseFloat(this.data.xyp_t02ccgzza_ccgzzz) || 0,
          description: '近180天因交易能力不足导致失败的笔数占比'
        }
      ]
    },

    // 特殊指标
    lastTransactionDays() {
      return this.parseIntervalValue(this.data.xyp_cpl0046)
    },
    lastRepaymentDays() {
      return this.parseIntervalValue(this.data.xyp_cpl0068)
    },

    // 交易失败机构时间线
    failureInstitutionTimeline() {
      const items = [
        { period: '7天', count: this.parseIntervalValue(this.data.xyp_cpl0048) },
        { period: '14天', count: this.parseIntervalValue(this.data.xyp_cpl0049) },
        { period: '21天', count: this.parseIntervalValue(this.data.xyp_cpl0050) },
        { period: '30天', count: this.parseIntervalValue(this.data.xyp_cpl0051) },
        { period: '90天', count: this.parseIntervalValue(this.data.xyp_t03td045) },
        { period: '180天', count: this.parseIntervalValue(this.data.xyp_t03td053) }
      ]

      const maxCount = Math.max(...items.map(item => item.count)) || 1
      return items.map(item => ({
        ...item,
        percentage: (item.count / maxCount) * 100
      }))
    },

    // 新增机构比例
    newInstitutionRatios() {
      return [
        {
          period: '30天',
          ratio: parseFloat(this.data.xyp_t02dezezz_dezzzz) || 0
        },
        {
          period: '90天',
          ratio: parseFloat(this.data.xyp_t02dezfzz_dezzzz) || 0
        },
        {
          period: '180天',
          ratio: parseFloat(this.data.xyp_t02dezgzz_dezzzz) || 0
        }
      ]
    }
  },

  methods: {
    parseIntervalValue(value) {
      if (!value || value === '' || value === '-1') return 0
      const num = parseInt(value)
      if (isNaN(num)) return 0

      // 根据区间映射返回大致范围的中值
      switch (num) {
        case 1: return 1
        case 2: return 3
        case 3: return 7
        case 4: return 15
        case 5: return 25
        default: return num
      }
    },

    formatMetricValue(value) {
      if (value === 0) return '0'
      if (value < 5) return `${value}`
      return `${value}+`
    },

    formatDays(value) {
      if (value === 0) return '无记录'
      if (value < 30) return `${value}天`
      if (value < 365) return `${Math.floor(value / 30)}个月`
      return `${Math.floor(value / 365)}年`
    },

    formatAmount(value) {
      if (value === 0) return '0元'
      if (value < 1000) return `${value}元`
      if (value < 10000) return `${(value / 1000).toFixed(1)}千元`
      return `${(value / 10000).toFixed(1)}万元`
    },

    getWarningClass(value) {
      if (value === 0) return 'text-green-600'
      if (value < 3) return 'text-yellow-600'
      return 'text-red-600'
    },

    getIndexClass(index) {
      if (index < 0.3) return 'text-green-600'
      if (index < 0.7) return 'text-yellow-600'
      return 'text-red-600'
    },

    getRecoveryPercentage(recovery) {
      // 假设最大恢复次数为10次
      return Math.min((recovery / 10) * 100, 100)
    },

    getRatioClass(ratio) {
      if (ratio >= 0.8) return 'text-green-600'
      if (ratio >= 0.6) return 'text-yellow-600'
      return 'text-red-600'
    },

    getRatioBarClass(ratio) {
      if (ratio >= 0.8) return 'bg-green-500'
      if (ratio >= 0.6) return 'bg-yellow-500'
      return 'bg-red-500'
    },

    getFailureClass(count) {
      if (count === 0) return 'text-green-600'
      if (count < 3) return 'text-yellow-600'
      return 'text-red-600'
    },

    getFailureBarClass(count) {
      if (count === 0) return 'bg-green-500'
      if (count < 3) return 'bg-yellow-500'
      return 'bg-red-500'
    },

    getCircleStyle(ratio) {
      let color = '#ef4444'
      if (ratio < 0.3) color = '#10b981'
      else if (ratio < 0.6) color = '#f59e0b'

      // 确保至少显示10度，让用户知道是图表
      const minDegree = 10
      const actualDegree = Math.max(ratio * 360, minDegree)

      return {
        background: `conic-gradient(${color} ${actualDegree}deg, #e5e7eb 0deg)`
      }
    },

    getRatioCardClass(id) {
      // 失败相关的指标使用红色，总体还款成功率使用绿色，其他使用蓝色
      if (id === 'overall_success_ratio') {
        return 'bg-[#ECF9EF] border border-[#CAECD3]'
      } else if (id.includes('failure')) {
        return 'bg-[#F9ECEC] border border-[#F0CACA]'
      }
      return 'bg-[#ECF2FD] border border-[#CADAF9]'
    },

    getRatioBarBgClass(id) {
      // 失败相关的指标使用红色背景，总体还款成功率使用绿色背景，其他使用蓝色背景
      if (id === 'overall_success_ratio') {
        return 'bg-[#CAECD3]'
      } else if (id.includes('failure')) {
        return 'bg-[#F0CACA]'
      }
      return 'bg-[#DBE6FC]'
    },

    getRatioBarColor(id) {
      // 失败相关的指标使用红色，总体还款成功率使用绿色，其他使用蓝色
      if (id === 'overall_success_ratio') {
        return '#5EBC62'
      } else if (id.includes('failure')) {
        return '#D44643'
      }
      return '#5079EA'
    }
  }
}
</script>

<style scoped>
/* 组件样式已使用 Tailwind CSS */
</style>
