<template>
	<view class="leave-detail-container">
		<!-- 请假类型 -->
		<view class="detail-item">
			<view class="item-label">请假类型：</view>
			<view class="item-value">{{ detail.leaveType || '无' }}</view>
		</view>
		<!-- 开始时间 -->
		<view class="detail-item">
			<view class="item-label">开始时间：</view>
			<view class="item-value">{{ formatTime(detail.startTime) || '无' }}</view>
		</view>
		<!-- 结束时间 -->
		<view class="detail-item">
			<view class="item-label">结束时间：</view>
			<view class="item-value">{{ formatTime(detail.endTime) || '无' }}</view>
		</view>
		<!-- 请假时长 -->
		<view class="detail-item">
			<view class="item-label">请假时长：</view>
			<view class="item-value">{{ detail.hours || '0' }} 小时</view>
		</view>
		<!-- 请假原因 -->
		<view class="detail-item">
			<view class="item-label">请假原因：</view>
			<view class="item-value">{{ detail.reason || '无' }}</view>
		</view>
		<!-- 申请人 -->
		<view class="detail-item">
			<view class="item-label">申请人：</view>
			<view class="item-value">{{ detail.createBy || '无' }}</view>
		</view>
		<!-- 申请时间 -->
		<view class="detail-item">
			<view class="item-label">申请时间：</view>
			<view class="item-value">{{ formatTime(detail.createTime) || '无' }}</view>
		</view>
	</view>
</template>

<script>
	import { getLeaveReq } from '@/api/hrm/leave'
	
	export default {
		props: {
			bizId: {
				type: String,
				required: true
			}
		},
		data() {
			return {
				detail: {}
			}
		},
		watch: {
			bizId: {
				handler(newVal) {
					// 空值判断，避免无效请求
					if (!newVal) return;
					// 接口请求增加错误捕获
					getLeaveReq(newVal)
						.then(res => {
							this.detail = res.data || {};
							console.log(this.detail);
						})
						.catch(err => {
							console.error('获取请假详情失败：', err);
							uni.showToast({
								title: '获取详情失败',
								icon: 'none',
								duration: 2000
							});
						});
				},
				immediate: true
			}
		},
		methods: {
			/**
			 * 时间格式化方法
			 * 将 "2026-01-08 00:00:00" 格式化为 "2026-01-08"
			 * @param {String} timeStr - 原始时间字符串
			 * @returns {String} 格式化后的日期
			 */
			formatTime(timeStr) {
				if (!timeStr) return '';
				// 分割时间和日期，只保留日期部分
				const [datePart] = timeStr.split(' ');
				return datePart;
			}
		}
	}
</script>

<style scoped>
/* 容器样式 */
.leave-detail-container {
	padding: 20rpx;
	background-color: #ffffff;
	border-radius: 12rpx;
	margin: 10rpx;
}

/* 每一项的样式 */
.detail-item {
	display: flex;
	align-items: center;
	padding: 18rpx 0;
	border-bottom: 1px solid #f5f5f5;
}

/* 最后一项去掉下边框 */
.detail-item:last-child {
	border-bottom: none;
}

/* 标签样式 */
.item-label {
	width: 140rpx;
	font-size: 28rpx;
	color: #666666;
	font-weight: 500;
}

/* 值的样式 */
.item-value {
	flex: 1;
	font-size: 28rpx;
	color: #333333;
}
</style>