<template>
	<view class="audit-page">
	
		<!-- 审核记录表格 -->
		<view class="table-container">
			<view class="table-header">
				<view class="th th-index">序号</view>
				<view class="th th-dept">审核协会</view>
				<view class="th th-date">审核日期</view>
				<view class="th th-status">审核状态</view>
				<view class="th th-reason">理由</view>
			</view>

			<view class="table-body" v-if="loading">
				<view class="loading-row">加载中...</view>
			</view>

			<view class="table-body" v-if="recordList.length > 0">
				<view class="table-row" v-for="(item, index) in recordList" :key="index">
					<view class="td td-index">{{ index + 1 }}</view>
					<view class="td td-dept">{{ item.auditDeptName || '/' }}</view>
					<view class="td td-date">{{ formatDate(item.auditTime) }}</view>
					<view class="td td-status">
						<text v-if="item.auditResult == 1" class="status-success">审核通过</text>
						<text v-else-if="item.auditResult == 0" class="status-reject">审核拒绝</text>
						<text v-else class="status-pending">待审核</text>
					</view>
					<view class="td td-reason">{{ item.auditMsg || '/' }}</view>
				</view>
			</view>

			<view class="table-body" v-else>
				<view class="empty-row">暂无审核记录</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import * as api from '@/common/api.js'
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const loading = ref(true)
	const recordList = ref([])

	onLoad(async (option) => {
		await getMyRecentFN()
	})

	onMounted(() => {
		getMyRecentFN()
	})

	async function getMyRecentFN() {
		loading.value = true
		try {
			const res = await api.getMyRecent()
			loading.value = false
			if (res.code === 200 && res.data && res.data.auditLogs) {
				recordList.value = JSON.parse(res.data.auditLogs)
			} else {
				// 清空记录列表，显示暂无记录
				recordList.value = []
			}
		} catch (e) {
			loading.value = false
			// 清空记录列表，显示暂无记录
			recordList.value = []
			console.error('获取审核记录失败', e)
		}
	}

	function formatDate(dateStr) {
		if (!dateStr) return '/'
		const date = new Date(dateStr)
		const year = date.getFullYear()
		const month = String(date.getMonth() + 1).padStart(2, '0')
		const day = String(date.getDate()).padStart(2, '0')
		return `${year}-${month}-${day}`
	}
</script>

<style scoped lang="scss">
.audit-page {
	min-height: 100vh;
	background: #f5f5f5;
	padding-bottom: 40rpx;
}

.page-header {
	background: linear-gradient(135deg, #1561cb 0%, #1e7de1 100%);
	padding: 30rpx;
	text-align: center;

	.header-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #fff;
	}
}

.table-container {
	margin: 30rpx;
	background: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.table-header {
	display: flex;
	background: #f5f7fa;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;

	.th {
		font-size: 24rpx;
		color: #666;
		font-weight: 600;
		text-align: center;
	}

	.th-index {
		width: 80rpx;
	}

	.th-dept {
		flex: 1;
		min-width: 150rpx;
	}

	.th-date {
		width: 160rpx;
	}

	.th-status {
		width: 140rpx;
	}

	.th-reason {
		flex: 1;
		min-width: 120rpx;
	}
}

.table-body {
	.table-row {
		display: flex;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #f0f0f0;

		&:last-child {
			border-bottom: none;
		}
	}

	.td {
		font-size: 24rpx;
		color: #333;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.td-index {
		width: 80rpx;
		color: #999;
	}

	.td-dept {
		flex: 1;
		min-width: 150rpx;
		padding: 0 10rpx;
		word-break: break-all;
	}

	.td-date {
		width: 160rpx;
		color: #666;
		font-size: 22rpx;
	}

	.td-status {
		width: 140rpx;

		.status-success {
			color: #07c07e;
		}

		.status-reject {
			color: #e64329;
		}

		.status-pending {
			color: #ff9800;
		}
	}

	.td-reason {
		flex: 1;
		min-width: 120rpx;
		padding: 0 10rpx;
		font-size: 22rpx;
		color: #666;
		word-break: break-all;
	}
}

.loading-row,
.empty-row {
	padding: 60rpx 0;
	text-align: center;
	font-size: 26rpx;
	color: #999;
}
</style>