<template>
  <div class="page-container">
    <h2 class="page-title">Schema 变更追踪</h2>
    <div class="filter-bar card-shadow" style="padding: 16px; margin-bottom: 16px; display: flex; gap: 12px; align-items: center;">
      <el-select v-model="filterSourceId" placeholder="选择数据源" clearable style="width: 180px">
        <el-option v-for="s in dataSources" :key="s.id" :label="s.name" :value="s.id" />
      </el-select>
      <el-select v-model="filterChangeType" placeholder="变更类型" clearable style="width: 140px">
        <el-option label="新增表" value="add_table" />
        <el-option label="删除表" value="drop_table" />
        <el-option label="新增字段" value="add_column" />
        <el-option label="删除字段" value="drop_column" />
        <el-option label="类型变更" value="change_type" />
      </el-select>
      <el-button type="primary" @click="fetchData">查询</el-button>
    </div>
    <div class="table-card card-shadow">
      <el-table :data="logList" v-loading="loading" stripe size="default" border>
        <el-table-column prop="change_type" label="变更类型" width="120">
          <template #default="{ row }">
            <el-tag :type="changeTypeColor(row.change_type)" size="small">
              {{ changeTypeText(row.change_type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="old_value" label="旧值" min-width="120" show-overflow-tooltip />
        <el-table-column prop="new_value" label="新值" min-width="120" show-overflow-tooltip />
        <el-table-column prop="detected_at" label="检测时间" width="180" />
      </el-table>
      <div style="display: flex; justify-content: flex-end; margin-top: 16px;">
        <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :total="total" layout="total, prev, pager, next" @change="fetchData" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getSchemaChangeLogs } from '@/api/schema_change'
import { getDataSources } from '@/api/datasource'

const loading = ref(false)
const logList = ref<any[]>([])
const page = ref(1)
const pageSize = ref(20)
const total = ref(0)
const filterSourceId = ref<number | undefined>(undefined)
const filterChangeType = ref('')
const dataSources = ref<any[]>([])

function changeTypeText(v: string) {
  const map: Record<string, string> = {
    add_table: '新增表', drop_table: '删除表',
    add_column: '新增字段', drop_column: '删除字段',
    change_type: '类型变更', change_comment: '注释变更',
    drop_database: '删除库', add_database: '新增库',
  }
  return map[v] || v
}

function changeTypeColor(v: string) {
  if (v.startsWith('add')) return 'success'
  if (v.startsWith('drop')) return 'danger'
  return 'warning'
}

async function fetchData() {
  loading.value = true
  try {
    const res: any = await getSchemaChangeLogs({
      source_id: filterSourceId.value,
      change_type: filterChangeType.value || undefined,
      page: page.value,
      page_size: pageSize.value,
    })
    logList.value = res.data || []
    total.value = res.total || 0
  } catch (e: any) {
    ElMessage.error(e?.message || '加载失败')
  } finally {
    loading.value = false
  }
}

async function fetchSources() {
  try {
    const res: any = await getDataSources()
    dataSources.value = res.data || []
  } catch (e) { /* ignore */ }
}

onMounted(() => {
  fetchSources()
  fetchData()
})
</script>
