<template>
	<view>
		<view class="item" hover-class="w-hover-before" @click="show=true;">
			<view class="item-title"><text v-if="require" style="color:var(--w-error)">*</text>{{props.label}}</view>
			<view class="item-body">{{props.modelValue?value.toDate().format(props.format):'请选择'}}</view>
			<view class="item-right">
				<u-icon name="arrow-right" size=".6rem" color="var(--w-text-light)"></u-icon>
			</view>
		</view>
		<u-datetime-picker
			:show="show"
			v-model="value"
			:mode="props.mode"
			@change="dateChange"
			:showToolbar="false"
			:closeOnClickOverlay="true"
			@close="show=false;"
		></u-datetime-picker>
	</view>
</template>

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

const props = defineProps({
	modelValue:{
		type:String,
		default:""
	},
	format:{
		type:String,
		default:"yyyy-MM-dd HH:mm"
	},
	label:{
		type:String,
		default:"label"
	},
	mode:{
		type:String,
		default:"datetime"
	},
	require:{
		type:Boolean,
		default:false
	}
});

const emit = defineEmits(['update:modelValue','change']);

const show = ref(false);
const value = ref(props.modelValue?props.modelValue.toDate(props.format).getTime():Date.now());


const dateChange = (event)=>{
	value.value=event.value;
	emit('update:modelValue', event.value.toDate().format(props.format));
	emit('change');
}
</script>
