<template>
	<picker v-if="!readonly" mode="time" :value="_value" @change="timeChange">
		<click-input :value="_value" :placeholder="props.formProps.placeholder || '请选择时间'" pre-icon="calendar"></click-input>
	</picker>
	<text class="w-form-input-rv" v-else>{{_value}}</text>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import ClickInput from '@/components/ClickInput.vue'

	const props = defineProps({
		formProps: {
			type: Object,
			default: () => {
				return {}
			}
		},
		modelValue: String,
		readonly: Boolean
	})

	const _value = computed({
		get() {
			return props.modelValue
		},
		set(val) {
			emits('update:modelValue', val)
		}
	})

	const emits = defineEmits(['update:modelValue'])
	
	function timeChange(e) {
		_value.value = e.detail.value
	}
</script>

<style>
</style>