JCSS / jcss-miniprogram

<template>
	<view class="neo-datetime-pro">
		<!-- 触发器 -->
		<view 
			class="trigger" 
			:class="{ disabled, readonly }"
			@click="handleTriggerClick"
		>
			<text v-if="displayValue" class="trigger-value">{{ displayValue }}</text>
			<text v-else class="trigger-placeholder">{{ placeholder }}</text>
			<text v-if="clearable && displayValue && !disabled && !readonly" class="trigger-clear" @click.stop="handleClear">×</text>
		</view>
		
		<!-- 底部弹出层 -->
		<view v-if="visible" class="popup-overlay" @click="handleCancel">
			<view class="popup-content" :class="{ show: popupShow }" @click.stop>
				<!-- 头部 -->
				<view class="popup-header">
					<text class="popup-title">{{ popupTitle }}</text>
					<text class="popup-close" @click="handleCancel">×</text>
				</view>
				
				<!-- 快捷选项 -->
				<view v-if="shortcuts.length > 0 && isRangeType" class="shortcuts">
					<view 
						v-for="(shortcut, index) in shortcuts" 
						:key="index"
						class="shortcut-item"
						@click="handleShortcut(shortcut)"
					>
						{{ shortcut.text }}
					</view>
				</view>
				
				<!-- 主体内容 -->
				<view class="popup-body">
					<!-- 日期选择器 -->
					<view v-if="showDatePicker" class="date-picker">
						<!-- 年月切换 -->
						<view class="calendar-header">
							<text class="calendar-nav" @click="prevMonth">‹</text>
							<text class="calendar-title" @click="showYearMonthPicker = true">
								{{ currentYear }}{{ locale === 'zh' ? '年' : '-' }}{{ String(currentMonth).padStart(2, '0') }}{{ locale === 'zh' ? '月' : '' }}
							</text>
							<text class="calendar-nav" @click="nextMonth">›</text>
						</view>
						
						<!-- 星期标题 -->
						<view class="calendar-weekdays">
							<text 
								v-for="(day, index) in weekdays" 
								:key="index"
								class="weekday"
							>
								{{ day }}
							</text>
						</view>
						
						<!-- 日期网格 -->
						<view class="calendar-days">
							<view 
								v-for="(day, index) in calendarDays" 
								:key="index"
								class="day-cell"
								:class="getDayClass(day)"
								@click="handleDayClick(day)"
							>
								<text class="day-text">{{ day.day }}</text>
								<text v-if="showWeekNumber && day.weekNumber" class="week-number">W{{ day.weekNumber }}</text>
							</view>
						</view>
					</view>
					
					<!-- 时间选择器 -->
					<view v-if="showTimePicker" class="time-picker">
						<view 
							class="time-picker-header"
							:class="{ 'single-column': !showMinutes && !showSeconds, 'double-column': showMinutes && !showSeconds }"
						>
							<text class="time-label" v-if="showHours">{{ locale === 'zh' ? '时' : 'Hour' }}</text>
							<text class="time-label" v-if="showMinutes">{{ locale === 'zh' ? '分' : 'Minute' }}</text>
							<text class="time-label" v-if="showSeconds">{{ locale === 'zh' ? '秒' : 'Second' }}</text>
						</view>
						<picker-view 
							:value="timePickerValue" 
							class="time-picker-view"
							:class="{ 'single-column': !showMinutes && !showSeconds, 'double-column': showMinutes && !showSeconds }"
							@change="handleTimeChange"
						>
							<!-- 小时 -->
							<picker-view-column v-if="showHours">
								<view v-for="h in hours" :key="h" class="time-item">{{ String(h).padStart(2, '0') }}</view>
							</picker-view-column>
							<!-- 分钟 -->
							<picker-view-column v-if="showMinutes">
								<view v-for="m in minutes" :key="m" class="time-item">{{ String(m).padStart(2, '0') }}</view>
							</picker-view-column>
							<!-- 秒 -->
							<picker-view-column v-if="showSeconds">
								<view v-for="s in seconds" :key="s" class="time-item">{{ String(s).padStart(2, '0') }}</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>
				
				<!-- 底部按钮 -->
			<view class="popup-footer">
				<!-- 如果是第二步，显示"上一步"按钮 -->
				<view 
					v-if="currentStep === 2" 
					class="footer-btn footer-btn-back" 
					@click="handleBack"
				>
					{{ locale === 'zh' ? '上一步' : 'Back' }}
				</view>
				<view 
					v-else 
					class="footer-btn footer-btn-cancel" 
					@click="handleCancel"
				>
					{{ locale === 'zh' ? '取消' : 'Cancel' }}
				</view>
				
				<!-- 如果是 datetime/datetimerange 的第一步，显示"下一步" -->
				<view 
					v-if="(type === 'datetime' || type === 'datetimerange') && currentStep === 1"
					class="footer-btn footer-btn-confirm" 
					@click="handleNext"
				>
					{{ locale === 'zh' ? '下一步' : 'Next' }}
				</view>
				<!-- 否则显示"确定" -->
				<view 
					v-else
					class="footer-btn footer-btn-confirm" 
					@click="handleConfirm"
				>
					{{ locale === 'zh' ? '确定' : 'Confirm' }}
				</view>
			</view>
			</view>
		</view>
		
		<!-- 年月选择器 -->
		<view v-if="showYearMonthPicker" class="year-month-picker-overlay" @click="showYearMonthPicker = false">
			<view class="year-month-picker-content" @click.stop>
				<picker-view 
					:value="yearMonthPickerValue" 
					class="year-month-picker-view"
					@change="handleYearMonthChange"
				>
					<!-- 年份 -->
					<picker-view-column>
						<view v-for="y in years" :key="y" class="ym-item">{{ y }}{{ locale === 'zh' ? '年' : '' }}</view>
					</picker-view-column>
					<!-- 月份 -->
					<picker-view-column>
						<view v-for="m in 12" :key="m" class="ym-item">{{ String(m).padStart(2, '0') }}{{ locale === 'zh' ? '月' : '' }}</view>
					</picker-view-column>
				</picker-view>
				<view class="year-month-picker-footer">
					<view class="footer-btn footer-btn-cancel" @click="showYearMonthPicker = false">取消</view>
					<view class="footer-btn footer-btn-confirm" @click="confirmYearMonth">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'NeoDatetimePro',
	props: {
		modelValue: {
			type: [String, Array, Date],
			default: ''
		},
		type: {
			type: String,
			default: 'date' // date, datetime, time, daterange, datetimerange
		},
		format: {
			type: String,
			default: 'YYYY-MM-DD'
		},
		placeholder: {
			type: String,
			default: '请选择'
		},
		disabled: {
			type: Boolean,
			default: false
		},
		readonly: {
			type: Boolean,
			default: false
		},
		clearable: {
			type: Boolean,
			default: true
		},
		shortcuts: {
			type: Array,
			default: () => []
		},
		disabledDate: {
			type: Function,
			default: null
		},
		minDate: {
			type: [String, Date],
			default: null
		},
		maxDate: {
			type: [String, Date],
			default: null
		},
		showWeekNumber: {
			type: Boolean,
			default: false
		},
		locale: {
			type: String,
			default: 'zh' // zh, en
		},
		startOfWeek: {
			type: Number,
			default: 0 // 0=Sunday, 1=Monday
		},
		currentTime: {
			type: [Date, String, Number],
			default: null // 当前时间，支持从接口获取。未传入时使用客户端时间
		}
	},
	data() {
		// 初始化时获取当前时间
		let now = new Date()
		if (this.currentTime) {
			if (this.currentTime instanceof Date) {
				now = this.currentTime
			} else if (typeof this.currentTime === 'number') {
				now = new Date(this.currentTime)
			} else if (typeof this.currentTime === 'string') {
				now = new Date(this.currentTime.replace(/-/g, '/'))
			}
		}
		return {
			visible: false,
			popupShow: false,
			showYearMonthPicker: false,
			currentStep: 1, // 当前步骤：1=选日期，2=选时间
			currentYear: now.getFullYear(),
			currentMonth: now.getMonth() + 1,
			selectedDate: null,
			selectedStartDate: null,
			selectedEndDate: null,
			selectingStart: true,
			selectedHour: 0,
			selectedMinute: 0,
			selectedSecond: 0,
			timePickerValue: [0, 0, 0],
			yearMonthPickerValue: [0, 0],
			hours: Array.from({ length: 24 }, (_, i) => i),
			minutes: Array.from({ length: 60 }, (_, i) => i),
			seconds: Array.from({ length: 60 }, (_, i) => i),
			// 性能优化：缓存今天的时间戳
			todayTimestamp: null,
			cachedToday: null
		}
	},
	computed: {
		isRangeType() {
			return this.type === 'daterange' || this.type === 'datetimerange'
		},
		hasTimeSelection() {
			return this.type === 'datetime' || this.type === 'datetimerange' || this.type === 'time'
		},
		// 性能优化：缓存解析后的最小日期
		parsedMinDate() {
			if (!this.minDate) return null
			const min = this.parseDate(this.minDate)
			min.setHours(0, 0, 0, 0)
			return min.getTime()
		},
		// 性能优化：缓存解析后的最大日期
		parsedMaxDate() {
			if (!this.maxDate) return null
			const max = this.parseDate(this.maxDate)
			max.setHours(0, 0, 0, 0)
			return max.getTime()
		},
		// 性能优化：缓存当前时间的 Date 对象
		now() {
			return this.cachedToday || this.getCurrentTime()
		},
		showDatePicker() {
			// 对于 datetime 和 datetimerange，只在第一步显示日期选择器
			if (this.type === 'datetime' || this.type === 'datetimerange') {
				return this.currentStep === 1
			}
			return this.type !== 'time'
		},
		showTimePicker() {
			// 对于 datetime 和 datetimerange，只在第二步显示时间选择器
			if (this.type === 'datetime' || this.type === 'datetimerange') {
				return this.currentStep === 2
			}
			return this.type === 'time'
		},
		// 根据 format 判断需要显示的时间部分
		showHours() {
			return this.format.includes('HH') || this.format.includes('hh') || this.format.includes('H') || this.format.includes('h')
		},
		showMinutes() {
			return this.format.includes('mm') || this.format.includes('m')
		},
		showSeconds() {
			return this.format.includes('ss') || this.format.includes('SS') || this.format.includes('s')
		},
		popupTitle() {
			// 对于 datetime 和 datetimerange，根据步骤显示不同标题
			if (this.type === 'datetime') {
				if (this.currentStep === 1) {
					return this.locale === 'zh' ? '选择日期' : 'Select Date'
				} else {
					return this.locale === 'zh' ? '选择时间' : 'Select Time'
				}
			}
			if (this.type === 'datetimerange') {
				if (this.currentStep === 1) {
					return this.locale === 'zh' ? '选择日期范围' : 'Select Date Range'
				} else {
					return this.locale === 'zh' ? '选择时间' : 'Select Time'
				}
			}
			
			const titles = {
				date: this.locale === 'zh' ? '选择日期' : 'Select Date',
				time: this.locale === 'zh' ? '选择时间' : 'Select Time',
				daterange: this.locale === 'zh' ? '选择日期范围' : 'Select Date Range'
			}
			return titles[this.type] || titles.date
		},
		weekdays() {
			const zhWeekdays = ['日', '一', '二', '三', '四', '五', '六']
			const enWeekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
			const days = this.locale === 'zh' ? zhWeekdays : enWeekdays
			
			// 根据 startOfWeek 调整顺序
			const result = []
			for (let i = 0; i < 7; i++) {
				result.push(days[(this.startOfWeek + i) % 7])
			}
			return result
		},
		years() {
			const currentYear = this.now.getFullYear()
			return Array.from({ length: 201 }, (_, i) => currentYear - 100 + i)
		},
		calendarDays() {
			const year = this.currentYear
			const month = this.currentMonth
			const firstDay = new Date(year, month - 1, 1)
			const lastDay = new Date(year, month, 0)
			const daysInMonth = lastDay.getDate()
			
			// 计算第一天是星期几（根据 startOfWeek 调整）
			let firstDayOfWeek = firstDay.getDay() - this.startOfWeek
			if (firstDayOfWeek < 0) firstDayOfWeek += 7
			
			const days = []
			
			// 上个月的日期
			const prevMonthLastDay = new Date(year, month - 1, 0).getDate()
			for (let i = firstDayOfWeek - 1; i >= 0; i--) {
				const day = prevMonthLastDay - i
				const date = new Date(year, month - 2, day)
				days.push({
					day,
					date,
					isCurrentMonth: false,
					isPrevMonth: true,
					isNextMonth: false
				})
			}
			
			// 当前月的日期
			for (let i = 1; i <= daysInMonth; i++) {
				const date = new Date(year, month - 1, i)
				days.push({
					day: i,
					date,
					isCurrentMonth: true,
					isPrevMonth: false,
					isNextMonth: false,
					weekNumber: this.showWeekNumber ? this.getWeekNumber(date) : null
				})
			}
			
			// 下个月的日期（补齐6行）
			const remainingDays = 42 - days.length
			for (let i = 1; i <= remainingDays; i++) {
				const date = new Date(year, month, i)
				days.push({
					day: i,
					date,
					isCurrentMonth: false,
					isPrevMonth: false,
					isNextMonth: true
				})
			}
			
			return days
		},
		displayValue() {
			if (this.isRangeType) {
				if (Array.isArray(this.modelValue) && this.modelValue.length === 2) {
					return `${this.formatDate(this.parseDate(this.modelValue[0]))} - ${this.formatDate(this.parseDate(this.modelValue[1]))}`
				}
				return ''
			} else {
				if (this.modelValue) {
					return this.formatDate(this.parseDate(this.modelValue))
				}
				return ''
			}
		}
	},
	watch: {
		modelValue: {
			handler(val) {
				this.initValue()
			},
			immediate: true
		},
		currentTime: {
			handler() {
				this.updateCachedToday()
			},
			immediate: true
		}
	},
	methods: {
		// 获取当前时间（支持从 prop 传入或使用客户端时间）
		getCurrentTime() {
			if (this.currentTime) {
				if (this.currentTime instanceof Date) {
					return this.currentTime
				}
				if (typeof this.currentTime === 'number') {
					return new Date(this.currentTime)
				}
				if (typeof this.currentTime === 'string') {
					return new Date(this.currentTime.replace(/-/g, '/'))
				}
			}
			return new Date()
		},
		// 性能优化：更新缓存的今天日期
		updateCachedToday() {
			const now = this.getCurrentTime()
			this.cachedToday = now
			const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
			this.todayTimestamp = today.getTime()
		},
		initValue() {
			if (this.isRangeType) {
				if (Array.isArray(this.modelValue) && this.modelValue.length === 2) {
					this.selectedStartDate = this.parseDate(this.modelValue[0])
					this.selectedEndDate = this.parseDate(this.modelValue[1])
				} else {
					this.selectedStartDate = null
					this.selectedEndDate = null
				}
			} else {
				if (this.modelValue) {
					this.selectedDate = this.parseDate(this.modelValue)
					if (this.showTimePicker) {
						this.selectedHour = this.selectedDate.getHours()
						this.selectedMinute = this.selectedDate.getMinutes()
						this.selectedSecond = this.selectedDate.getSeconds()
						this.updateTimePickerValue()
					}
				} else {
					this.selectedDate = null
				}
			}
		},
		handleTriggerClick() {
			if (this.disabled || this.readonly) return
			this.visible = true
			this.currentStep = 1 // 重置为第一步
			this.selectingStart = true
      // 派发弹窗打开事件
      this.$emit('popup-show');
			setTimeout(() => {
				this.popupShow = true
			}, 50)
			
			// 初始化年月选择器
			const yearIndex = this.years.indexOf(this.currentYear)
			this.yearMonthPickerValue = [yearIndex, this.currentMonth - 1]
		},
		handleClear() {
			this.$emit('update:modelValue', this.isRangeType ? [] : '')
			this.$emit('clear')
			this.$emit('change', this.isRangeType ? [] : '')
		},
		handleCancel() {
			this.popupShow = false
      // 派发弹窗关闭事件
      this.$emit('popup-hide');
			setTimeout(() => {
				this.visible = false
				this.currentStep = 1 // 重置步骤
			}, 300)
		},
		handleNext() {
			// 对于 datetime 类型，检查是否已选择日期
			if (this.type === 'datetime' && !this.selectedDate) {
				return
			}
			// 对于 datetimerange 类型，检查是否已选择日期范围
			if (this.type === 'datetimerange' && (!this.selectedStartDate || !this.selectedEndDate)) {
				return
			}
			// 进入第二步（选择时间）
			this.currentStep = 2
		},
		handleBack() {
			// 返回第一步（选择日期）
			this.currentStep = 1
		},
		handleConfirm() {
			let value
			
			if (this.type === 'time') {
				value = this.formatTime()
			} else if (this.isRangeType) {
				if (this.selectedStartDate && this.selectedEndDate) {
					const start = this.type === 'datetimerange' 
						? this.combineDatetime(this.selectedStartDate, this.selectedHour, this.selectedMinute, this.selectedSecond)
						: this.selectedStartDate
					const end = this.type === 'datetimerange'
						? this.combineDatetime(this.selectedEndDate, this.selectedHour, this.selectedMinute, this.selectedSecond)
						: this.selectedEndDate
					value = [this.formatDate(start), this.formatDate(end)]
				} else {
					return
				}
			} else {
				if (this.selectedDate) {
					const date = this.type === 'datetime'
						? this.combineDatetime(this.selectedDate, this.selectedHour, this.selectedMinute, this.selectedSecond)
						: this.selectedDate
					value = this.formatDate(date)
				} else {
					return
				}
			}
			
			this.$emit('update:modelValue', value)
			this.$emit('confirm', value)
			this.$emit('change', value)
			this.popupShow = false
      this.$emit('popup-hide');
			setTimeout(() => {
				this.visible = false
				this.currentStep = 1 // 重置步骤
			}, 300)
		},
		// 性能优化：防抖优化月份切换
		prevMonth() {
			// 清除之前的防抖定时器
			if (this._monthChangeTimer) {
				clearTimeout(this._monthChangeTimer)
			}
			this._monthChangeTimer = setTimeout(() => {
				if (this.currentMonth === 1) {
					this.currentYear--
					this.currentMonth = 12
				} else {
					this.currentMonth--
				}
			}, 50)
		},
		nextMonth() {
			// 清除之前的防抖定时器
			if (this._monthChangeTimer) {
				clearTimeout(this._monthChangeTimer)
			}
			this._monthChangeTimer = setTimeout(() => {
				if (this.currentMonth === 12) {
					this.currentYear++
					this.currentMonth = 1
				} else {
					this.currentMonth++
				}
			}, 50)
		},
		handleYearMonthChange(e) {
			this.yearMonthPickerValue = e.detail.value
		},
		confirmYearMonth() {
			this.currentYear = this.years[this.yearMonthPickerValue[0]]
			this.currentMonth = this.yearMonthPickerValue[1] + 1
			this.showYearMonthPicker = false
		},
		handleDayClick(day) {
			if (!day.isCurrentMonth) {
				// 点击上个月或下个月的日期，切换月份
				if (day.isPrevMonth) {
					this.prevMonth()
				} else if (day.isNextMonth) {
					this.nextMonth()
				}
				return
			}
			
			if (this.isDateDisabled(day.date)) {
				return
			}
			
			if (this.isRangeType) {
				if (this.selectingStart) {
					this.selectedStartDate = day.date
					this.selectedEndDate = null
					this.selectingStart = false
				} else {
					if (day.date < this.selectedStartDate) {
						this.selectedEndDate = this.selectedStartDate
						this.selectedStartDate = day.date
					} else {
						this.selectedEndDate = day.date
					}
					this.selectingStart = true
				}
			} else {
				this.selectedDate = day.date
				if (this.showTimePicker) {
					// 保持当前选择的时间
				}
			}
		},
		handleTimeChange(e) {
			this.timePickerValue = e.detail.value
			let columnIndex = 0
			
			// 根据显示的列动态获取值
			if (this.showHours) {
				this.selectedHour = this.hours[this.timePickerValue[columnIndex]]
				columnIndex++
			}
			if (this.showMinutes) {
				this.selectedMinute = this.minutes[this.timePickerValue[columnIndex]]
				columnIndex++
			}
			if (this.showSeconds) {
				this.selectedSecond = this.seconds[this.timePickerValue[columnIndex]]
			}
		},
		updateTimePickerValue() {
			const values = []
			
			// 根据显示的列动态构建值数组
			if (this.showHours) {
				values.push(this.hours.indexOf(this.selectedHour))
			}
			if (this.showMinutes) {
				values.push(this.minutes.indexOf(this.selectedMinute))
			}
			if (this.showSeconds) {
				values.push(this.seconds.indexOf(this.selectedSecond))
			}
			
			this.timePickerValue = values
		},
		handleShortcut(shortcut) {
			const value = this.getShortcutValue(shortcut.value)
			if (value) {
				this.selectedStartDate = this.parseDate(value[0])
				this.selectedEndDate = this.parseDate(value[1])
			}
		},
		getShortcutValue(value) {
			if (typeof value === 'function') {
				return value()
			}
			
			// 性能优化：使用缓存的当前时间
			const now = this.now
			const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
			
			switch (value) {
				case 'today':
					return [today, today]
				case 'yesterday':
					const yesterday = new Date(today)
					yesterday.setDate(yesterday.getDate() - 1)
					return [yesterday, yesterday]
				case 'last7days':
					const last7days = new Date(today)
					last7days.setDate(last7days.getDate() - 6)
					return [last7days, today]
				case 'last30days':
					const last30days = new Date(today)
					last30days.setDate(last30days.getDate() - 29)
					return [last30days, today]
				case 'thisweek':
					const thisWeekStart = new Date(today)
					const day = today.getDay()
					const diff = day - this.startOfWeek
					thisWeekStart.setDate(today.getDate() - (diff < 0 ? diff + 7 : diff))
					return [thisWeekStart, today]
				case 'thismonth':
					const thisMonthStart = new Date(today.getFullYear(), today.getMonth(), 1)
					return [thisMonthStart, today]
				default:
					return null
			}
		},
		getDayClass(day) {
			const classes = []
			
			if (!day.isCurrentMonth) {
				classes.push('other-month')
			}
			
			if (this.isDateDisabled(day.date)) {
				classes.push('disabled')
			}
			
			if (this.isToday(day.date)) {
				classes.push('today')
			}
			
			if (this.isRangeType) {
				if (this.isDateSelected(day.date, this.selectedStartDate) || 
				    this.isDateSelected(day.date, this.selectedEndDate)) {
					classes.push('selected')
				}
				if (this.isDateInRange(day.date)) {
					classes.push('in-range')
				}
			} else {
				if (this.isDateSelected(day.date, this.selectedDate)) {
					classes.push('selected')
				}
			}
			
			return classes.join(' ')
		},
		isToday(date) {
			// 性能优化：使用缓存的时间戳比较
			const dateTimestamp = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime()
			return dateTimestamp === this.todayTimestamp
		},
		isDateSelected(date, selectedDate) {
			if (!selectedDate) return false
			return date.getFullYear() === selectedDate.getFullYear() &&
			       date.getMonth() === selectedDate.getMonth() &&
			       date.getDate() === selectedDate.getDate()
		},
		isDateInRange(date) {
			if (!this.selectedStartDate || !this.selectedEndDate) return false
			return date > this.selectedStartDate && date < this.selectedEndDate
		},
		isDateDisabled(date) {
			// 自定义禁用函数
			if (this.disabledDate && this.disabledDate(date)) {
				return true
			}
			
			// 性能优化：使用缓存的时间戳比较
			const timestamp = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime()
			
			// 最小日期
			if (this.parsedMinDate && timestamp < this.parsedMinDate) {
				return true
			}
			
			// 最大日期
			if (this.parsedMaxDate && timestamp > this.parsedMaxDate) {
				return true
			}
			
			return false
		},
		getWeekNumber(date) {
			const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
			const dayNum = d.getUTCDay() || 7
			d.setUTCDate(d.getUTCDate() + 4 - dayNum)
			const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1))
			return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
		},
		parseDate(value) {
			if (value instanceof Date) {
				return new Date(value)
			}
			if (typeof value === 'string') {
				// 支持多种格式
				return new Date(value.replace(/-/g, '/'))
			}
			return new Date()
		},
		formatDate(date) {
			if (!date) return ''
			
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			const hours = String(date.getHours()).padStart(2, '0')
			const minutes = String(date.getMinutes()).padStart(2, '0')
			const seconds = String(date.getSeconds()).padStart(2, '0')
			
			return this.format
				.replace(/YYYY/g, year)
				.replace(/MM/g, month)
				.replace(/DD/g, day)
				.replace(/HH/g, hours)
				.replace(/mm/g, minutes)
				.replace(/ss/g, seconds)
		},
		formatTime() {
			const parts = []
			
			if (this.showHours) {
				parts.push(String(this.selectedHour).padStart(2, '0'))
			}
			if (this.showMinutes) {
				parts.push(String(this.selectedMinute).padStart(2, '0'))
			}
			if (this.showSeconds) {
				parts.push(String(this.selectedSecond).padStart(2, '0'))
			}
			
			return parts.join(':')
		},
		combineDatetime(date, hour, minute, second) {
			const newDate = new Date(date)
			newDate.setHours(hour, minute, second, 0)
			return newDate
		}
	},
	// 性能优化：组件销毁时清理定时器
	beforeDestroy() {
		if (this._monthChangeTimer) {
			clearTimeout(this._monthChangeTimer)
		}
	},
	// Vue 3 兼容
	beforeUnmount() {
		if (this._monthChangeTimer) {
			clearTimeout(this._monthChangeTimer)
		}
	}
}
</script>

<style scoped>
.neo-datetime-pro {
	width: 100%;
}

/* 触发器 */
.trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4rpx 32rpx;
	background: var(--neo-color-bg-elevated, #fff);
	border: 2rpx solid var(--neo-color-border, rgba(0, 0, 0, 0.08));
	border-radius: 12rpx;
	min-height: 44rpx;
	box-sizing: border-box;
	transition: all 0.3s;
	cursor: pointer;
	user-select: none;
}

.trigger:active:not(.disabled):not(.readonly) {
	opacity: 0.8;
}

.trigger.disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.trigger.readonly {
	background: var(--neo-color-bg-base, #f5f7fa);
	cursor: default;
}

.trigger-value {
	font-size: 28rpx;

}

.trigger-placeholder {
	font-size: 28rpx;
	color: var(--neo-color-text-tertiary, #94a3b8);
}

.trigger-clear {
	font-size: 40rpx;
	color: var(--neo-color-text-tertiary, #94a3b8);
	padding: 0 8rpx;
}

/* 弹出层 */
.popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	display: flex;
	align-items: flex-end;
}

.popup-content {
	width: 100%;
	max-height: 80vh;
	background: var(--neo-color-bg-elevated, #fff);
	border-radius: 24rpx 24rpx 0 0;
	transform: translateY(100%);
	transition: transform 0.3s;
}

.popup-content.show {
	transform: translateY(0);
}

.popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx;
	border-bottom: 2rpx solid var(--neo-color-border, rgba(0, 0, 0, 0.08));
}

.popup-title {
	font-size: 32rpx;
	font-weight: 600;
	color: var(--neo-color-text-primary, #1e293b);
}

.popup-close {
	font-size: 48rpx;
	color: var(--neo-color-text-tertiary, #94a3b8);
	padding: 0 8rpx;
}

.popup-body {
	max-height: 60vh;
	overflow-y: auto;
	padding: 24rpx;
}

/* 快捷选项 */
.shortcuts {
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx;
	padding: 24rpx;
	border-bottom: 2rpx solid var(--neo-color-border, rgba(0, 0, 0, 0.08));
}

.shortcut-item {
	padding: 12rpx 24rpx;
	background: var(--neo-color-bg-base, #f5f7fa);
	border-radius: 8rpx;
	font-size: 24rpx;
	color: var(--neo-color-text-secondary, #64748b);
	transition: all 0.2s;
}

.shortcut-item:active {
	background: var(--neo-color-primary, #3b82f6);
	color: #fff;
}

/* 日历 */
.date-picker {
	margin-bottom: 24rpx;
}

.calendar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx 0;
}

.calendar-nav {
	font-size: 36rpx;
	color: var(--neo-color-text-primary, #1e293b);
	padding: 8rpx 24rpx;
	cursor: pointer;
}

.calendar-title {
	font-size: 28rpx;
	font-weight: 600;
	color: var(--neo-color-text-primary, #1e293b);
	padding: 8rpx 16rpx;
}

.calendar-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8rpx;
	margin-bottom: 16rpx;
}

.weekday {
	text-align: center;
	font-size: 24rpx;
	color: var(--neo-color-text-tertiary, #94a3b8);
	padding: 8rpx 0;
}

.calendar-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8rpx;
}

.day-cell {
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 8rpx;
	cursor: pointer;
	position: relative;
	transition: all 0.2s;
}

.day-text {
	font-size: 28rpx;
	color: var(--neo-color-text-primary, #1e293b);
}

.week-number {
	font-size: 20rpx;
	color: var(--neo-color-text-tertiary, #94a3b8);
	position: absolute;
	top: 4rpx;
	right: 4rpx;
}

.day-cell.other-month .day-text {
	color: var(--neo-color-text-tertiary, #94a3b8);
}

.day-cell.today {
	background: var(--neo-color-bg-hover, #f8f9fa);
}

.day-cell.selected {
	background: var(--neo-color-primary, #3b82f6);
}

.day-cell.selected .day-text {
	color: #fff;
}

.day-cell.in-range {
	background: rgba(59, 130, 246, 0.1);
}

.day-cell.disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.day-cell.disabled:active {
	transform: none;
}

.day-cell:active:not(.disabled) {
	transform: scale(0.95);
}

/* 时间选择器 */
.time-picker {
	margin-top: 24rpx;
}

.time-picker-header {
	display: flex;
	padding: 16rpx 0;
	border-bottom: 2rpx solid var(--neo-color-border, rgba(0, 0, 0, 0.08));
}

.time-picker-header.single-column {
	padding-left: 30%;
	padding-right: 30%;
}

.time-picker-header.double-column {
	padding-left: 15%;
	padding-right: 15%;
}

.time-label {
	font-size: 26rpx;
	font-weight: 600;
	color: var(--neo-color-text-secondary, #64748b);
	flex: 1;
	text-align: center;
}

.time-picker-view {
	height: 400rpx;
}

.time-picker-view.single-column {
	/* 只显示一列时居中 */
	padding: 0 30%;
}

.time-picker-view.double-column {
	/* 显示两列时 */
	padding: 0 15%;
}

.time-item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;
	font-size: 32rpx;
	color: var(--neo-color-text-primary, #1e293b);
}

/* 年月选择器 */
.year-month-picker-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10000;
	display: flex;
	align-items: flex-end;
}

.year-month-picker-content {
	width: 100%;
	background: var(--neo-color-bg-elevated, #fff);
	border-radius: 24rpx 24rpx 0 0;
}

.year-month-picker-view {
	height: 500rpx;
	padding: 24rpx 0;
}

.ym-item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;
	font-size: 32rpx;
	color: var(--neo-color-text-primary, #1e293b);
}

.year-month-picker-footer {
	display: flex;
	gap: 24rpx;
	padding: 24rpx;
	border-top: 2rpx solid var(--neo-color-border, rgba(0, 0, 0, 0.08));
}

/* 底部按钮 */
.popup-footer {
	display: flex;
	gap: 24rpx;
	padding: 24rpx;
	border-top: 2rpx solid var(--neo-color-border, rgba(0, 0, 0, 0.08));
}

.footer-btn {
	flex: 1;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12rpx;
	font-size: 28rpx;
	font-weight: 600;
	transition: all 0.2s;
}

.footer-btn-cancel,
.footer-btn-back {
	background: var(--neo-color-bg-base, #f5f7fa);
	color: var(--neo-color-text-secondary, #64748b);
}

.footer-btn-confirm {
	background: var(--neo-color-primary, #3b82f6);
	color: #fff;
}

.footer-btn:active {
	opacity: 0.8;
	transform: scale(0.98);
}
</style>