<template>
  <div class="current-report-section bg-white rounded-lg border border-gray-200">
    <div class="flex items-center p-4">
      <div class="w-8 h-8 flex items-center justify-center mr-2">
        <img src="@/assets/images/report/gl.png" alt="信用详情" class="w-8 h-8 object-contain" />
      </div>
      <span class="font-bold text-gray-800">信用详情</span>
    </div>

    <div class="p-4">
      <!-- 网络贷款类信用 -->
      <LTitle title="网络贷款类信用" />
      <div class="mt-3 mb-6">
        <div class="space-y-4 mb-4">
          <!-- 网贷授信额度 -->
          <div class="rounded-lg border border-[#2B79EE8F] bg-[#2B79EE1A] p-4 text-center">
            <div class="text-xl font-bold text-[#2B79EE] mb-1">
              {{ formatCreditAmount(data.C22180001) }}
            </div>
            <div class="text-sm font-medium text-gray-700 mb-1">网贷授信额度</div>
          </div>

          <!-- 网贷额度置信度 -->
          <div class="rounded-lg border border-[#2B79EE8F] bg-[#2B79EE1A] p-4">
            <div class="text-sm font-medium text-gray-700 mb-2 text-center">网贷额度置信度</div>
            <div class="h-40">
              <v-chart class="chart-container" :option="p2pConfidenceGaugeOption" autoresize />
            </div>
          </div>
        </div>

        <div class="bg-gray-50 rounded-lg p-4 space-y-3">
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">网络贷款类机构数</span>
            <span class="text-lg font-bold text-gray-800">{{ getValue(data.C22180003, '0') }} 家</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">网络贷款类产品数</span>
            <span class="text-lg font-bold text-gray-800">{{ getValue(data.C22180004, '0') }} 个</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">网络贷款机构最大授信额度</span>
            <span class="text-lg font-bold text-gray-800">{{ formatCreditAmount(data.C22180005) }}</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">网络贷款机构平均授信额度</span>
            <span class="text-lg font-bold text-gray-800">{{ formatCreditAmount(data.C22180006) }}</span>
          </div>
        </div>

        <!-- 授信额度对比图 -->
        <div class="mb-6">
          <LTitle title="授信额度对比" />
          <div class="h-64 mt-3">
            <v-chart class="chart-container" :option="creditAmountChartOption" autoresize />
          </div>
        </div>
      </div>

      <!-- 消金贷款类信用 -->
      <LTitle title="消金贷款类信用" />
      <div class="mt-3 mb-6">
        <div class="space-y-4 mb-4">
          <!-- 消金建议授信额度 -->
          <div class="rounded-lg border border-[#1FBE5D8F] bg-[#1FBE5D1A] p-4 text-center">
            <div class="text-xl font-bold text-[#1FBE5D] mb-1">
              {{ formatCreditAmount(data.C22180011) }}
            </div>
            <div class="text-sm font-medium text-gray-700 mb-1">消金建议授信额度</div>
          </div>

          <!-- 消金额度置信度 -->
          <div class="rounded-lg border border-[#1FBE5D8F] bg-[#1FBE5D1A] p-4">
            <div class="text-sm font-medium text-gray-700 mb-2 text-center">消金额度置信度</div>
            <div class="h-40">
              <v-chart class="chart-container" :option="consumerConfidenceGaugeOption" autoresize />
            </div>
          </div>
        </div>

        <div class="bg-gray-50 rounded-lg p-4 space-y-3">
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">消金贷款类机构数</span>
            <span class="text-lg font-bold text-gray-800">{{ getValue(data.C22180007, '0') }} 家</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">消金贷款类产品数</span>
            <span class="text-lg font-bold text-gray-800">{{ getValue(data.C22180008, '0') }} 个</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">消金贷款类机构最大授信额度</span>
            <span class="text-lg font-bold text-gray-800">{{ formatCreditAmount(data.C22180009) }}</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm text-gray-600">消金贷款类机构平均授信额度</span>
            <span class="text-lg font-bold text-gray-800">{{ formatCreditAmount(data.C22180010) }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 温馨提示 -->
    <Remark
      content="信用详情展示申请人在网络贷款和消金贷款领域的授信情况，包括授信额度、机构数、产品数等指标。授信额度反映了金融机构对申请人信用状况的评估，额度越高通常表示信用状况越好。建议关注授信额度置信度，置信度越高表示评估结果越可靠。同时需要结合申请人的实际借贷行为和还款记录进行综合评估。" />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import LTitle from '@/components/LTitle.vue'
import Remark from '@/components/Remark.vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart, GaugeChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import { formatCreditAmount, formatConfidence, getValue } from '../utils/formatUtils'

// 注册ECharts组件
use([
  CanvasRenderer,
  BarChart,
  GaugeChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})

// 网贷额度置信度仪表盘配置（50-100）
const p2pConfidenceGaugeOption = computed(() => {
  const confidence = parseInt(getValue(props.data.C22180002, '0')) || 0
  const percentage = confidence >= 50 ? ((confidence - 50) / 50) * 100 : 0
  
  // 根据置信度确定颜色
  let color = '#2B79EE' // 蓝色 - 高置信度
  if (confidence < 60) {
    color = '#faad14' // 黄色 - 中等置信度
  } else if (confidence < 70) {
    color = '#fa8c16' // 橙色 - 较低置信度
  }

  return {
    series: [
      {
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 100,
        radius: '90%',
        center: ['50%', '75%'],
        itemStyle: {
          color: color,
          shadowBlur: 6,
          shadowColor: color,
        },
        progress: {
          show: true,
          width: 18,
          roundCap: true,
        },
        axisLine: {
          roundCap: true,
          lineStyle: {
            width: 18,
            color: [
              [percentage / 100, color],
              [1, '#e5e7eb']
            ]
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        pointer: {
          show: false
        },
        detail: {
          valueAnimation: true,
          fontSize: 24,
          fontWeight: 'bold',
          color: color,
          offsetCenter: [0, '-5%'],
          formatter: '{value}%',
          rich: {
            value: {
              fontSize: 24,
              fontWeight: 'bold',
              color: color,
              lineHeight: 28
            }
          }
        },
        data: [
          {
            value: percentage
          }
        ],
        title: {
          fontSize: 14,
          color: '#666',
          offsetCenter: [0, '25%'],
          formatter: () => `${confidence}%`
        }
      }
    ]
  }
})

// 消金额度置信度仪表盘配置（50-100）
const consumerConfidenceGaugeOption = computed(() => {
  const confidence = parseInt(getValue(props.data.C22180012, '0')) || 0
  const percentage = confidence >= 50 ? ((confidence - 50) / 50) * 100 : 0
  
  // 根据置信度确定颜色
  let color = '#1FBE5D' // 绿色 - 高置信度
  if (confidence < 60) {
    color = '#faad14' // 黄色 - 中等置信度
  } else if (confidence < 70) {
    color = '#fa8c16' // 橙色 - 较低置信度
  }

  return {
    series: [
      {
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 100,
        radius: '90%',
        center: ['50%', '75%'],
        itemStyle: {
          color: color,
          shadowBlur: 6,
          shadowColor: color,
        },
        progress: {
          show: true,
          width: 18,
          roundCap: true,
        },
        axisLine: {
          roundCap: true,
          lineStyle: {
            width: 18,
            color: [
              [percentage / 100, color],
              [1, '#e5e7eb']
            ]
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        pointer: {
          show: false
        },
        detail: {
          valueAnimation: true,
          fontSize: 24,
          fontWeight: 'bold',
          color: color,
          offsetCenter: [0, '-5%'],
          formatter: '{value}%',
          rich: {
            value: {
              fontSize: 24,
              fontWeight: 'bold',
              color: color,
              lineHeight: 28
            }
          }
        },
        data: [
          {
            value: percentage
          }
        ],
        title: {
          fontSize: 14,
          color: '#666',
          offsetCenter: [0, '25%'],
          formatter: () => `${confidence}%`
        }
      }
    ]
  }
})

// 授信额度对比图配置
const creditAmountChartOption = computed(() => {
  const categories = ['网贷', '消金']
  const maxData = [
    parseInt(getValue(props.data.C22180005, '0')) || 0,
    parseInt(getValue(props.data.C22180009, '0')) || 0
  ]
  const avgData = [
    parseInt(getValue(props.data.C22180006, '0')) || 0,
    parseInt(getValue(props.data.C22180010, '0')) || 0
  ]

  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        let result = params[0].name + '<br/>'
        params.forEach(item => {
          const value = item.value >= 10000 
            ? `${(item.value / 10000).toFixed(2)}万元`
            : `${item.value}元`
          result += `${item.seriesName}: ${value}<br/>`
        })
        return result
      }
    },
    legend: {
      data: ['最大授信额度', '平均授信额度'],
      top: '5%',
      textStyle: {
        fontSize: 12
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '20%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: categories,
      axisLabel: {
        fontSize: 12,
        color: '#6b7280'
      },
      axisLine: {
        lineStyle: {
          color: '#e5e7eb'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        fontSize: 11,
        color: '#6b7280',
        formatter: function (value) {
          if (value >= 10000) {
            return `${(value / 10000).toFixed(1)}万`
          }
          return value
        }
      },
      splitLine: {
        lineStyle: {
          color: '#f3f4f6'
        }
      }
    },
    series: [
      {
        name: '最大授信额度',
        type: 'bar',
        data: maxData,
        barWidth: '30%',
        itemStyle: {
          color: '#2B79EE',
          borderRadius: [4, 4, 0, 0]
        },
        emphasis: {
          itemStyle: {
            color: '#1e5bb8'
          }
        },
        label: {
          show: true,
          position: 'top',
          fontSize: 11,
          color: '#333',
          formatter: function (params) {
            const value = params.value
            return value >= 10000 
              ? `${(value / 10000).toFixed(1)}万`
              : value
          }
        }
      },
      {
        name: '平均授信额度',
        type: 'bar',
        data: avgData,
        barWidth: '30%',
        itemStyle: {
          color: '#1FBE5D',
          borderRadius: [4, 4, 0, 0]
        },
        emphasis: {
          itemStyle: {
            color: '#179e4d'
          }
        },
        label: {
          show: true,
          position: 'top',
          fontSize: 11,
          color: '#333',
          formatter: function (params) {
            const value = params.value
            return value >= 10000 
              ? `${(value / 10000).toFixed(1)}万`
              : value
          }
        }
      }
    ]
  }
})
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>

