<template>
	<view class="w-form-timePicker" v-if="!readonly" hover-class="w-click-hover">
		<time-range-picker class="w-form-input" ref="timePickers" startDefaultTime="00:00" endDefaultTime="23:59"
			@timeRange="timeRange"></time-range-picker>
		<click-input style="width: 100%;" split=" ~ " :value="_value" :disabled="readonly" @click="showTimePicker"
			placeholder="请选择时间范围" pre-icon="calendar"></click-input>
	</view>
	<text class="w-form-input-rv" v-else-if="_value.length > 0">{{_value[0]}} ~ {{_value[1]}}</text>
</template>

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

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

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

	const emits = defineEmits(['update:modelValue'])

	const timePickers = ref()

	function showTimePicker() {
		if (!props.readonly) {
			timePickers.value.open()
		}
	}

	function timeRange(e) {
		_value.value = e
	}
</script>
<style lang="less" scoped>
	.w-form-timePicker {
		display: flex;
		align-items: center;
	}
</style>