<template>
	<div class="SelectDate1">
		<div style="display: flex;justify-content: space-between;width: 100%;padding: 8px;">
			<div v-if="orgname" style="font-size: 14px; color: #277d7b;"><van-icon name="label" size="14" />{{orgname}}</div>
			<div v-if="username" style="font-size: 16px;font-weight: 700; color: #277d7b;"><van-icon name="manager" size="18" style="margin-right: 4px;" />{{username}}</div>
		</div>
		<van-steps active="1" active-icon="checked" active-color="#33cdc9">
			<van-step>类型选择</van-step>
			<van-step>选择日期</van-step>
			<van-step>预约完成</van-step>
		</van-steps>
		<div class="head">
			请选择您想预约的时间段
		</div>
		<div style="color:#55b2d3;margin-bottom: 20px;">
			时间段选择
		</div>
		<van-field v-model="selectedDate" is-link readonly label="预约日期" placeholder="选择您想预约日期"
			@click="dateInputClick" />
		<van-field v-model="selectedTime" is-link readonly label="时间段" placeholder="选择时间段" @click="timeInputClick" />
		<van-popup v-model:show="showPicker" round position="bottom">
			<van-picker :columns-field-names="columns_field" :columns="timelist" @cancel="showPicker = false"
				@confirm="timeConfirm" />
		</van-popup>
		<van-calendar v-model:show="dateshow" type="single" :formatter="formatter" @confirm="onConfirm" />
		<van-button v-if="selectedTime" type="primary" class="button" round @click="startYuYue()">下一步</van-button>
		<van-overlay :show="loading">
			<div class="wrapper" @click.stop>
				<van-loading />
			</div>
		</van-overlay>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		useRouter
	} from "vue-router"
	import {
		GetEnableCalendar,
		StartYuYue
	} from "@/api/api.js";
	import {
		showToast,
		showDialog
	} from 'vant';
	import {
		usePiniaStore
	} from '@/stores/index.js'
	const pinia = usePiniaStore()
	const router = useRouter();
	let columns_field = ref({
		text: 'time',
		value: 'id'
	})
	let loading = ref(false)
	let dateshow = ref(false)
	let showPicker = ref(false)
	let selectedDate = ref('')
	let selectedTime = ref('')
	let calendar_id = ref('') // 最终选择的日期id
	let timelist = ref([])
	let datelist = ref([])
	const formatter = (day) => {
		const month = day.date.getMonth() + 1;
		const date = day.date.getDate();

		datelist.value.forEach(function(v, i) {
			var yue = v.date.substring(5, 7)
			var ri = v.date.substring(8, 10)
			if (month == yue && date == ri) {
				day.bottomInfo = '预约';
				day.className = "lei"
			} else {
				console.log(i)
			}
		})
		return day;
	};
	const onConfirm = (e) => {
		function formatDate(date) {
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			return `${year}-${month}-${day}`;
		}
		const formattedDate = formatDate(e);
		console.log(formattedDate)
		let p_status = false
		let timel = []
		for (var i = 0; i < datelist.value.length; i++) {
			if (datelist.value[i].date.substring(0, 10) == formattedDate) {
				p_status = true
				timel.push(datelist.value[i])
			}
		}
		timelist.value = timel
		if (p_status) {
			console.log('提交')
			selectedDate.value = formattedDate


			dateshow.value = false

		}
	}
	const timeConfirm = ({
		selectedOptions
	}) => { //时间段选择确认
		showPicker.value = false
		selectedTime.value = selectedOptions[0].time;
		calendar_id.value = selectedOptions[0].id;
	}
	const dateInputClick = () => {
		if (datelist.value.length > 0) {
			dateshow.value = true
		} else {
			showToast("无可预约日期");
		}

	}
	const timeInputClick = () => { //点击选择时间段输入框
		if (selectedDate.value != '') {
			showPicker.value = true
		} else {
			showToast("请先选择日期");
		}

	}
	const startYuYue = () => {
		loading.value = true
		//	console.log(pinia.yuyue_info)
		let subinfo = pinia.yuyue_info
		subinfo.calendar_id = calendar_id.value
		subinfo.is_zifei=sessionStorage.getItem('is_zifei');
		StartYuYue({
			subinfo: subinfo
		}).then(res => {
			loading.value = false
			if (res.status) { //预约成功 跳转
				router.push('/yuYueSuccess')
			} else {
				showDialog({
					message: res.msg
				});
			}
		})
	}
	let username=ref('');
	let orgname=ref('');
	onMounted(() => {
		username.value=sessionStorage.getItem('name')
		orgname.value=pinia.yuyue_info.org_name
		GetEnableCalendar({
			org_id: pinia.yuyue_info.org_id
		}).then(res => {
			if (res.status) {
				datelist.value = res.list
			} else {
				showToast(res.msg);
			}


		})
	})
</script>

<style scoped>
	.SelectDate1 {
		height: 100vh;
		background-image: url('../assets/image/r_head2.jpg');
		background-size: 50vw;
		background-repeat: no-repeat;
		background-position: 100% 100%;
		padding: 20px;
	}

	.head {
		font-size: 24px;
		font-weight: 700;
		color: #175e5c;
		padding-top: 20px;
	}

	.button {
		width: calc(100vw - 40px);
		background-color: #33cdc9;
		border: 0px;
		position: fixed;
		bottom: 20px;
		border: 3px solid #fff;
	}

	.wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
</style>
<style>
	.lei {
		color: #33cdc9
	}
</style>