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

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

<script>
	import {
		formatDate,
		getDateAfterDays,
		getDateAfterMonths
	} from '@/utils/dateTime';
	export default {
		props: {
			modelValue: {
				type: Array,
				default: () => [null, null]
			},
			// 日期选择模式
			mode: {
				type: String,
				default: 'single'
			},
			//日期可选范围
			startDate: {
				type: String,
				default: ''
			},
			//日期可选范围
			endDate: {
				type: String,
				default: ''
			},
			isSearch: {
				type: Boolean,
				default: true
			}
		},

		data() {
			return {
				dateRange: null
			};
		},

		watch: {
			modelValue: {
				immediate: true,
				handler(newVal) {
					let dateType = Object.prototype.toString.call(newVal);
					if (this.mode == 'single' && dateType != '[object String]') {
						return console.error(`类型错误，mode=${this.mode}时，date=String`);
					} else if (this.mode != 'single' && dateType != '[object Array]') {
						return console.error(`类型错误，mode=${this.mode}时，date=Array`);
					}
					if (this.mode == 'single') {
						this.dateRange = ''
						this.dateRange = newVal;
					}
					// 根据类型默认选中不同的值
					if (this.mode == 'multiple') {
						this.dateRange = []
						this.dateRange = newVal;
					} else if (this.mode == 'range') {
						if (newVal[1] == 'NaN-NaN-NaN') newVal[1] = newVal[0]
						this.dateRange = []
						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;
		min-width: 90px;
		max-width: 120px;
		white-space: nowrap;
	}

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