<template>
  <el-drawer
    :visible.sync="drawerVisible"
    append-to-body
    title="证据线索"
    size="420px"
    custom-class="evidence-drawer"
    @open="loadEvidence"
  >
    <div class="evidence-drawer-body">
      <el-input
        v-model.trim="keyword"
        clearable
        size="small"
        prefix-icon="el-icon-search"
        placeholder="搜索姓名、账号、证据编号"
        @keyup.enter.native="loadEvidence"
        @clear="loadEvidence"
      >
        <el-button slot="append" @click="loadEvidence">查询</el-button>
      </el-input>

      <div class="evidence-list" v-loading="loading">
        <el-empty
          v-if="!loading && evidenceList.length === 0"
          :image-size="80"
          description="暂无证据线索"
        />
        <article
          v-for="item in evidenceList"
          :key="item.evidenceId"
          class="evidence-card"
        >
          <div class="evidence-card__header">
            <span class="evidence-code">EV-{{ formatEvidenceId(item.evidenceId) }} {{ formatType(item.evidenceType) }}</span>
            <el-tag size="mini" type="danger" effect="plain">确认可疑</el-tag>
          </div>
          <div class="evidence-title">{{ item.evidenceTitle }}</div>
          <div class="evidence-summary">{{ item.evidenceSummary }}</div>
          <div class="evidence-meta">
            来源：{{ item.sourcePage || formatSource(item.sourceType) }}；确认人：{{ item.confirmBy || "-" }}
          </div>
          <div v-if="item.confirmReason" class="evidence-meta">
            备注：{{ item.confirmReason }}
          </div>
        </article>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { listEvidence } from "@/api/ccdiEvidence";

const TYPE_LABEL_MAP = {
  FLOW: "流水证据",
  MODEL: "模型证据",
  ASSET: "资产证据",
};

const SOURCE_LABEL_MAP = {
  BANK_STATEMENT: "流水详情",
  MODEL_DETAIL: "模型详情",
  ASSET_DETAIL: "资产详情",
};

export default {
  name: "EvidenceDrawer",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    projectId: {
      type: [String, Number],
      default: null,
    },
  },
  data() {
    return {
      keyword: "",
      loading: false,
      evidenceList: [],
    };
  },
  computed: {
    drawerVisible: {
      get() {
        return this.visible;
      },
      set(value) {
        this.$emit("update:visible", value);
      },
    },
  },
  methods: {
    async loadEvidence() {
      if (!this.projectId) {
        this.evidenceList = [];
        return;
      }
      this.loading = true;
      try {
        const response = await listEvidence({
          projectId: this.projectId,
          keyword: this.keyword,
        });
        this.evidenceList = response.data || [];
      } catch (error) {
        this.evidenceList = [];
        this.$message.error("加载证据线索失败");
        console.error("加载证据线索失败", error);
      } finally {
        this.loading = false;
      }
    },
    formatEvidenceId(value) {
      return String(value || "").padStart(3, "0");
    },
    formatType(type) {
      return TYPE_LABEL_MAP[type] || type || "证据";
    },
    formatSource(sourceType) {
      return SOURCE_LABEL_MAP[sourceType] || sourceType || "-";
    },
  },
};
</script>

<style lang="scss" scoped>
.evidence-drawer-body {
  padding: 0 16px 16px;
}

.evidence-list {
  margin-top: 14px;
}

.evidence-card {
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid #e5eaf2;
  border-radius: 10px;
  background: #fff;
}

.evidence-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.evidence-code {
  color: #2474e8;
  font-size: 13px;
  font-weight: 700;
}

.evidence-title {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
}

.evidence-summary {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: #475467;
}

.evidence-meta {
  margin-top: 8px;
  font-size: 12px;
  color: #8a96a8;
  line-height: 1.5;
}
</style>
