<template>
  <div class="credit-info-detail" v-loading="loading">
    <div class="section-title">征信摘要</div>
    <el-row :gutter="16" class="detail-summary">
      <el-col :span="8">征信查询日期：{{ formatQueryDate(detail.queryDate) }}</el-col>
      <el-col :span="8">负债笔数：{{ detail.debtCount || 0 }}</el-col>
      <el-col :span="8">负债总额：{{ formatAmount(detail.debtTotalAmount) }}</el-col>
    </el-row>

    <div class="section-title">负面信息</div>
    <el-row :gutter="16" class="detail-summary">
      <el-col :span="8">民事案件笔数：{{ detail.negativeInfo.civilCnt || 0 }}</el-col>
      <el-col :span="8">强制执行笔数：{{ detail.negativeInfo.enforceCnt || 0 }}</el-col>
      <el-col :span="8">行政处罚笔数：{{ detail.negativeInfo.admCnt || 0 }}</el-col>
    </el-row>
    <el-row :gutter="16" class="detail-summary">
      <el-col :span="8">民事案件金额：{{ formatAmount(detail.negativeInfo.civilLmt) }}</el-col>
      <el-col :span="8">强制执行金额：{{ formatAmount(detail.negativeInfo.enforceLmt) }}</el-col>
      <el-col :span="8">行政处罚金额：{{ formatAmount(detail.negativeInfo.admLmt) }}</el-col>
    </el-row>

    <div class="section-title">负债信息</div>
    <el-table :data="detail.debts || []" size="mini">
      <template slot="empty">
        <el-empty :image-size="80" description="暂无征信负债信息" />
      </template>
      <el-table-column label="负债大类" prop="debtMainType" min-width="120" />
      <el-table-column label="负债小类" prop="debtSubType" min-width="120" />
      <el-table-column label="债权人类型" prop="creditorType" min-width="120" />
      <el-table-column label="负债名称" prop="debtName" min-width="180" />
      <el-table-column label="负债本金余额" min-width="120">
        <template slot-scope="scope">
          {{ formatAmount(scope.row.principalBalance) }}
        </template>
      </el-table-column>
      <el-table-column label="负债总额" min-width="120">
        <template slot-scope="scope">
          {{ formatAmount(scope.row.debtTotalAmount) }}
        </template>
      </el-table-column>
      <el-table-column label="负债状态" prop="debtStatus" min-width="120" />
    </el-table>
  </div>
</template>

<script>
import { parseTime } from "@/utils/ruoyi";

export default {
  name: "CreditInfoDetail",
  props: {
    detail: {
      type: Object,
      default: () => ({
        queryDate: undefined,
        debtCount: 0,
        debtTotalAmount: 0,
        negativeInfo: {},
        debts: [],
      }),
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    formatQueryDate(value) {
      if (!value) {
        return "-";
      }
      if (typeof value === "string") {
        const matched = value.match(/^(\d{4}-\d{2}-\d{2})/);
        if (matched) {
          return matched[1];
        }
      }
      return parseTime(value, "{y}-{m}-{d}") || "-";
    },
    formatAmount(value) {
      const amount = Number(value || 0);
      if (!Number.isFinite(amount)) {
        return "0";
      }
      return amount.toLocaleString("zh-CN", {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      });
    },
  },
};
</script>

<style scoped>
.credit-info-detail {
  min-height: 120px;
}

.section-title {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.section-title:not(:first-child) {
  margin-top: 20px;
}

.detail-summary {
  margin-bottom: 16px;
  line-height: 32px;
}
</style>
