<template>
	<view>
		<view v-if="visible" class="mask" @click="close"></view>
		<!-- 底部弹窗 -->
		<view class="popup" v-if="visible">
			<!-- 弹窗标题 -->
			<view class="dialog-title">选择时间</view>

			<!-- 日期显示区域 -->
			<view class="date-display">
				{{ selectedDate }}
			</view>

			<!-- 日历组件 -->
			<view class="calendar-wrapper">
				<CommonCalendar :initial-date="selectedDate" @dateChange="handleDateSelected" />
			</view>

			<!-- 确认按钮 -->
			<view class="confirm-btn" @click="confirmSelection">
				确认
			</view>
		</view>
	</view>
</template>

<script>
	import CommonCalendar from '@/components/CommonCalendar.vue'
	export default {
		components: {
			CommonCalendar
		},
		name: "SelectCalendarDialog",
		props: {
			visible: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				selectedDate: this.getCurrentDate(), // 默认选中的日期
				showCalendar: true // 控制日历是否显示
			};
		},
		methods: {
			close() {
				this.$emit('update:visible', false);
			},
			// 获取当前日期
			getCurrentDate() {
				const today = new Date();
				const year = today.getFullYear();
				const month = String(today.getMonth() + 1).padStart(2, '0');
				const day = String(today.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},

			// 处理日期选择
			handleDateSelected(date) {
				this.selectedDate = date;
				// 不再需要手动关闭日历，因为日历会一直显示在弹窗中
			},

			// 确认选择
			confirmSelection() {
				this.$emit('confirm', this.selectedDate);
				this.close()
			}
		}
	};
</script>

<style scoped>
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);
		z-index: 998;
	}

	.popup {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		max-height: 80%;
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		z-index: 999;
		animation: slideUp 0.3s ease;
	}

	.dialog-title {
		font-size: 36rpx;
		color: #333;
		margin-bottom: 20rpx;
		margin-top: 45rpx;
		text-align: center;
	}

	.date-display {
		width: 100%;
		height: 73rpx;
		line-height: 73rpx;
		text-align: start;
		background: #EBF5FF;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #0B0B0B;
		margin-bottom: 6rpx;
		margin-left: 35rpx;
		margin-right: 35rpx;
		padding-left: 35rpx;
	}

	.calendar-wrapper {
		width: 100%;
		margin-bottom: 89rpx;
	}

	.confirm-btn {
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: #0090FF;
		color: white;
		border-radius: 44rpx;
		font-size: 36rpx;
		margin-left: 65rpx;
		margin-right: 65rpx;
		margin-bottom: 40rpx;
	}
</style>