<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">
					<view v-if="baseFormData.applyType != '请假'" style="display: flex;font-size: 14px;padding-top: 32rpx;
					background-color: #03aa0315;height: 76rpx;">
						<view class="r-left">
							<label style="color: #03aa03;font-size: 34rpx;
							padding: 32rpx;background-color: #dcd8d933;">
								{{ baseFormData.days.replace('.0', '') }} 天</label>
						</view>
						<view style="margin-top: -20rpx;">
							<view class="r-right" style="margin-left: 30rpx;">
								{{ baseFormData.startDate }}
								至
								{{ baseFormData.endDate }}
							</view>
							<view class="r-right" style="margin-left: 30rpx;color: #00000095;">
								{{ baseFormData.reason }}
							</view>
						</view>
					</view>

					<uni-forms ref="baseForm" :modelValue="baseFormData" :label-width="80" style="margin-top: 10rpx;">
						<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 class="border-bottom" style="width: 100%;"></view>
						<view style="margin-top: 20rpx;">
							<uni-forms-item label="审核意见" class="custom-label-height">
								<uni-easyinput type="textarea" v-model="rejectReason" />
							</uni-forms-item>
						</view>
					</uni-forms>
				</view>
				<view class="footer-con" style="display: flex;" v-if="baseFormData.reviewerId != 0">
					<button class="btn-warning" type="warning" @click="submit('驳回')" size="mini">驳回</button>
					<button class="btn-success" type="success" @click="submit('同意')" size="mini">同意</button>

				</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 {
	addReviewLeave
} from '@/api/crm/activity/activity';

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

let rejectReason = 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',
});

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

		baseFormData.days = baseFormData.days.toString()
		baseFormData.leaveDays = baseFormData.leaveDays.replace('.0', '')

		if (baseFormData.reviewerIdR != null) {
			rejectReason.value = baseFormData.rejectReason
		}
	}
})

// 查询详情
let item = ref({});
const submit = async (status) => {
	if (status == '驳回' && (rejectReason.value == null || rejectReason.value == "")) {
		uni.showToast({
			title: '请填写驳回原因',
			duration: 2000
		});
	} else {
		let param = {
			reviewStatus: status == '同意' ? '完成' : '驳回',
			reviewResult: status == '同意' ? '通过' : '驳回',
			rejectReason: rejectReason.value,
			applyType: baseFormData.applyType,
			leaveId: baseFormData.leaveId,
			backId: baseFormData.backId,
			days: baseFormData.days,
		}
		addReviewLeave(param).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',
					});
				}
			},
		);
	}
}

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: #67d23a;
	border: 1px solid #67d23a;
	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;
}
</style>