<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const STORAGE_KEY = 'craftlabs_audit_retention'
const retentionDays = ref(365)
const autoCleanup = ref(false)

onMounted(() => {
  try {
    const saved = localStorage.getItem(STORAGE_KEY)
    if (saved) {
      const cfg = JSON.parse(saved)
      retentionDays.value = cfg.retentionDays ?? 365
      autoCleanup.value = cfg.autoCleanup ?? false
    }
  } catch {}
})

function handleSave() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify({
    retentionDays: retentionDays.value,
    autoCleanup: autoCleanup.value,
  }))
  ElMessage.success('保存成功')
}
</script>

<template>
  <el-card shadow="never" style="max-width:600px">
    <template #header>
      <span class="title">审计留存策略</span>
    </template>
    <el-form label-width="140px">
      <el-form-item label="留存天数">
        <el-input-number v-model="retentionDays" :min="30" :max="3650" :step="30" style="width:200px" />
      </el-form-item>
      <el-form-item label="自动清理">
        <el-switch v-model="autoCleanup" />
        <span style="margin-left:8px;color:#999;font-size:0.85em">{{ autoCleanup ? '启用后系统将自动清理超过留存天数的审计日志' : '关闭' }}</span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSave">保存配置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style scoped>
.title { font-weight: 600; font-size: 16px; }
</style>
