<template>
  <div class="institution-status-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/jgztxx.png" alt="机构状态信息" class="w-8 h-8 object-contain" />
      </div>
      <span class="font-bold text-gray-800">机构状态信息</span>
    </div>

    <div class="">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4">

        <!-- 异常还款机构数 -->
        <div class="rounded-lg border border-[#FF8C008F] bg-[#FF8C001A] p-2 text-center">
          <div class="text-xl font-bold text-[#FF8C00] mb-1">
            {{ accExc || '0' }} 个
          </div>
          <div class="text-sm font-medium text-gray-700 mb-1">异常还款机构数</div>
          <div class="text-xs text-gray-500">存在异常还款记录的机构数量</div>
        </div>

        <!-- 睡眠机构数 -->
        <div class="rounded-lg border border-[#FF8C008F] bg-[#FF8C001A] p-2 text-center">
          <div class="text-xl font-bold text-[#FF8C00] mb-1">
            {{ accSleep || '0' }} 个
          </div>
          <div class="text-sm font-medium text-gray-700 mb-1">睡眠机构数</div>
          <div class="text-xs text-gray-500">长期无交易活动的机构数量</div>
        </div>

      </div>

      <!-- 机构状态分析 -->
      <div class="mt-4">
        <div class="flex items-start">
          <div class="w-8 h-8 flex items-center justify-center m-4">
            <img src="@/assets/images/report/zfx.png" alt="机构状态分析" class="w-8 h-8 object-contain flex-shrink-0" />
          </div>
          <div class="mt-1 text-sm text-[#999999]">
            <div class="font-bold text-lg text-[#FF8C00]">机构状态分析</div>
            <div v-html="getInstitutionAnalysisHtml()"></div>
          </div>
        </div>
      </div>

      <!-- 风险提示 -->
      <div class="mt-4" v-if="hasRiskWarning()">
        <div class="flex items-start">
          <div class="w-8 h-8 flex items-center justify-center m-4">
            <img src="@/assets/images/report/zfx.png" alt="风险提示" class="w-8 h-8 object-contain flex-shrink-0" />
          </div>
          <div class="mt-1 text-sm text-[#999999]">
            <div class="font-bold text-lg text-[#FF8C00]">风险提示</div>
            <div v-html="getRiskWarningHtml()"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 温馨提示 -->
    <Remark
      content="机构状态展示申请人在各金融机构的账户状态和交易情况。包括正常账户、关闭账户、冻结账户等状态统计。数据来源于各金融机构的账户管理系统。账户状态可以反映申请人的信用表现和还款意愿。异常账户状态可能暗示风险事件或违约行为。建议重点关注冻结账户和关闭账户的原因，评估其对信用状况的影响。" />

  </div>
</template>

<script setup>
import Remark from './Remark.vue'

const props = defineProps({
  accExc: {
    type: String,
    default: ''
  },
  accSleep: {
    type: String,
    default: ''
  }
})

// 异常还款分析
const getExceptionAnalysis = () => {
  const count = parseInt(props.accExc) || 0

  if (count === 0) {
    return '无异常还款记录，还款行为正常。'
  } else if (count <= 2) {
    return `存在${count}个异常还款机构，需要关注还款习惯。`
  } else {
    return `存在${count}个异常还款机构，还款行为存在较高风险。`
  }
}

// 睡眠机构分析
const getSleepAnalysis = () => {
  const count = parseInt(props.accSleep) || 0

  if (count === 0) {
    return '无睡眠机构，信贷活跃度正常。'
  } else if (count <= 5) {
    return `存在${count}个睡眠机构，信贷活跃度一般。`
  } else {
    return `存在${count}个睡眠机构，信贷活跃度较低。`
  }
}

// 机构状态分析HTML版本（带橙色高亮）
const getInstitutionAnalysisHtml = () => {
  const excCount = parseInt(props.accExc) || 0
  const sleepCount = parseInt(props.accSleep) || 0

  let analysis = []

  // 异常还款分析
  if (excCount === 0) {
    analysis.push('异常还款机构：无异常还款记录，还款行为正常。')
  } else if (excCount <= 2) {
    analysis.push(`异常还款机构：存在<span class="text-[#FF8C00] font-bold">${excCount}</span>个异常还款机构，需要关注还款习惯。`)
  } else {
    analysis.push(`异常还款机构：存在<span class="text-[#FF8C00] font-bold">${excCount}</span>个异常还款机构，还款行为存在较高风险。`)
  }

  // 睡眠机构分析
  if (sleepCount === 0) {
    analysis.push('睡眠机构：无睡眠机构，信贷活跃度正常。')
  } else if (sleepCount <= 5) {
    analysis.push(`睡眠机构：存在<span class="text-[#FF8C00] font-bold">${sleepCount}</span>个睡眠机构，信贷活跃度一般。`)
  } else {
    analysis.push(`睡眠机构：存在<span class="text-[#FF8C00] font-bold">${sleepCount}</span>个睡眠机构，信贷活跃度较低。`)
  }

  return analysis.join('<br/>')
}

// 是否有风险警告
const hasRiskWarning = () => {
  const excCount = parseInt(props.accExc) || 0
  const sleepCount = parseInt(props.accSleep) || 0

  return excCount > 0 || sleepCount > 10
}

// 获取风险警告内容HTML版本（带橙色高亮）
const getRiskWarningHtml = () => {
  const excCount = parseInt(props.accExc) || 0
  const sleepCount = parseInt(props.accSleep) || 0

  let warnings = []

  if (excCount > 0) {
    warnings.push(`该用户在<span class="text-[#FF8C00] font-bold">${excCount}</span>个机构存在异常还款记录`)
  }

  if (sleepCount > 10) {
    warnings.push(`该用户有<span class="text-[#FF8C00] font-bold">${sleepCount}</span>个睡眠机构，信贷活跃度偏低`)
  }

  if (warnings.length > 0) {
    return warnings.join('，') + '，建议谨慎评估其信用风险。'
  }

  return ''
}
</script>
