<template>
    <div :class="$style.dateRangePicker">
        <DatePicker
            type="min"
            :value="Number(value[0])"
            :min="min"
            :max="max"
            :required="required"
            :icon="icon"
            :format="format"
            @input="set($event,value[1],0)"
        />
        <span :class="$style.middle">至</span>
        <DatePicker
            type="min"
            :value="Number(value[1])"
            :min="min"
            :max="max"
            :required="required"
            :icon="icon"
            :format="format"
            @input="set(value[0],$event,1)"
        />
    </div>
</template>

<script>
    import DatePicker from "./DatePicker";
    export default {
        name: "DateRangeTimePicker",
        components: {DatePicker},
        props:{
            min:{},
            max:{},
            value:{
                type:Array
            },
            required:{
                type:Boolean
            },
            icon:{},
			format:{}
        },
        // computed:{
        //     getMin(){
        //         return this.value[0]||this.min;
        //     },
        //     getMax(){
        //         return this.value[1]||this.max;
        //     }
        // },

        methods:{
            set(start,end,flag){
                if(flag){
                    if(!start){
                        start=end
                    }
                    else if(!!end&&end<start){
                        start=end-24*60*60*1000;
                    }
                }
                else{
                    if(!end){
                        end=start
                    }
                    else if(!!start&&start>end){
                        end=start+24*60*60*1000;
                    }
                }
                this.$emit('input',[Number(start),Number(end)]);
            }
        }
    }
</script>

<style module lang="scss">
    @import '../../cssInjection/cssFunction.scss';
    @import '../../cssInjection/cssLayout.scss';

    .dateRangePicker {
        >.middle{
            vertical-align: middle;
            margin: 0 8px;
        }
    }
</style>