<template>
	<view>
		<view class="mt-32 flex-between-center">
			<view @click="onOpenStartTime" class="select-time">
				<text v-if="!startTimeValue">选择开始时间</text>
				<text v-else>{{ startTimeValue }}</text>
			</view>
			<text class="fs-30" style="color: #999999;">-</text>
			<view @click="onOpenEndTime" class="select-time">
				<text v-if="!endTimeValue">选择结束时间</text>
				<text v-else>{{ endTimeValue }}</text>
			</view>
		</view>

		<!-- 选择开始时间 -->
		<u-datetime-picker :show="startTimeShow" v-model="startTime" title="开始时间" mode="datetime" :formatter="formatter"
			:closeOnClickOverlay="true" @confirm="onConfirmStartTime"
			@close="startTimeShow = false"></u-datetime-picker>
		<!-- 选择结束时间 -->
		<u-datetime-picker :show="endTimeShow" v-model="endTime" title="结束时间" mode="datetime" :formatter="formatter"
			:closeOnClickOverlay="true" @confirm="onConfirmEndTime" @close="endTimeShow = false"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startTimeShow: false,
				startTimeValue: '',
				startTime: new Date().getTime(),
				endTimeShow: false,
				endTime: new Date().getTime(),
				endTimeValue: ''
			}
		},
		methods: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}点`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
			onOpenStartTime() {
				this.startTimeShow = true
			},
			onOpenEndTime() {
				this.endTimeShow = true
			},
			onConfirmStartTime(e) {
				// console.log(e)
				this.startTimeShow = false
				this.startTimeValue = this.$wskj.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
				this.$emit('onConfirmStartTime', this.startTimeValue)
			},
			onConfirmEndTime(e) {
				this.endTimeShow = false
				this.endTimeValue = this.$wskj.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
				this.$emit('onConfirmEndTime', this.endTimeValue)
			},
		}
	}
</script>

<style scoped>
	.select-time {
		width: 322rpx;
		height: 84rpx;
		text-align: center;
		line-height: 84rpx;
		background: #f7f7f7;
		border-radius: 5px;
		font-size: 30rpx;
		color: #999999;
	}
</style>