<template>
	<view class="con-body">
		<view class="con-bg">
			<!-- 头部 -->
			<customHeader ref="customHeaderRef" :title="'表单详情'" :leftFlag="true" :rightFlag="false">
			</customHeader>

			<!-- 高度来避免头部遮挡 -->
			<view class="top-height"></view>
			<view class="white-bg">
				<view class="example">
					<uni-forms ref="baseForm" :modelValue="baseFormData" :label-width="80">
						<uni-forms-item :label="baseFormData.applyType == '请假' ? '请假模式' : '销假模式'"
							:class="baseFormData.applyType == '请假' ? 'leaveApple' : 'backLeave'">
							<uni-easyinput v-model="baseFormData.typeName" class="inputborder"
								:disabled="true" style="text-align: center;" />
						</uni-forms-item>
						<uni-forms-item label="开始日期"
							:class="baseFormData.applyType == '请假' ? 'leaveApple' : 'backLeave'">
							<uni-easyinput v-model="baseFormData.startDate" class="inputborder"
								:disabled="true" style="text-align: center;" />
						</uni-forms-item>
						<uni-forms-item v-show="baseFormData.typeval == '1'" label="结束日期"
							:class="baseFormData.applyType == '请假' ? 'leaveApple' : 'backLeave'">
							<uni-easyinput v-model="baseFormData.endDate" class="inputborder"
								:disabled="true" style="text-align: center;" />
						</uni-forms-item>
						<uni-forms-item label="开始时间" v-show="baseFormData.typeval != '1'"
							:class="baseFormData.applyType == '请假' ? 'leaveApple' : 'backLeave'">
							<uni-easyinput v-model="baseFormData.startTime" class="inputborder"
								:disabled="true" style="text-align: center;" />
						</uni-forms-item>
						<uni-forms-item label="结束时间" v-show="baseFormData.typeval != '1'"
							:class="baseFormData.applyType == '请假' ? 'leaveApple' : 'backLeave'">
							<uni-easyinput v-model="baseFormData.endTime" class="inputborder"
								:disabled="true" style="text-align: center;" />
						</uni-forms-item>
						<uni-forms-item :label="baseFormData.applyType == '请假' ? '请假天数' : '销假天数'"
							:class="baseFormData.applyType == '请假' ? 'leaveApple' : 'backLeave'">
							<uni-easyinput v-model="baseFormData.days" class="inputborder"
								:disabled="true" style="text-align: center;" />
						</uni-forms-item>
						<uni-forms-item label="详细说明"
							:class="baseFormData.applyType == '请假' ? 'leaveApple custom-label-height' : 'backLeave custom-label-height'">
							<uni-easyinput type="textarea" v-model="baseFormData.reason"
								:disabled="true" />
						</uni-forms-item>

						<view v-if="baseFormData.reviewList.length > 0" class="reviewContent">
							<view style="display: flex;margin-top: 10rpx;"
								v-for="(item, index) in baseFormData.reviewList" :key="index">
								<label style="width: 150rpx;">{{ item.userName }}：</label>
								<label style="width: 100rpx;color: #03aa03;"
									v-if="item.reviewResult == '通过'">{{
									item.reviewResult }}</label>
								<label style="width: 100rpx;color:  #fa3303;"
									v-if="item.reviewResult == '驳回'">{{
									item.reviewResult }}</label>
								<view style="max-width: 400rpx; overflow-y: auto;">
									{{ item.rejectReason }}
								</view>

							</view>
						</view>

						<view class="footer-con" style="margin-top: 20rpx;"
							v-if="baseFormData.status == '待审批' || baseFormData.status == '审批中'">
							<button class="btn-warning" @click="cancelApply()">撤销</button>
						</view>
					</uni-forms>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import customHeader from '@/components/customHeader.vue'
	import customTabs from '@/components/customTabs.vue';
	import {
		getDelLeaveApply
	} from '@/api/crm/activity/activity';

	// 表单ref
	let baseForm = ref(null);

	let baseFormData = reactive({
		typeName: "全天",
		typeval: 1,
		startDate: getDate(Date.now()),
		endDate: getDate(Date.now()),
		days: 1,
		reason: '',
		startTime: '08:30',
		endTime: '12:30',
		reviewList: []
	});

	onLoad((options) => {
		if (options.data) {
			baseFormData = JSON.parse(decodeURIComponent(options.data))
			change()

			baseFormData.days = baseFormData.days.toString()
		}
	})

	const cancelApply = async () => {
		try {
			uni.showModal({
				title: '',
				content: '您确定要撤销申请吗？',
				confirmColor: '#007AFF',
				cancelColor: '#999999',
				success: (res) => {
					if (res.confirm) {
						getDelLeaveApply({
							leaveId: baseFormData.leaveId,
							backId: baseFormData.backId,
							applyType: baseFormData.applyType
						}).then(
							res => {
								if (res.code == 200) {
									uni.showToast({
										title: '撤销成功',
										duration: 2000
									});
									setTimeout(function() {
										uni.navigateBack({
											success: () => {
												uni.$emit('isRefresh');
											}
										})
									}, 500);
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
									});
								}
							},
						);

					} else if (res.cancel) {

					}
				}
			});

		} catch (err) {
			console.log('表单验证失败:', err);
		}
	};

	function getDate(dateval) {
		const date = new Date(dateval)
		const year = date.getFullYear()
		const month = date.getMonth() + 1
		const day = date.getDate()
		return `${year}-${addZero(month)}-${addZero(day)}`
	}

	function addZero(num) {
		if (num < 10) {
			num = `0${num}`
		}
		return num
	}

	let change = () => {
		if (baseFormData.typeval != 1) {
			if (baseFormData.typeval == 2) {
				baseFormData.startTime = '08:30'
				baseFormData.endTime = '12:30'

				baseFormData.typeName = '前半个班次'
			} else {
				baseFormData.startTime = '13:00'
				baseFormData.endTime = '17:00'

				baseFormData.typeName = '后半个班次'
			}

			baseFormData.days = 0.5
		} else {
			let start = baseFormData.startDate
			let end = baseFormData.endDate
			baseFormData.days = getDayDiff(start, end);

			baseFormData.typeName = '全天'
		}

		baseFormData.days = baseFormData.days.toString()
	}

	// 计算两个日期的天数差
	function getDayDiff(startDate, endDate) {
		// 处理日期格式（兼容iOS）
		const start = startDate.replace(/-/g, '/');
		const end = endDate.replace(/-/g, '/');

		const date1 = new Date(start).getTime();
		const date2 = new Date(end).getTime();

		if (date2 < date1) {
			return 0
		}

		// 计算天数差（含边界值+1天）
		return Math.floor(Math.abs(date2 - date1) / (24 * 3600 * 1000)) + 1;
	}
</script>

<style scoped>
	.white-bg {
		width: 690rpx;
		margin: 0;
		border-radius: 8px 8px 0 0;
	}

	.white-bg.white-bg-2 {
		border-radius: 0;
		margin-bottom: 20rpx;
	}

	:deep(.tabs-header) {
		/* background: none !important; */
		border-bottom: none !important;
		margin: 0 auto;
		gap: 5px;
	}

	:deep(.tab-item) {
		color: #919191;
		font-size: 32rpx;
		font-weight: bold;
		/* flex:none; */
		/* margin: 0 -50rpx; */
		/* padding: 0 50rpx; */
	}

	:deep(.tab-item:first-child) {
		text-align: right;
		margin-left: 230rpx;
	}

	:deep(.tab-item:last-child) {
		text-align: left;
		margin-right: 230rpx;
	}

	:deep(.tab-item.active) {
		color: #3384DF;
		font-weight: bold;
	}

	:deep(.tab-item.active::after) {
		width: 100rpx;
		height: 8rpx;
	}

	:deep(.is-disabled) {
		background-color: rgba(255, 255, 255, 1) !important;
		color: #333;
	}

	.btn-success {
		background-color: #67c23a;
		border: 1px solid #67c23a;
		color: #fff;
		/* padding: 0rpx 60rpx; */
	}

	.btn-warning {
		background-color: #f6b23c;
		border: 1px solid #f6b23c;
		color: #fff;
		/* padding: 0rpx 60rpx; */
	}

	.leaveApple {
		background-color: rgba(103, 194, 58, 0.2);
	}

	.backLeave {
		background-color: rgba(230, 162, 60, 0.2);
	}

	:deep(.uni-forms-item__label) {
		padding: 0 12px;
	}

	:deep(.custom-label-height .uni-forms-item__label) {
		height: 190rpx;
	}

	::v-deep .uni-easyinput__content-textarea {
		height: 166rpx !important;
	}

	.reviewContent {
		border: 1px solid #dcdfe6;
		padding: 20rpx;
	}
</style>