<template>
  <div class="page-container">
    <div class="page-header">
      <h2>生成历史管理</h2>
    </div>

    <div class="filter-bar">
      <el-input v-model="filter.user_id" placeholder="用户ID" clearable style="width: 140px" @keyup.enter="loadData" />
      <el-input v-model="filter.company_id" placeholder="保司ID" clearable style="width: 120px" @keyup.enter="loadData" />
      <el-select v-model="filter.action_type" placeholder="操作类型" clearable style="width: 120px" @change="loadData">
        <el-option label="创建" value="create" />
        <el-option label="导出" value="export" />
        <el-option label="下载" value="download" />
      </el-select>
      <el-button @click="loadData">搜索</el-button>
    </div>

    <el-table :data="list" v-loading="loading" stripe>
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="userId" label="用户" width="100" />
      <el-table-column prop="actionType" label="操作类型" width="90">
        <template #default="{ row }">
          <el-tag size="small">{{ row.actionType }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="companyId" label="保司" width="80" />
      <el-table-column prop="sessionId" label="Session" width="120" show-overflow-tooltip />
      <el-table-column prop="fileUrl" label="文件" width="120" show-overflow-tooltip />
      <el-table-column prop="createdAt" label="时间" width="170" />
      <el-table-column label="操作" width="140">
        <template #default="{ row }">
          <el-button size="small" @click="showDetail(row)">查看</el-button>
          <el-popconfirm title="确定删除？" @confirm="onDelete(row)">
            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination v-if="total > pageSize" layout="total, prev, pager, next"
      :total="total" :page-size="pageSize" v-model:current-page="page"
      @current-change="loadData" style="margin-top: 16px; justify-content: flex-end" />

    <el-dialog v-model="detailVisible" title="历史详情" width="600px">
      <pre class="snapshot-view">{{ detailSnapshot }}</pre>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { pptAdminApi } from '@/utils/ppt-admin-api'

const list = ref<any[]>([])
const total = ref(0)
const page = ref(1)
const pageSize = 20
const loading = ref(false)
const filter = ref({ user_id: '', company_id: '', action_type: '' })

const detailVisible = ref(false)
const detailSnapshot = ref('')

onMounted(() => loadData())

async function loadData() {
  loading.value = true
  try {
    const res: any = await pptAdminApi.listHistory({ page: page.value, page_size: pageSize, ...filter.value })
    const data = res?.data ?? res
    list.value = data?.items ?? []
    total.value = data?.total ?? 0
  } finally {
    loading.value = false
  }
}

function showDetail(row: any) {
  detailSnapshot.value = row.contentSnapshot ? JSON.stringify(row.contentSnapshot, null, 2) : '无快照数据'
  detailVisible.value = true
}

async function onDelete(row: any) {
  await pptAdminApi.deleteHistory(row.id)
  ElMessage.success('删除成功')
  loadData()
}
</script>

<style scoped>
.snapshot-view {
  background: #f5f7fa;
  padding: 16px;
  border-radius: 8px;
  font-size: 12px;
  max-height: 400px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
</style>
