<template>
  <div class="">
    <div class="rounded-lg border border-[#99999933] mb-4">
      <div class="pb-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/jgfx.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-gray-400 text-sm mb-4 px-4">不同类型贷款机构数量统计</p>

          <div class="space-y-3 px-4">
            <!-- 消费金融类 -->
            <div class="bg-[#ECF2FD] rounded-lg p-4 border border-[#CADAF9] relative">
              <div class="flex items-center">
                <div class="flex-1">
                  <div class="font-bold text-[#333333] mb-1">消费金融类</div>
                  <div class="text-sm text-[#999999]">有场景分期贷款</div>
                </div>
              </div>
              <div class="absolute top-0 right-0 bg-[#5079EA] text-white px-2 py-1 rounded-bl-lg rounded-tr-lg text-xs">
                {{ formatMetricValue(consumerFinanceInstitutions) }} 家机构
              </div>
            </div>

            <!-- 小贷担保类 -->
            <div class="bg-[#ECF2FD] rounded-lg p-4 border border-[#CADAF9] relative">
              <div class="flex items-center">
                <div class="flex-1">
                  <div class="font-bold text-[#333333] mb-1">小贷担保类</div>
                  <div class="text-sm text-[#999999]">现金贷等小额贷款</div>
                </div>
              </div>
              <div class="absolute top-0 right-0 bg-[#5079EA] text-white px-2 py-1 rounded-bl-lg rounded-tr-lg text-xs">
                {{ formatMetricValue(smallLoanSuccessInstitutions) }} 家机构
              </div>
            </div>

            <!-- 网络贷款类 -->
            <div class="bg-[#ECF2FD] rounded-lg p-4 border border-[#CADAF9] relative">
              <div class="flex items-center">
                <div class="flex-1">
                  <div class="font-bold text-[#333333] mb-1">网络贷款类</div>
                  <div class="text-sm text-[#999999]">网络现金贷</div>
                </div>
              </div>
              <div class="absolute top-0 right-0 bg-[#5079EA] text-white px-2 py-1 rounded-bl-lg rounded-tr-lg text-xs">
                {{ formatMetricValue(networkLoanInstitutions) }} 家机构
              </div>
            </div>
          </div>
        </div>

        <!-- 交易金额统计 -->
        <div class="mb-6">
          <LTitle title="交易金额统计" class="mb-2" />
          <p class="text-gray-400 text-sm mb-4 px-4">不同时间段的交易金额分析</p>

          <!-- 数据表格 -->
          <div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
            <!-- 表头 -->
            <div class="bg-[#922D2A] text-white">
              <div class="grid grid-cols-5 text-sm" style="grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;">
                <div class="py-3 px-4 text-left font-semibold border-r border-white whitespace-nowrap">时间段</div>
                <div class="py-3 px-4 text-center font-semibold border-r border-white whitespace-nowrap">最大</div>
                <div class="py-3 px-4 text-center font-semibold border-r border-white whitespace-nowrap">最小</div>
                <div class="py-3 px-4 text-center font-semibold border-r border-white whitespace-nowrap">平均</div>
                <div class="py-3 px-4 text-center font-semibold whitespace-nowrap">总计</div>
              </div>
            </div>

            <!-- 数据行 -->
            <div class="bg-white">
              <!-- 近5次 -->
              <div class="grid grid-cols-5 border-b border-gray-200 text-sm"
                style="grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;">
                <div class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">近5次</div>
                <div class="py-3 px-4 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
                  {{ formatAmount(transactionAmountStats.recent5.max) }}
                </div>
                <div class="py-3 px-4 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
                  {{ formatAmount(transactionAmountStats.recent5.min) }}
                </div>
                <div class="py-3 px-4 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
                  {{ formatAmount(transactionAmountStats.recent5.avg) }}
                </div>
                <div class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">
                  {{ formatAmount(transactionAmountStats.recent5.sum) }}
                </div>
              </div>

              <!-- 近20次 -->
              <div class="grid grid-cols-5 border-b border-gray-200 text-sm"
                style="grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;">
                <div class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">近20次</div>
                <div class="py-3 px-4 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
                  {{ formatAmount(transactionAmountStats.recent20.max) }}
                </div>
                <div class="py-3 px-4 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
                  {{ formatAmount(transactionAmountStats.recent20.min) }}
                </div>
                <div class="py-3 px-4 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
                  {{ formatAmount(transactionAmountStats.recent20.avg) }}
                </div>
                <div class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">
                  {{ formatAmount(transactionAmountStats.recent20.sum) }}
                </div>
              </div>

              <!-- 近50次 -->
              <div class="grid grid-cols-5 border-b border-gray-200 text-sm"
                style="grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;">
                <div class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">近50次</div>
                <div class="py-3 px-4 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
                  {{ formatAmount(transactionAmountStats.recent50.max) }}
                </div>
                <div class="py-3 px-4 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
                  {{ formatAmount(transactionAmountStats.recent50.min) }}
                </div>
                <div class="py-3 px-4 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
                  {{ formatAmount(transactionAmountStats.recent50.avg) }}
                </div>
                <div class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">
                  {{ formatAmount(transactionAmountStats.recent50.sum) }}
                </div>
              </div>

              <!-- 近100次 -->
              <div class="grid grid-cols-5 text-sm" style="grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;">
                <div class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">近100次</div>
                <div class="py-3 px-4 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
                  {{ formatAmount(transactionAmountStats.recent100.max) }}
                </div>
                <div class="py-3 px-4 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
                  {{ formatAmount(transactionAmountStats.recent100.min) }}
                </div>
                <div class="py-3 px-4 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
                  {{ formatAmount(transactionAmountStats.recent100.avg) }}
                </div>
                <div class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">
                  {{ formatAmount(transactionAmountStats.recent100.sum) }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 机构风险评估 -->
        <div class="mb-6">
          <LTitle title="机构风险评估" class="mb-2" />
          <p class="text-gray-400 text-sm mb-4 px-4">不同风险等级的机构分布</p>

          <div class="space-y-3 px-4">
            <!-- 高风险 -->
            <div class="bg-[#FFF0F0] rounded-lg p-4 border border-[#F0CACA] relative">
              <div class="flex items-center">
                <div class="flex-1">
                  <div class="font-bold text-[#333333] mb-1">高风险</div>
                  <div class="text-sm text-[#999999]">多次失败</div>
                </div>
              </div>
              <div class="absolute top-0 right-0 bg-[#D44643] text-white px-2 py-1 rounded-bl-lg rounded-tr-lg text-xs">
                {{ formatMetricValue(highRiskInstitutions) }} 家
              </div>
            </div>

            <!-- 中风险 -->
            <div class="bg-[#FFF8E7] rounded-lg p-4 border border-[#F5D980] relative">
              <div class="flex items-center">
                <div class="flex-1">
                  <div class="font-bold text-[#333333] mb-1">中风险</div>
                  <div class="text-sm text-[#999999]">偶有失败</div>
                </div>
              </div>
              <div class="absolute top-0 right-0 bg-[#F5A623] text-white px-2 py-1 rounded-bl-lg rounded-tr-lg text-xs">
                {{ formatMetricValue(mediumRiskInstitutions) }} 家
              </div>
            </div>

            <!-- 低风险 -->
            <div class="bg-[#ECF9EF] rounded-lg p-4 border border-[#CAECD3] relative">
              <div class="flex items-center">
                <div class="flex-1">
                  <div class="font-bold text-[#333333] mb-1">低风险</div>
                  <div class="text-sm text-[#999999]">记录良好</div>
                </div>
              </div>
              <div class="absolute top-0 right-0 bg-[#5EBC62] text-white px-2 py-1 rounded-bl-lg rounded-tr-lg text-xs">
                {{ formatMetricValue(lowRiskInstitutions) }} 家
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 温馨提示 -->
  <LRemark
    content="机构分析提供申请人在不同类型金融机构中的借贷表现和风险情况。包括消费金融类、小贷担保类和网络贷款类机构的数量统计和交易金额分析。通过机构分布情况可以了解申请人的借贷偏好和风险集中度。建议关注机构数量过多或单一机构集中度过高的情况，这可能暗示过度借贷或特定风险。" />
</template>

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

export default {
  name: 'InstitutionAnalysis',
  components: {
    LTitle,
    LRemark
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    // 消费金融类机构数
    consumerFinanceInstitutions() {
      return this.parseIntervalValue(this.data.xyp_cpl0007)
    },

    // 小贷担保类成功还款机构数
    smallLoanSuccessInstitutions() {
      return this.parseIntervalValue(this.data.xyp_t01degzbc)
    },

    // 网络贷款类机构数（估算）
    networkLoanInstitutions() {
      const total = this.parseIntervalValue(this.data.xyp_cpl0001)
      const consumer = this.consumerFinanceInstitutions
      const smallLoan = this.parseIntervalValue(this.data.xyp_cpl0008)
      return Math.max(0, total - consumer - smallLoan)
    },

    // 交易金额统计（最大值、最小值、平均值）
    transactionAmountStats() {
      return {
        // 近5次交易
        recent5: {
          max: this.parseIntervalValue(this.data.xyp_t01aaizzz),
          min: this.parseIntervalValue(this.data.xyp_t01abizbz),
          avg: this.parseIntervalValue(this.data.xyp_t01adizzz),
          sum: this.parseIntervalValue(this.data.xyp_t01acizzz)
        },
        // 近20次交易
        recent20: {
          max: this.parseIntervalValue(this.data.xyp_t01aajzzc),
          min: this.parseIntervalValue(this.data.xyp_t01abjzzc),
          avg: this.parseIntervalValue(this.data.xyp_t01adjzzc),
          sum: this.parseIntervalValue(this.data.xyp_t01acjzzz)
        },
        // 近50次交易
        recent50: {
          max: this.parseIntervalValue(this.data.xyp_t01aakzzz),
          min: this.parseIntervalValue(this.data.xyp_t01abkzbz),
          avg: this.parseIntervalValue(this.data.xyp_t01adkzzc),
          sum: this.parseIntervalValue(this.data.xyp_t01ackzzz)
        },
        // 近100次交易
        recent100: {
          max: this.parseIntervalValue(this.data.xyp_t01aalzzz),
          min: this.parseIntervalValue(this.data.xyp_t01ablzbc),
          avg: this.parseIntervalValue(this.data.xyp_t01adlzzc),
          sum: this.parseIntervalValue(this.data.xyp_t01aclzzz)
        }
      }
    },

    // 机构风险评估
    highRiskInstitutions() {
      // 基于交易失败机构数估算
      return this.parseIntervalValue(this.data.xyp_t03td111) || 0
    },

    mediumRiskInstitutions() {
      // 基于部分失败机构数估算
      const total = this.parseIntervalValue(this.data.xyp_cpl0001)
      const high = this.highRiskInstitutions
      const low = this.lowRiskInstitutions
      return Math.max(0, total - high - low)
    },

    lowRiskInstitutions() {
      // 基于成功还款机构数
      return this.parseIntervalValue(this.data.xyp_t01degzzc) || 0
    }
  },
  methods: {
    parseIntervalValue(value) {
      if (value === null || value === undefined || value === '') return 0
      const num = parseInt(value)
      if (isNaN(num)) return 0

      // 根据区间值返回中位数估算
      switch (num) {
        case 1: return 2
        case 2: return 7
        case 3: return 15
        case 4: return 25
        case 5: return 35
        default: return num
      }
    },

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

    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)}万元`
    }
  }
}
</script>

<style scoped>
.institution-analysis {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  padding: 24px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.section-spacing {
  height: 20px;
}

.institution-analysis:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

/* 表格样式 */
.border-b:last-child {
  @apply border-b-0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .institution-analysis {
    padding: 16px;
  }

  .grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .institution-analysis {
    padding: 12px;
  }
}
</style>
