<template>
  <el-dialog
    :visible.sync="dialogVisible"
    append-to-body
    title="确认为证据"
    width="560px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <el-form label-position="top" class="evidence-confirm-form">
      <el-form-item label="证据类型">
        <el-input :value="typeLabel" readonly />
      </el-form-item>
      <el-form-item label="关联人员">
        <el-input :value="payload.relatedPersonName || '-'" readonly />
      </el-form-item>
      <el-form-item label="证据摘要">
        <el-input
          :value="payload.evidenceSummary || '-'"
          readonly
          type="textarea"
          :rows="3"
        />
      </el-form-item>
      <el-form-item label="确认理由/备注" required>
        <el-input
          v-model.trim="confirmReason"
          type="textarea"
          :rows="4"
          maxlength="500"
          show-word-limit
          placeholder="请填写为什么将该详情确认为证据"
          :disabled="!canOperate"
        />
      </el-form-item>
    </el-form>

    <div slot="footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" :loading="submitting" :disabled="!canOperate" @click="handleSubmit">
        确认入库
      </el-button>
    </div>
  </el-dialog>
</template>

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

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

export default {
  name: "EvidenceConfirmDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    payload: {
      type: Object,
      default: () => ({}),
    },
    canOperate: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      confirmReason: "",
      submitting: false,
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(value) {
        if (!value) {
          this.handleClose();
        }
      },
    },
    typeLabel() {
      return TYPE_LABEL_MAP[this.payload.evidenceType] || this.payload.evidenceType || "-";
    },
  },
  watch: {
    visible(value) {
      if (value) {
        this.confirmReason = "";
      }
    },
  },
  methods: {
    handleClose() {
      if (this.submitting) {
        return;
      }
      this.$emit("update:visible", false);
    },
    async handleSubmit() {
      if (!this.canOperate) {
        this.$message.warning("当前项目仅可查看，不能确认入库证据");
        return;
      }
      if (!this.confirmReason) {
        this.$message.warning("请填写确认理由/备注");
        return;
      }
      this.submitting = true;
      try {
        const data = {
          ...this.payload,
          confirmReason: this.confirmReason,
        };
        const response = await saveEvidence(data);
        this.$message.success("证据入库成功");
        this.$emit("saved", response.data);
        this.$emit("update:visible", false);
      } catch (error) {
        this.$message.error("证据入库失败");
        console.error("证据入库失败", error);
      } finally {
        this.submitting = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.evidence-confirm-form {
  :deep(.el-form-item__label) {
    padding-bottom: 6px;
    font-weight: 600;
    color: #606266;
  }
}
</style>
