<template>
	<view class="padding page">
		<view class="padding bg-white radius margin-bottom card-item" v-for="item in hazardList" :key="item.hazardId || item.id">
			<view class="flex justify-between margin-bottom">
				<view class="text-bold text-black" style="flex: 1; margin-right: 16rpx;">{{item.hazardTitle}}</view>
				<view class="status-tag" :class="getStatusClass(item)">{{item.verifyResultName || '未知'}}</view>
			</view>
			<view class="flex margin-bottom">
				<view class="text-gray">隐患日期：</view>
				<view class="text-black">{{item.hazardCreatedAt}}</view>
			</view>
			<view class="flex margin-bottom">
				<view class="text-gray">责任单位：</view>
				<view class="text-black">{{item.responsibleDeptName}}</view>
			</view>
			<view class="flex margin-bottom">
				<view class="text-gray">判定人员：</view>
				<view class="text-black">{{item.responsiblePerson}}</view>
			</view>
			<view class="flex margin-bottom">
				<view class="text-gray">创建时间：</view>
				<view class="text-black">{{item.createdAt}}</view>
			</view>
			<view class="flex justify-between">
				<view></view>
				<view><button class="bg-blue round cu-btn lg" @click="editor(item)">查看详情</button></view>
			</view>
		</view>
		<button class="cuIcon-add bg-blue round margin-top" @click="goAddApply">新增</button>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import { getMyWriteOffList } from '@/request/api.js';

	const hazardList = ref([]);

	const fetchWriteOffList = async () => {
		try {
			const res = await getMyWriteOffList();
			if (res.code === 0 && res.data) {
				hazardList.value = res.data;
			}
		} catch (error) {
			console.error('获取销号申请列表失败:', error);
		}
	};

	const goAddApply = () => {
		uni.navigateTo({ url: '/pages/closeout/apply' });
	};

	const editor = (item) => {
		if (!item?.id) {
			uni.showToast({ title: '缺少申请ID', icon: 'none' });
			return;
		}
		uni.navigateTo({
			url: `/pages/closeout/editor?applyId=${item.id}`
		});
	};

	const getStatusClass = (item) => {
		const statusName = item?.verifyResultName || '';
		if (statusName === '待审核') return 'status-pending';
		if (statusName === '审核通过' || statusName === '已通过') return 'status-passed';
		if (statusName === '审核驳回' || statusName === '已驳回') return 'status-rejected';
		if (statusName === '已重新申请') return 'status-reapply';
		if (item?.verifyResult === 1) return 'status-passed';
		if (item?.verifyResult === 2) return 'status-rejected';
		return 'status-default';
	};

	onShow(() => {
		fetchWriteOffList();
	});
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: #EBF2FC;
	}

	.status-tag {
		padding: 4rpx 16rpx;
		border-radius: 6rpx;
		font-size: 22rpx;
		white-space: nowrap;
		flex-shrink: 0;
		font-weight: 500;
		height: 40rpx;
		line-height: 40rpx;
		align-self: flex-start;
	}

	.status-pending {
		background: #FFF7E6;
		color: #FA8C16;
	}

	.status-passed {
		background: #F6FFED;
		color: #52C41A;
	}

	.status-rejected {
		background: #FFF1F0;
		color: #F5222D;
	}

	.status-reapply {
		background: #E6F7FF;
		color: #1890FF;
	}

	.status-default {
		background: #F5F5F5;
		color: #8C8C8C;
	}
</style>
