<template>
	<view>
		<view class="flex items-center justify-between px-50rpx pt-20rpx pb-40rpx">
			<view
				class="flex justify-center items-center w-150rpx h-64rpx rounded-36rpx bg-primary text-white"
			>
				全部
			</view>
			<view
				@click="datetimeShow = true"
				class="flex justify-center items-center w-250rpx h-64rpx rounded-36rpx bg-#f2f2f2 text-#000"
			>
				{{ $u.timeFormat(datetime, 'yyyy-mm') }}
			</view>
		</view>

		<view class="px-34rpx">
			<view
				class="flex justify-between pb-20rpx border-b-#E5E5E5 border-b-1px mb-20rpx"
				v-for="i in 10"
				:key="i"
			>
				<view class="flex flex-col text-28rpx">
					<text class="">陪诊sour</text>
					<text class="text-24rpx text-#999">2023年3月1日</text>
				</view>
				<view class="text-#FF3939">+100</view>
				<!-- <u-text
					text="+100"
					mode="price"
					margin="0 5px 0 0"
					type="tips"
					color="#FF3939"
				></u-text> -->
			</view>
		</view>

		<u-datetime-picker
			:show="datetimeShow"
			v-model="datetime"
			@confirm="handleDatePickerConfirm"
			@cancel="datetimeShow = false"
			:minDate="new Date('2023-01-01').getTime()"
			:maxDate="new Date('2030-12-31').getTime()"
			mode="year-month"
			confirmColor="#FF8CA6"
			@close="datetimeShow = false"
			closeOnClickOverlay
		></u-datetime-picker>
	</view>
</template>

<script setup>
const instance = getCurrentInstance()
const { $u } = instance.proxy
const datetimeShow = ref(false)
const datetime = ref(new Date().getTime())
const handleDatePickerConfirm = ({ value }) => {
	datetime.value = $u.timeFormat(value, 'yyyy-mm')
	datetimeShow.value = false
}
</script>

<style lang="scss" scoped>
page {
	background-color: #fff;
}
</style>
