<template>
	<view>
		<view class="Search">
			<view class="Search-l" style="margin-right: 13.5rpx;" @click="openCalendar">
				<input type="text" :value="value.date" disabled placeholder="选择开始时间" class="Search-input" placeholder-style="color: #505050;">
				<u-icon name="arrow-down-fill" size="10"></u-icon>
			</view>
			
			<view class="Search-r">
				<input type="text" @input="inputChage" :value="value.keyword" placeholder="请输入姓名" class="Search-input" placeholder-style="color: #505050;">
				<u-icon name="search" size="30" color="#659ff5"></u-icon>
			</view>
		</view>
		<u-calendar 
			:defaultDate="[]"
			@close="show = false"
			:monthNum="monthNum"
			:minDate="minDate"
			:maxCount="2"
			:show="show" 
			mode="multiple"
			@confirm="confirm">
		</u-calendar>
	</view>
</template>

<script>
	export default {
		model: {
			prop: 'value',
			event: 'change'
		},
		props: {
			value: {
				type: [Object],
				default: () => {
					return {}
				}
			}
		},
		computed: {
			
		},
		data() {
			const monthNum = 12;
			const targetDate = new Date();
			targetDate.setMonth(targetDate.getMonth() - (monthNum - 1));
			
			// 根据年月日拼接字符串
			const yyyy = targetDate.getFullYear();
			const mm = (targetDate.getMonth() + 1).toString().padStart(2, '0');
			const dd = targetDate.getDate().toString().padStart(2, '0');
			const dateString = `${yyyy}-${mm}-${dd}`;
			return {
				show: false,
				minDate: dateString,
				monthNum
			};
		},
		methods: {
			openCalendar() {
				this.show = true
			},
			inputChage(e) {
				this.$emit('change', {...this.value, keyword: e.detail.value})
			},
			confirm(e) {
				console.log(e)
				let timeStamp_s = ''
				let timeStamp_e = ''
				if(!e.length) {
					uni.showToast({
						icon: 'none',
						title: '请选择时间'
					})
					return
				}
				if(e.length === 2) {
					timeStamp_s = new Date(e[0]).valueOf() >  new Date(e[1]).valueOf() ? e[1] : e[0]
					timeStamp_e = new Date(e[0]).valueOf() >  new Date(e[1]).valueOf() ? e[0] : e[1]
				} else if (e.length === 1){
					timeStamp_s = e[0]
					timeStamp_e = e[0]
				}
				
				const first = timeStamp_s; 
				const last = timeStamp_e;
				this.show = false
				this.$emit('change', {...this.value, date: first + ' ~ ' + last})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Search{
		display: flex;
		.Search-input{
			color: #505050;
			font-size: 28rpx;
		}
		.Search-l{
			border-radius: 15rpx;
			background-color: #fff;
			flex-shrink: 0;
			height: 76rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			width: 254rpx;
		}
		.Search-r{
			flex-grow: 1;
			margin-left: 27rpx;
			height: 76rpx;
			border-radius: 15rpx;
			background-color: #fff;
			align-items: center;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
		}
	}
</style>