<template>
	<view class="con-body">
		<view class="con-bg">
			<customHeader ref="customHeaderRef" :title="'请假申请'" :leftFlag="true">
			</customHeader>
			<!-- #ifdef H5 -->
			<view style="height:30rpx"></view>
			<!-- #endif -->

			<!-- 高度来避免头部遮挡 -->
			<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="请假模式">
							<uni-data-select v-model="baseFormData.typeval" :localdata="range"
								@change="change" :clear="false"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="开始日期">
							<uni-datetime-picker type="date" :clear-icon="false"
								placeholder="请输入开始日期" v-model="baseFormData.startDate"
								@change="change" />
						</uni-forms-item>
						<uni-forms-item v-show="baseFormData.typeval=='1'" label="结束日期">
							<uni-datetime-picker type="date" :clear-icon="false"
								placeholder="请输入结束日期" v-model="baseFormData.endDate"
								@change="change" />
						</uni-forms-item>
						<uni-forms-item label="开始时间" v-show="baseFormData.typeval!='1'">
							<input type="text" class="inputborder" style="text-align: center;"
								v-model="baseFormData.startTime" :disabled="true" />
						</uni-forms-item>
						<uni-forms-item label="结束时间" v-show="baseFormData.typeval!='1'">
							<input type="text" class="inputborder" style="text-align: center;"
								v-model="baseFormData.endTime" :disabled="true" />
						</uni-forms-item>
						<uni-forms-item label="请假天数">
							<input type="text" class="inputborder" style="text-align: center;"
								v-model="baseFormData.days" :disabled="true" />
						</uni-forms-item>
						<uni-forms-item label="详细说明" class="custom-label-height">
							<uni-easyinput type="textarea" v-model="baseFormData.reason"
								placeholder="请输入详细说明" />
						</uni-forms-item>
					</uni-forms>
				</view>
				<view>
					<button type="primary" @click="submit()">提交</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue'
	import customHeader from '@/components/customHeader.vue'
	import {
		getNavBarPaddingTop
	} from '@/utils/system.js'

	import {
		addLeaveApply
	} from '@/api/crm/activity/activity';

	// 获取导航栏高度用于内容区域padding
	const navBarPaddingTop = ref(0);
	onMounted(() => {
		navBarPaddingTop.value = getNavBarPaddingTop() * 2;
	})

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

	const baseFormData = reactive({
		typeval: 1,
		startDate: getDate(Date.now()),
		endDate: getDate(Date.now()),
		days: 1,
		reason: '',
		startTime: '08:30',
		endTime: '12:30',
	});

	const range = ref([{
		"value": 1,
		"text": "全天"
	}, {
		"value": 2,
		"text": "前半个班次"
	}, {
		"value": 3,
		"text": "后半个班次"
	}]);

	const submit = async () => {
		try {

			
			if (baseFormData.reason == null || baseFormData.reason == "") {
				uni.showToast({
					title: '请填写详细说明',
					icon: 'error'
				});
			} else if (baseFormData.days == 0 || baseFormData.startDate < getDate(Date.now()) || baseFormData.endDate < getDate(Date.now())) {
				uni.showToast({
					title: '请确认日期',
					icon: 'error'
				});
			} else {
				if (baseFormData.typeval != 1) {
					baseFormData.endDate = baseFormData.startDate
				}
				// 验证表单
				await baseForm.value.validate();
				// 验证通过后的操作
				uni.showToast({
					title: '验证通过',
					icon: 'success'
				});

				addLeaveApply(baseFormData).then(
					res => {
						if (res.code == 200) {
							uni.showToast({
								title: '提交成功',
								duration: 2000
							});
							setTimeout(function() {
								uni.navigateBack({
									success: () => {}
								})
							}, 500);
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
							});
						}
					},
				);
			}


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

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

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

	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
	}

	// 计算两个日期的天数差
	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 lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.inputborder {
		width: 100%;
		text-align: left;
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		font-size: 14px;
		height: 35px;
	}

	:deep(.uni-forms-item__label) {
		padding: 0 20rpx;
		background-color: rgba(103, 194, 58, 0.2);
	}

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

	::v-deep .uni-easyinput__content-textarea {
		height: 152rpx !important;
	}
</style>