<template>
	<view>
		<view class="u-flex date-filter-box " @click="show">
			<view>
				<text class="color-999" v-if="!startDate">开始日期</text>
				<text class="" v-else>
					{{ showDate(startDate)}}
				</text>
			</view>
			<text>至</text>
			<view>
				<text class="color-999" v-if="!endDate">结束日期</text>
				<text class="" v-else>
					{{ showDate(endDate)}}
				</text>
			</view>
		</view>
		<my-date-pickerview mode="date" @confirm="datePickerConfirm" ref="datePicker"
			style="z-index: 999"></my-date-pickerview>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import dayjs from 'dayjs';

	const startDate = defineModel('start')
	const endDate = defineModel('end')

	const datePicker = ref(null)

	function show() {
		datePicker.value.open()
	}

	function datePickerConfirm(e) {
		console.log(e);
		startDate.value = e.start
		endDate.value = e.end
	}
	function showDate(str){
		if(str){
			return str.split(' ')[0]
		}
		return ''
	}
</script>

<style lang="scss">
	.date-filter-box {
		border: 1px solid #eee;
		padding: 10rpx 32rpx;
		justify-content: space-between;
		border-radius: 12rpx;
	}
</style>