<template>
  <div class="project-analysis-abnormal-tab">
    <template v-if="detailGroups.length">
      <section
        v-for="(group, groupIndex) in detailGroups"
        :key="`${group.groupCode || group.groupType || groupIndex}-group`"
        class="abnormal-card"
      >
        <div class="abnormal-card__header">
          <div class="abnormal-card__title">{{ group.groupName || "异常明细" }}</div>
        </div>

        <el-table
          v-if='group.groupType === "BANK_STATEMENT"'
          :data="getStatementPageRecords(group)"
          class="abnormal-table"
        >
          <el-table-column prop="trxDate" label="交易时间" min-width="160" />
          <el-table-column label="本方账户" min-width="220">
            <template slot-scope="scope">
              <div class="multi-line-cell">
                <div class="primary-text">{{ scope.row.leAccountNo || "-" }}</div>
                <div class="secondary-text">{{ scope.row.leAccountName || "-" }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="对方账户" min-width="220">
            <template slot-scope="scope">
              <div class="multi-line-cell">
                <div class="primary-text">{{ scope.row.customerAccountName || "-" }}</div>
                <div class="secondary-text">{{ scope.row.customerAccountNo || "-" }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="摘要/交易类型" min-width="220">
            <template slot-scope="scope">
              <div class="multi-line-cell">
                <div class="primary-text">{{ scope.row.userMemo || "-" }}</div>
                <div class="secondary-text">{{ scope.row.cashType || "-" }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="异常标签" min-width="220">
            <template slot-scope="scope">
              <div v-if="scope.row.hitTags && scope.row.hitTags.length" class="tag-list">
                <el-tag
                  v-for="(tag, index) in scope.row.hitTags"
                  :key="`${scope.row.bankStatementId || index}-tag-${index}`"
                  size="mini"
                  effect="plain"
                >
                  {{ tag.ruleName }}
                </el-tag>
              </div>
              <span v-else class="summary-row__label">-</span>
            </template>
          </el-table-column>
          <el-table-column prop="displayAmount" label="交易金额" min-width="140" />
        </el-table>
        <div
          v-if='group.groupType === "BANK_STATEMENT" && getStatementTotal(group) > statementPageSize'
          class="abnormal-pagination"
        >
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page="getStatementPage(group)"
            :page-size="statementPageSize"
            :total="getStatementTotal(group)"
            @current-change="handleStatementPageChange(group, $event)"
          />
        </div>

        <div v-else-if='group.groupType === "OBJECT"' class="object-card-grid">
          <article
            v-for="(item, index) in group.records || []"
            :key="`${item.title || index}-object`"
            class="object-card"
          >
            <div class="object-card__title">{{ item.title || "-" }}</div>
            <div class="object-card__subtitle">{{ item.subtitle || "-" }}</div>
            <div v-if="item.riskTags && item.riskTags.length" class="tag-list">
              <el-tag
                v-for="(tag, tagIndex) in item.riskTags"
                :key="`${item.title || index}-risk-${tagIndex}`"
                size="mini"
                effect="plain"
              >
                {{ tag }}
              </el-tag>
            </div>
            <p class="object-card__summary">{{ item.summary || "-" }}</p>
            <div
              v-for="(field, fieldIndex) in item.extraFields || []"
              :key="`${item.title || index}-field-${fieldIndex}`"
              class="summary-row"
            >
              <span class="summary-row__label">{{ field.label }}</span>
              <span class="summary-row__value">{{ field.value }}</span>
            </div>
          </article>
        </div>
      </section>
    </template>
    <el-empty v-else :image-size="80" description="暂无异常明细" />
  </div>
</template>

<script>
export default {
  name: "ProjectAnalysisAbnormalTab",
  props: {
    detailData: {
      type: Object,
      default: () => ({
        groups: [],
      }),
    },
  },
  data() {
    return {
      statementPageSize: 5,
      statementPageMap: {},
    };
  },
  watch: {
    detailGroups: {
      immediate: true,
      handler(groups) {
        const nextPageMap = {};
        groups
          .filter((group) => group && group.groupType === "BANK_STATEMENT")
          .forEach((group, index) => {
            const groupKey = this.resolveGroupKey(group, index);
            nextPageMap[groupKey] = 1;
          });
        this.statementPageMap = nextPageMap;
      },
    },
  },
  computed: {
    detailGroups() {
      return Array.isArray(this.detailData && this.detailData.groups) ? this.detailData.groups : [];
    },
  },
  methods: {
    resolveGroupKey(group, index = 0) {
      return group.groupCode || group.groupName || `BANK_STATEMENT_${index}`;
    },
    getStatementPage(group) {
      const groupKey = this.resolveGroupKey(group);
      return this.statementPageMap[groupKey] || 1;
    },
    getStatementTotal(group) {
      return Array.isArray(group && group.records) ? group.records.length : 0;
    },
    getStatementPageRecords(group) {
      const records = Array.isArray(group && group.records) ? group.records : [];
      const currentPage = this.getStatementPage(group);
      const startIndex = (currentPage - 1) * this.statementPageSize;
      return records.slice(startIndex, startIndex + this.statementPageSize);
    },
    handleStatementPageChange(group, page) {
      const groupKey = this.resolveGroupKey(group);
      this.$set(this.statementPageMap, groupKey, page);
    },
  },
};
</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 {
  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-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.multi-line-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.primary-text {
  color: #0f172a;
}

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

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

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

.object-card {
  padding: 16px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

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

.object-card__subtitle {
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
}

.object-card__summary {
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.7;
  color: #1e293b;
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: 8px;
}

.summary-row__value {
  font-size: 13px;
  color: #1e293b;
  text-align: right;
}
</style>
