<template>
	<view class="compact-datetime-picker">
		<!-- 输入框区域 -->
		<view class="input-container">
			<view class="compact-input" @click="openPicker">
				{{ dateRange[0] || '开始日期' }}
			</view>
			<text class="separator">至</text>
			<view class="compact-input" @click="openPicker">
				{{ dateRange[1] || '结束日期' }}
			</view>
		</view>

		<wu-calendar
			ref="calendar"
			mode="range"
			:date="dateRange"
			@confirm="calendarConfirm"
			slideSwitchMode="horizontal"
			type="month"
			:fold="false"
			:insert="false"
			:rangeSameDay="true"
			:lunar="true"
			:monthShowCurrentMonth="false"
			:range-end-repick="true"
			:item-height="45"
			:rangeEndRepick="true"
		></wu-calendar>
	</view>
</template>

<script>
import { formatDate, getDateAfterDays, getDateAfterMonths } from '@/utils/dateTime.js';
export default {
	props: {
		modelValue: {
			type: Array,
			default: () => [null, null]
		}
	},

	data() {
		return {
			dateRange: []
		};
	},

	watch: {
		modelValue: {
			immediate: true,
			handler(newVal) {
				this.dateRange.push(formatDate(new Date(newVal[0])));
				this.dateRange.push(formatDate(new Date(newVal[1])));
			}
		}
	},

	methods: {
		openPicker() {
			this.$refs.calendar.open();
		},
		calendarConfirm(e) {
			this.dateRange = [];
			try {
				this.dateRange.push(formatDate(new Date(e.range.before)));
				this.dateRange.push(formatDate(new Date(e.range.after)));
			} catch (error) {
				return;
				//TODO handle the exception
			}
			this.$emit('update:modelValue', this.dateRange);
		}
	}
};
</script>

<style scoped>
.input-container {
	display: flex;
	align-items: center;
	gap: 10px;
}
/* 紧凑型输入框 */
.compact-input {
	flex: 1;
	padding: 6px 8px;
	font-size: 16px;
	height: 20px;
	line-height: 20px;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
	text-align: center;
	width: 120px;
}

.compact-input.active {
	border-color: #409eff;
	background-color: #f5f7ff;
}
</style>
