<template>
  <div class="page-container">
    <h2 class="page-title">数据水印溯源</h2>
    <div class="card-shadow" style="padding: 20px; margin-bottom: 16px;">
      <el-input
        v-model="traceText"
        type="textarea"
        :rows="6"
        placeholder="粘贴疑似泄露的文本片段（支持CSV/TXT内容），系统将检测其中的隐形水印"
      />
      <el-button type="primary" style="margin-top: 12px" :loading="loading" @click="handleTrace">
        开始溯源
      </el-button>
    </div>
    <div v-if="result" class="card-shadow" style="padding: 20px;">
      <div style="font-size: 16px; font-weight: 600; margin-bottom: 12px;">溯源结果</div>
      <el-descriptions v-if="result.user_id" :column="1" border>
        <el-descriptions-item label="泄露用户ID">{{ result.user_id }}</el-descriptions-item>
        <el-descriptions-item label="用户名">{{ result.username || '--' }}</el-descriptions-item>
        <el-descriptions-item label="导出类型">{{ result.export_type }}</el-descriptions-item>
        <el-descriptions-item label="数据范围">{{ result.data_scope }}</el-descriptions-item>
        <el-descriptions-item label="导出时间">{{ result.created_at }}</el-descriptions-item>
      </el-descriptions>
      <el-alert v-else title="未检测到有效水印" type="warning" :closable="false" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { traceWatermark } from '@/api/watermark'

const traceText = ref('')
const loading = ref(false)
const result = ref<any>(null)

async function handleTrace() {
  if (!traceText.value.trim()) {
    ElMessage.warning('请输入待溯源文本')
    return
  }
  loading.value = true
  try {
    const res: any = await traceWatermark(traceText.value)
    result.value = res.data
    if (!res.data) {
      ElMessage.info('未检测到水印信息')
    } else {
      ElMessage.success('溯源成功')
    }
  } catch (e: any) {
    ElMessage.error(e?.message || '溯源失败')
  } finally {
    loading.value = false
  }
}
</script>
