<template>
  <el-card class="model-output-card" v-if="custType && (retailOutput || corpOutput)">
    <div slot="header" class="card-header">
      <span class="card-title">模型输出</span>
    </div>
    <div class="output-sections">
      <!-- 个人客户模型输出 -->
      <template v-if="custType === '个人' && retailOutput">
        <div class="output-section">
          <h4 class="section-title">基本信息</h4>
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="客户内码">{{ retailOutput.custIsn || '-' }}</el-descriptions-item>
            <el-descriptions-item label="客户名称">{{ retailOutput.custName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="证件类型">{{ retailOutput.idType || '-' }}</el-descriptions-item>
            <el-descriptions-item label="证件号码">{{ retailOutput.idNum || '-' }}</el-descriptions-item>
            <el-descriptions-item label="基准利率"><span class="rate-value">{{ formatRate(retailOutput.baseLoanRate) }}</span> %</el-descriptions-item>
            <el-descriptions-item label="灰黑名单客户">{{ formatOutputValue(retailOutput.greyBlackCust) }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="output-section">
          <h4 class="section-title">测算结果</h4>
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="浮动BP"><span class="total-bp-value">{{ retailOutput.totalBp || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="测算利率"><span class="calculate-rate">{{ formatRate(retailOutput.calculateRate) }}</span> %</el-descriptions-item>
            <el-descriptions-item label="历史利率">{{ formatRate(retailOutput.loanRateHistory) }}</el-descriptions-item>
            <el-descriptions-item label="产品最低利率下限">{{ formatRate(retailOutput.minRateProduct) }}</el-descriptions-item>
            <el-descriptions-item label="平滑幅度">{{ formatRate(retailOutput.smoothRange) }}</el-descriptions-item>
            <el-descriptions-item label="参考利率"><span class="calculate-rate">{{ formatRate(retailOutput.referenceRate) }}</span> %</el-descriptions-item>
            <el-descriptions-item label="最终测算利率"><span class="calculate-rate">{{ formatRate(retailOutput.finalCalculateRate) }}</span> %</el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="output-section">
          <h4 class="section-title">忠诚度分析</h4>
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="我行首贷客户">{{ formatBoolean(retailOutput.isFirstLoan) }}</el-descriptions-item>
            <el-descriptions-item label="用信天数">{{ retailOutput.faithDay || '-' }}</el-descriptions-item>
            <el-descriptions-item label="客户年龄">{{ retailOutput.custAge || '-' }}</el-descriptions-item>
            <el-descriptions-item label="BP_首贷"><span class="bp-value">{{ retailOutput.bpFirstLoan || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="BP_贷龄"><span class="bp-value">{{ retailOutput.bpAgeLoan || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="BP_年龄"><span class="bp-value">{{ retailOutput.bpAge || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="TOTAL_BP_忠诚度" :span="2"><span class="total-bp-value">{{ retailOutput.totalBpLoyalty || '-' }}</span></el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="output-section">
          <h4 class="section-title">贡献度分析</h4>
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="存款年日均">{{ retailOutput.balanceAvg || '-' }}</el-descriptions-item>
            <el-descriptions-item label="贷款年日均">{{ retailOutput.loanAvg || '-' }}</el-descriptions-item>
            <el-descriptions-item label="派生率">{{ formatRate(retailOutput.derivationRate) }}</el-descriptions-item>
            <el-descriptions-item label="TOTAL_BP_贡献度"><span class="total-bp-value">{{ retailOutput.totalBpContribution || '-' }}</span></el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="output-section">
          <h4 class="section-title">关联度分析</h4>
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="中间业务_个人_信用卡">{{ formatBoolean(retailOutput.midPerCard) }}</el-descriptions-item>
            <el-descriptions-item label="中间业务_个人_一码通">{{ formatBoolean(retailOutput.midPerPass) }}</el-descriptions-item>
            <el-descriptions-item label="中间业务_个人_丰收互联">{{ formatBoolean(retailOutput.midPerHarvest) }}</el-descriptions-item>
            <el-descriptions-item label="中间业务_个人_有效客户">{{ formatBoolean(retailOutput.midPerEffect) }}</el-descriptions-item>
            <el-descriptions-item label="中间业务_个人_快捷支付">{{ formatBoolean(retailOutput.midPerQuickPay) }}</el-descriptions-item>
            <el-descriptions-item label="中间业务_个人_电费代扣">{{ formatBoolean(retailOutput.midPerEleDdc) }}</el-descriptions-item>
            <el-descriptions-item label="中间业务_个人_水费代扣">{{ formatBoolean(retailOutput.midPerWaterDdc) }}</el-descriptions-item>
            <el-descriptions-item label="中间业务_个人_华数费代扣">{{ formatBoolean(retailOutput.midPerHuashuDdc) }}</el-descriptions-item>
            <el-descriptions-item label="中间业务_个人_煤气费代扣">{{ formatBoolean(retailOutput.MidPerGasDdc) }}</el-descriptions-item>
            <el-descriptions-item label="中间业务_个人_市民卡">{{ formatBoolean(retailOutput.midPerCitizencard) }}</el-descriptions-item>
            <el-descriptions-item label="中间业务_个人_理财业务">{{ formatBoolean(retailOutput.midPerFinMan) }}</el-descriptions-item>
            <el-descriptions-item label="中间业务_个人_etc">{{ formatBoolean(retailOutput.midPerEtc) }}</el-descriptions-item>
            <el-descriptions-item label="BP_中间业务"><span class="bp-value">{{ retailOutput.bpMid || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="TOTAL_BP_关联度"><span class="total-bp-value">{{ retailOutput.totoalBpRelevance || '-' }}</span></el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="output-section">
          <h4 class="section-title">贷款特征</h4>
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="申请金额">{{ retailOutput.applyAmt || '-' }}</el-descriptions-item>
            <el-descriptions-item label="BP_贷款额度"><span class="bp-value">{{ retailOutput.bpLoanAmount || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="贷款用途">{{ formatLoanPurpose(retailOutput.loanPurpose) }}</el-descriptions-item>
            <el-descriptions-item label="是否有经营佐证">{{ formatBoolean(retailOutput.bizProof) }}</el-descriptions-item>
            <el-descriptions-item label="BP_贷款用途"><span class="bp-value">{{ retailOutput.bpLoanUse || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="循环功能">{{ formatBoolean(retailOutput.loanLoop) }}</el-descriptions-item>
            <el-descriptions-item label="BP_循环功能"><span class="bp-value">{{ retailOutput.bpLoanLoop || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="抵质押类型">{{ retailOutput.collType || '-' }}</el-descriptions-item>
            <el-descriptions-item label="抵质押物三方所有">{{ formatBoolean(retailOutput.collThirdParty) }}</el-descriptions-item>
            <el-descriptions-item label="BP_抵押物"><span class="bp-value">{{ retailOutput.bpCollateral || '-' }}</span></el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="output-section">
          <h4 class="section-title">风险度分析</h4>
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="灰名单客户">{{ formatBoolean(retailOutput.greyCust) }}</el-descriptions-item>
            <el-descriptions-item label="本金逾期">{{ formatBoolean(retailOutput.prinOverdue) }}</el-descriptions-item>
            <el-descriptions-item label="利息逾期">{{ formatBoolean(retailOutput.interestOverdue) }}</el-descriptions-item>
            <el-descriptions-item label="信用卡逾期">{{ formatBoolean(retailOutput.cardOverdue) }}</el-descriptions-item>
            <el-descriptions-item label="BP_灰名单与逾期"><span class="bp-value">{{ retailOutput.bpGreyOverdue || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="TOTAL_BP_风险度"><span class="total-bp-value">{{ retailOutput.totoalBpRisk || '-' }}</span></el-descriptions-item>
          </el-descriptions>
        </div>
      </template>

      <!-- 企业客户模型输出 -->
      <template v-else-if="custType === '企业' && corpOutput">
        <div class="output-section">
          <h4 class="section-title">基本信息</h4>
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="客户内码">{{ corpOutput.custIsn || '-' }}</el-descriptions-item>
            <el-descriptions-item label="客户名称">{{ corpOutput.custName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="证件类型">{{ corpOutput.idType || '-' }}</el-descriptions-item>
            <el-descriptions-item label="证件号码">{{ corpOutput.idNum || '-' }}</el-descriptions-item>
            <el-descriptions-item label="基准利率"><span class="rate-value">{{ formatRate(corpOutput.baseLoanRate) }}</span> %</el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="output-section">
          <h4 class="section-title">测算结果</h4>
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="浮动BP"><span class="total-bp-value">{{ corpOutput.totalBp || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="测算利率"><span class="calculate-rate">{{ formatRate(corpOutput.calculateRate) }}</span> %</el-descriptions-item>
            <el-descriptions-item label="历史利率">{{ formatRate(corpOutput.loanRateHistory) }}</el-descriptions-item>
            <el-descriptions-item label="产品最低利率下限">{{ formatRate(corpOutput.minRateProduct) }}</el-descriptions-item>
            <el-descriptions-item label="平滑幅度">{{ formatRate(corpOutput.smoothRange) }}</el-descriptions-item>
            <el-descriptions-item label="参考利率"><span class="calculate-rate">{{ formatRate(corpOutput.referenceRate) }}</span> %</el-descriptions-item>
            <el-descriptions-item label="最终测算利率"><span class="calculate-rate">{{ formatRate(corpOutput.finalCalculateRate) }}</span> %</el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="output-section">
          <h4 class="section-title">忠诚度分析</h4>
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="我行首贷客户">{{ formatBoolean(corpOutput.isFirstLoan) }}</el-descriptions-item>
            <el-descriptions-item label="用信天数">{{ corpOutput.faithDay || '-' }}</el-descriptions-item>
            <el-descriptions-item label="BP_首贷"><span class="bp-value">{{ corpOutput.bpFirstLoan || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="BP_贷龄"><span class="bp-value">{{ corpOutput.bpAgeLoan || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="TOTAL_BP_忠诚度" :span="2"><span class="total-bp-value">{{ corpOutput.totalBpLoyalty || '-' }}</span></el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="output-section">
          <h4 class="section-title">贡献度分析</h4>
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="存款年日均">{{ corpOutput.balanceAvg || '-' }}</el-descriptions-item>
            <el-descriptions-item label="贷款年日均">{{ corpOutput.loanAvg || '-' }}</el-descriptions-item>
            <el-descriptions-item label="派生率">{{ formatRate(corpOutput.derivationRate) }}</el-descriptions-item>
            <el-descriptions-item label="TOTAL_BP_贡献度"><span class="total-bp-value">{{ corpOutput.totalBpContribution || '-' }}</span></el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="output-section">
          <h4 class="section-title">关联度分析</h4>
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="中间业务_企业_企业互联">{{ formatBoolean(corpOutput.midEntConnect) }}</el-descriptions-item>
            <el-descriptions-item label="中间业务_企业_有效价值客户">{{ formatBoolean(corpOutput.midEntEffect) }}</el-descriptions-item>
            <el-descriptions-item label="中间业务_企业_国际业务">{{ formatBoolean(corpOutput.midEntInter) }}</el-descriptions-item>
            <el-descriptions-item label="中间业务_企业_承兑">{{ formatBoolean(corpOutput.midEntAccept) }}</el-descriptions-item>
            <el-descriptions-item label="中间业务_企业_贴现">{{ formatBoolean(corpOutput.midEntDiscount) }}</el-descriptions-item>
            <el-descriptions-item label="中间业务_企业_电费代扣">{{ formatBoolean(corpOutput.midEntEleDdc) }}</el-descriptions-item>
            <el-descriptions-item label="中间业务_企业_水费代扣">{{ formatBoolean(corpOutput.midEntWaterDdc) }}</el-descriptions-item>
            <el-descriptions-item label="BP_中间业务"><span class="bp-value">{{ corpOutput.bpMid || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="代发工资户数">{{ corpOutput.payroll || '-' }}</el-descriptions-item>
            <el-descriptions-item label="存量贷款余额">{{ corpOutput.invLoanAmount || '-' }}</el-descriptions-item>
            <el-descriptions-item label="BP_代发工资"><span class="bp-value">{{ corpOutput.bpPayroll || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="TOTAL_BP_关联度"><span class="total-bp-value">{{ corpOutput.totoalBpRelevance || '-' }}</span></el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="output-section">
          <h4 class="section-title">企业类别</h4>
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="净身企业">{{ formatBoolean(corpOutput.isCleanEnt) }}</el-descriptions-item>
            <el-descriptions-item label="开立基本结算账户">{{ formatBoolean(corpOutput.hasSettleAcct) }}</el-descriptions-item>
            <el-descriptions-item label="绿色贷款">{{ formatBoolean(corpOutput.isGreenLoan) }}</el-descriptions-item>
            <el-descriptions-item label="科技型企业">{{ formatBoolean(corpOutput.isTechEnt) }}</el-descriptions-item>
            <el-descriptions-item label="贸易和建筑业企业">{{ formatBoolean(corpOutput.isTradeBuildEnt) }}</el-descriptions-item>
            <el-descriptions-item label="BP_企业客户类别"><span class="bp-value">{{ corpOutput.bpEntType || '-' }}</span></el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="output-section">
          <h4 class="section-title">贷款特征</h4>
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="借款期限">{{ corpOutput.loanTerm || '-' }}</el-descriptions-item>
            <el-descriptions-item label="BP_贷款期限"><span class="bp-value">{{ corpOutput.bpLoanTerm || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="申请金额">{{ corpOutput.applyAmt || '-' }}</el-descriptions-item>
            <el-descriptions-item label="BP_贷款额度"><span class="bp-value">{{ corpOutput.bpLoanAmount || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="抵质押类型">{{ corpOutput.collType || '-' }}</el-descriptions-item>
            <el-descriptions-item label="抵质押物三方所有">{{ formatBoolean(corpOutput.collThirdParty) }}</el-descriptions-item>
            <el-descriptions-item label="BP_抵押物"><span class="bp-value">{{ corpOutput.bpCollateral || '-' }}</span></el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="output-section">
          <h4 class="section-title">风险度分析</h4>
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="灰名单客户">{{ formatBoolean(corpOutput.greyCust) }}</el-descriptions-item>
            <el-descriptions-item label="本金逾期">{{ formatBoolean(corpOutput.prinOverdue) }}</el-descriptions-item>
            <el-descriptions-item label="利息逾期">{{ formatBoolean(corpOutput.interestOverdue) }}</el-descriptions-item>
            <el-descriptions-item label="BP_灰名单与逾期"><span class="bp-value">{{ corpOutput.bpGreyOverdue || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="TOTAL_BP_风险度"><span class="total-bp-value">{{ corpOutput.totoalBpRisk || '-' }}</span></el-descriptions-item>
          </el-descriptions>
        </div>
      </template>
    </div>
  </el-card>
</template>

<script>
import {formatRate} from "@/utils/rate"

export default {
  name: "ModelOutputDisplay",
  props: {
    custType: {
      type: String,
      default: null
    },
    retailOutput: {
      type: Object,
      default: null
    },
    corpOutput: {
      type: Object,
      default: null
    }
  },
  methods: {
    formatRate,
    /** 格式化布尔值为中文 */
    formatBoolean(value) {
      if (value === 'true' || value === true || value === '1' || value === 1) return '是'
      if (value === 'false' || value === false || value === '0' || value === 0) return '否'
      return value || '-'
    },
    /** 格式化贷款用途 */
    formatLoanPurpose(value) {
      if (value === 'consumer') return '消费贷款'
      if (value === 'business') return '经营贷款'
      return value || '-'
    },
    formatOutputValue(value) {
      if (value === 0) return '0'
      return value || '-'
    }
  }
}
</script>

<style lang="scss" scoped>
.model-output-card {
  ::v-deep .el-card__header {
    padding: 16px 20px;
    background-color: #fafafa;
    border-bottom: 1px solid #ebeef5;
  }

  .card-header {
    display: flex;
    align-items: center;

    .card-title {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
    }
  }

  ::v-deep .el-card__body {
    padding: 20px;
  }

  .output-section + .output-section {
    margin-top: 24px;
  }

  .section-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 500;
    color: #303133;
  }

  // BP 值样式
  .bp-value {
    color: #409eff;
    font-weight: 500;
  }

  // TOTAL_BP 样式
  .total-bp-value {
    color: #e6a23c;
    font-weight: 600;
  }

  // 测算利率高亮样式
  .calculate-rate {
    color: #f56c6c;
    font-weight: 600;
    font-size: 16px;
  }

  // 利率值样式
  .rate-value {
    color: #67c23a;
    font-weight: 500;
  }
}
</style>
