<template>
  <el-table :data="records" stripe v-loading="loading" max-height="400">
    <el-table-column prop="operateTypeDesc" label="操作类型" width="100" align="center">
      <template #default="scope">
        <el-tag :type="getOperateTypeStyle(scope.row.operateType)">
          {{ scope.row.operateTypeDesc }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="operateRoleDesc" label="操作角色" width="100" />
    <el-table-column prop="operateByName" label="操作人" width="100" />
    <el-table-column prop="currentVersion" label="文件版本" width="80" align="center" />
    <el-table-column prop="remark" label="批注意见" min-width="200" show-overflow-tooltip>
      <template #default="scope">
        {{ scope.row.remark || '-' }}
      </template>
    </el-table-column>
    <el-table-column prop="operateTime" label="操作时间" width="160" />
  </el-table>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { getAuditRecords } from '/@/api/purchase/docProcess'

const props = defineProps<{
  applyId: number | string
}>()

const records = ref<any[]>([])
const loading = ref(false)

const loadRecords = async () => {
  if (!props.applyId) return
  loading.value = true
  try {
    const res = await getAuditRecords(props.applyId)
    records.value = res.data || []
  } catch (e) {
    records.value = []
  } finally {
    loading.value = false
  }
}

const refresh = () => {
  loadRecords()
}

const getOperateTypeStyle = (type: string) => {
  const styleMap: Record<string, string> = {
    'UPLOAD': 'primary',
    'CONFIRM': 'success',
    'RETURN': 'warning',
    'COMPLETE': 'success'
  }
  return styleMap[type] || 'info'
}

watch(() => props.applyId, () => {
  loadRecords()
}, { immediate: true })

defineExpose({ refresh })
</script>