<template>
  <div class="project-analysis-abnormal-tab">
    <section class="abnormal-card">
      <div class="abnormal-card__header">
        <div class="abnormal-card__title">异常交易明细</div>
        <div class="abnormal-card__subtitle">使用当前行数据与静态模板拼装展示，不新增请求逻辑。</div>
      </div>

      <el-table :data="detailData.transactionList" class="abnormal-table">
        <el-table-column prop="tradeTime" label="交易时间" min-width="160" />
        <el-table-column prop="ownAccountName" label="本方账号/主体" min-width="180" />
        <el-table-column prop="counterpartyName" label="对方名称/账户" min-width="180" />
        <el-table-column prop="tradeType" label="摘要/交易类型" min-width="160" />
        <el-table-column prop="tradeAmount" label="交易金额" min-width="140" />
        <el-table-column prop="markStatus" label="标记状态" min-width="120" />
      </el-table>
    </section>

    <div class="abnormal-summary-grid">
      <section class="abnormal-card">
        <div class="abnormal-card__title">频繁转账账户异常摘要</div>
        <div
          v-for="(item, index) in detailData.frequentTransferSummary"
          :key="`${item.accountNo || index}-transfer`"
          class="summary-row"
        >
          <span class="summary-row__label">{{ item.accountNo }}</span>
          <span class="summary-row__value">{{ item.description }}</span>
        </div>
      </section>

      <section class="abnormal-card">
        <div class="abnormal-card__title">关联交易异常摘要</div>
        <div
          v-for="(item, index) in detailData.relatedTradeSummary"
          :key="`${item.title || index}-relation`"
          class="summary-row"
        >
          <span class="summary-row__label">{{ item.title }}</span>
          <span class="summary-row__value">{{ item.description }}</span>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProjectAnalysisAbnormalTab",
  props: {
    detailData: {
      type: Object,
      default: () => ({
        transactionList: [],
        frequentTransferSummary: [],
        relatedTradeSummary: [],
      }),
    },
  },
};
</script>

<style lang="scss" scoped>
.project-analysis-abnormal-tab {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.abnormal-card {
  padding: 20px;
  border: 1px solid #e2e8f0;
  background: #fff;
}

.abnormal-card__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.abnormal-card__title {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}

.abnormal-card__subtitle {
  font-size: 12px;
  color: #64748b;
}

.abnormal-table {
  border-radius: 12px;
  overflow: hidden;
}

.abnormal-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.summary-row + .summary-row {
  margin-top: 12px;
}

.summary-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.summary-row__label {
  font-size: 12px;
  color: #64748b;
}

.summary-row__value {
  font-size: 13px;
  line-height: 1.7;
  color: #1e293b;
}
</style>
