<template>
    <el-date-picker
        v-model="dateTime"
        clearable
        type="daterange"
        class="flex1"
        value-format="YYYY-MM-DD"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        @change="changeDate"
    />
</template>

<script setup name="DateRange" lang="ts">
import { propTypes } from '@/utils/propTypes';
const emit = defineEmits(['update:startDate', 'update:endDate', 'update:modelValue', 'change']);
const dateTime = ref<string[]>([])
const props = defineProps({
   modelValue: propTypes.any.def([]),
   startDate: propTypes.string.def(''),
   endDate: propTypes.string.def(''),
});
const changeDate = (val: string[]) => {
    emit('update:modelValue', val)
    emit('update:startDate', val?.[0])
    emit('update:endDate', val?.[1])
    emit('change', val)
}
watch(() => props.modelValue, (val) => {
    dateTime.value = val
    if (!val?.length) {
        emit('update:startDate', '')
        emit('update:endDate', '')
    }
})
</script>
