<template>
	<view>
		<uni-popup ref="popup" type="bottom" :is-mask-click="true" @change="handlePopupChange">
			<view class="filter-popup">
				<!-- 标题栏 -->
				<view class="filter-header">
					<text class="filter-title">筛选</text>
					<text class="filter-cancel" @click="handleCancel">取消</text>
				</view>
				
				<!-- 日期范围输入 -->
				<view class="date-range-section">
					<view 
						class="date-input" 
						:class="{ 'active': activeDateType === 'start' }"
						@click="selectDateType('start')"
					>
						<text class="date-label">起始日期</text>
						<text class="date-value" :class="{ 'placeholder': !startDate }">
							{{ startDate || '-年-月-日' }}
						</text>
						<view class="date-underline"></view>
					</view>
					<view 
						class="date-input" 
						:class="{ 'active': activeDateType === 'end' }"
						@click="selectDateType('end')"
					>
						<text class="date-label">截止日期</text>
						<text class="date-value" :class="{ 'placeholder': !endDate }">
							{{ endDate || '-年-月-日' }}
						</text>
						<view class="date-underline"></view>
					</view>
				</view>
				
				<!-- 日期选择器 -->
				<view class="date-picker-section">
					<view class="picker-wrapper">
						<picker-view 
							class="date-picker-view" 
							:value="pickerValue" 
							@change="handlePickerChange"
							:indicator-style="indicatorStyle"
						>
							<picker-view-column>
								<view class="picker-item" v-for="(year, index) in years" :key="index">
									<text>{{ year }}年</text>
								</view>
							</picker-view-column>
							<picker-view-column>
								<view class="picker-item" v-for="(month, index) in months" :key="index">
									<text>{{ month }}月</text>
								</view>
							</picker-view-column>
							<picker-view-column>
								<view class="picker-item" v-for="(day, index) in days" :key="index">
									<text>{{ day }}日</text>
								</view>
							</picker-view-column>
						</picker-view>
						<!-- 选中行指示器 -->
						<view class="picker-indicator"></view>
					</view>
				</view>
				
				<!-- 底部按钮 -->
				<view class="filter-footer">
					<view class="btn-reset" @click="handleReset">重置</view>
					<view class="btn-confirm" @click="handleConfirm">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	name: 'OrderNyaringProp',
	data() {
		const currentDate = new Date()
		const currentYear = currentDate.getFullYear()
		const currentMonth = currentDate.getMonth() + 1
		const currentDay = currentDate.getDate()
		
		return {
			activeDateType: 'start', // 'start' | 'end'
			startDate: '',
			endDate: '',
			// 日期选择器的值 [年索引, 月索引, 日索引]
			pickerValue: [0, 0, 0],
			// 年份列表
			years: [],
			// 月份列表
			months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
			// 日期列表（动态生成）
			days: [],
			// 当前选中的日期
			selectedYear: currentYear,
			selectedMonth: currentMonth,
			selectedDay: currentDay,
			// 选择器指示器样式
			indicatorStyle: `height: 50px; line-height: 50px;`,
			show:false
		}
	},
	mounted() {
		this.initYears()
		this.initDays()
		this.initPickerValue()
	},
	methods: {
		/**
		 * 初始化年份列表（2022-2025）
		 */
		initYears() {
			const years = []
			for (let i = 2022; i <= 2025; i++) {
				years.push(i)
			}
			this.years = years
		},
		
		/**
		 * 初始化日期列表
		 */
		initDays() {
			const days = []
			const daysInMonth = this.getDaysInMonth(this.selectedYear, this.selectedMonth)
			for (let i = 1; i <= daysInMonth; i++) {
				days.push(i)
			}
			this.days = days
		},
		open(){
			
		},
		/**
		 * 获取某年某月的天数
		 */
		getDaysInMonth(year, month) {
			return new Date(year, month, 0).getDate()
		},
		
		/**
		 * 初始化选择器值
		 */
		initPickerValue() {
			const currentDate = new Date()
			const currentYear = currentDate.getFullYear()
			const currentMonth = currentDate.getMonth() + 1
			const currentDay = currentDate.getDate()
			
			// 如果已有选中的日期，使用选中的日期；否则使用当前日期
			let year = currentYear
			let month = currentMonth
			let day = currentDay
			
			if (this.activeDateType === 'start' && this.startDate) {
				const date = this.parseDate(this.startDate)
				if (date) {
					year = date.year
					month = date.month
					day = date.day
				}
			} else if (this.activeDateType === 'end' && this.endDate) {
				const date = this.parseDate(this.endDate)
				if (date) {
					year = date.year
					month = date.month
					day = date.day
				}
			}
			
			this.selectedYear = year
			this.selectedMonth = month
			this.selectedDay = day
			
			// 先更新日期列表
			this.updateDays()
			
			// 更新选择器索引
			const yearIndex = this.years.indexOf(year)
			const monthIndex = this.months.indexOf(month)
			const dayIndex = this.days.indexOf(day)
			
			this.pickerValue = [
				yearIndex >= 0 ? yearIndex : 0,
				monthIndex >= 0 ? monthIndex : 0,
				dayIndex >= 0 ? dayIndex : 0
			]
		},
		
		/**
		 * 选择日期类型（起始日期或截止日期）
		 */
		selectDateType(type) {
			if (this.activeDateType === type) return
			this.activeDateType = type
			// 延迟初始化，确保DOM更新
			this.$nextTick(() => {
				this.initPickerValue()
			})
		},
		
		/**
		 * 处理选择器变化
		 */
		handlePickerChange(e) {
			const [yearIndex, monthIndex, dayIndex] = e.detail.value
			
			this.selectedYear = this.years[yearIndex]
			this.selectedMonth = this.months[monthIndex]
			
			// 更新日期列表
			this.updateDays()
			
			// 确保选中的日期不超过当月最大天数
			const maxDay = this.days.length
			const newDayIndex = Math.min(dayIndex, maxDay - 1)
			this.selectedDay = this.days[newDayIndex]
			
			// 更新选择器值
			this.pickerValue = [yearIndex, monthIndex, newDayIndex]
			
			// 更新当前选中的日期显示
			this.updateSelectedDate()
		},
		
		/**
		 * 更新日期列表
		 */
		updateDays() {
			const daysInMonth = this.getDaysInMonth(this.selectedYear, this.selectedMonth)
			const days = []
			for (let i = 1; i <= daysInMonth; i++) {
				days.push(i)
			}
			this.days = days
			
			// 如果当前选中的日期超过新月份的最大天数，调整为最大天数
			if (this.selectedDay > daysInMonth) {
				this.selectedDay = daysInMonth
				const dayIndex = this.days.indexOf(this.selectedDay)
				this.pickerValue[2] = dayIndex >= 0 ? dayIndex : 0
			}
		},
		
		/**
		 * 更新选中的日期显示
		 */
		updateSelectedDate() {
			const dateStr = `${this.selectedYear}年${this.selectedMonth}月${this.selectedDay}号`
			if (this.activeDateType === 'start') {
				this.startDate = dateStr
			} else {
				this.endDate = dateStr
			}
		},
		
		/**
		 * 解析日期字符串
		 */
		parseDate(dateStr) {
			// 格式：2024年10月9号
			const match = dateStr.match(/(\d{4})年(\d{1,2})月(\d{1,2})号/)
			if (match) {
				return {
					year: parseInt(match[1]),
					month: parseInt(match[2]),
					day: parseInt(match[3])
				}
			}
			return null
		},
		
		/**
		 * 处理弹窗状态变化
		 */
		handlePopupChange(e) {
			if (e.show) {
				// 弹窗打开时，初始化选择器
				this.initPickerValue()
			}
		},
		
		/**
		 * 打开弹窗
		 */
		open() {
			this.$refs.popup.open()
		},
		
		/**
		 * 关闭弹窗
		 */
		close() {
			this.$refs.popup.close()
		},
		handleCancel() {
			this.close()
		},
		
		/**
		 * 重置
		 */
		handleReset() {
			this.startDate = ''
			this.endDate = ''
			this.activeDateType = 'start'
			this.initPickerValue()
		},
		
		/**
		 * 确定
		 */
		handleConfirm() {
			if(this.startDate && this.endDate){
				this.$emit('confirmOrder', {
					startDate: this.startDate,
					endDate: this.endDate
				})
				this.close()
			}else{
				uni.showToast({
					title:'请输入完整格式',
					icon:'none'
				})
			}
			
		}
	}
}
</script>

<style scoped>
.filter-popup {
	background-color: #FFFFFF;
	border-radius: 24rpx 24rpx 0 0;
	box-shadow: 0 -10rpx 40rpx rgba(0, 0, 0, 0.06);
	padding-bottom: env(safe-area-inset-bottom);
	min-height: 60vh;
	display: flex;
	flex-direction: column;
}

/* 标题栏 */
.filter-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx 36rpx 24rpx;
	border-bottom: 1px solid #F2F2F2;
}

.filter-title {
	font-size: 34rpx;
	font-weight: 600;
	color: #323232;
	flex: 1;
	text-align: center;
}

.filter-cancel {
	font-size: 28rpx;
	color: #C0C0C0;
	padding: 8rpx 16rpx;
}

/* 日期范围输入 */
.date-range-section {
	display: flex;
	justify-content: space-around;
	padding: 16px 26px 8px;
	/* gap: 49px; */
	border-bottom: 1px solid #F2F2F2;
}

.date-input {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 6px 0 13px;
	align-items: center;
	position: relative;
	justify-content: center;
}

.date-label {
	font-size: 26rpx;
	color: #999999;
}

.date-value {
	font-size: 30rpx;
	color: #3475E7;
	line-height: 38rpx;
}

.date-value.placeholder {
	color: #999999;
}

.date-input.active .date-value {
	color: #3475E7;
	font-weight: 500;
}

.date-underline {
	position: absolute;
	bottom: 0;
	width: 57rpx;
	height: 8rpx;
	background-color: transparent;
	border-radius: 4rpx;
	transition: background-color 0.2s;
}

.date-input.active .date-underline {
	background-color: #3475E7;
}

/* 日期选择器 */
.date-picker-section {
	flex: 1;
	padding: 8rpx 40rpx 0;
	position: relative;
	min-height: 400rpx;
}

.picker-wrapper {
	position: relative;
	height: 420rpx;
	width: 100%;
}

.date-picker-view {
	height: 100%;
	width: 100%;
	position: relative;
	z-index: 2;
}

.picker-item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	font-size: 30rpx;
	color: #323232;
}

/* 选中行指示器 - 模拟选中效果 */
.picker-indicator {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 50px;
	transform: translateY(-50%);
	background-color: rgba(52, 117, 231, 0.14);
	pointer-events: none;
	border-radius: 24rpx;
	z-index: 1;
}

/* 选中项的样式 */
.date-picker-section ::v-deep .uni-picker-view-column-item-selected {
	color: #3475E7 !important;
	font-weight: 500;
}

/* 底部按钮 */
.filter-footer {
	display: flex;
	padding: 30rpx 36rpx 40rpx;
	gap: 24rpx;
	border-top: 1px solid #F5F5F5;
}

.btn-reset,
.btn-confirm {
	flex: 1;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 15rpx;
	font-size: 32rpx;
	font-weight: 500;
}

.btn-reset {
	background-color: #FFFFFF;
	border: 2rpx solid #3475E7;
	color: #3475E7;
	box-shadow: 0 6rpx 18rpx rgba(52, 117, 231, 0.08);
}

.btn-confirm {
	background: linear-gradient(90deg, #2E6CFB 0%, #3E82FF 100%);
	color: #FFFFFF;
	box-shadow: 0 8rpx 24rpx rgba(62, 130, 255, 0.35);
}
</style>