<template>
    <a-time-range-picker v-model:value="rangeValue" @change="handleChange" :placeholder="placeholder" :valueFormat="format" :format="format"/>
</template>

<script>
    import { defineComponent, ref, watch } from 'vue';
    import { propTypes } from '@/utils/propTypes';
    import { Form } from 'ant-design-vue';

    const placeholder = ['开始时间', '结束时间']
    /**
     * 用于时间-time组件的范围查询
     */
    export default defineComponent({
        name: "RangeTime",
        props:{
            value: propTypes.string.def(''),
            format: propTypes.string.def('HH:mm:ss'),
            placeholder: propTypes.string.def(''),
        },
        emits:['change', 'update:value'],
        setup(props, {emit}){
            const rangeValue = ref([])
            const formItemContext = Form.useInjectFormItemContext();

            watch(()=>props.value, (val)=>{
                if(val){
                    rangeValue.value = val.split(',')
                }else{
                    rangeValue.value = []
                }
            }, {immediate: true});


            function handleChange(arr){
                let str = ''
                if(arr && arr.length>0){
                    if(arr[1] && arr[0]){
                        str = arr.join(',')
                    }
                }
                emit('change', str);
                emit('update:value', str);
                formItemContext.onFieldChange();
            }
            return {
                rangeValue,
                placeholder,
                handleChange
            }
        }
    });
</script>
