<template>
    <div :class="$style.dateRangePicker">
        <DatePicker
            :value="getRange[0]"
            :min="min"
            :max="max"
            :required="required"
            :icon="icon"
            :format="format"
            @input="set($event,value[1],0)"
        />
        <span :class="$style.middle">至</span>
        <DatePicker
            :value="getRange[1]"
            :min="min"
            :max="max"
            :required="required"
            :icon="icon"
            :format="format"
            @input="set(value[0],$event,1)"
        />
        <template v-if="optionalRange&&optionalRange.length>0">
            <cox-Button
                :class="$style.range"
                v-for="(item,index) in section"
                :key="index"
                :type="item.flag?'primary':'text'"
                @tap="changeDate(item)"
            >{{item.text}}</cox-Button>
        </template>
    </div>
</template>

<script>
    const ONE_DAY_RANGE=(24*60*60-1)*1000;
    import DatePicker from "./DatePicker";
    export default {
        name: "DateRangePicker",
        components: {DatePicker},
        props:{
            min:{},
            max:{},
            value:{
                type:Array
            },
            required:{
                type:Boolean
            },
            icon:{},
			format:{},
            optionalRange:{
                type:Array,
                default:function () {
                    return [];
                }
            }
        },
        // computed:{
        //     getMin(){
        //         return this.value[0]||this.min;
        //     },
        //     getMax(){
        //         return this.value[1]||this.max;
        //     }
        // },
        computed:{
            section() {
                var result=this.optionalRange;
                if (this.value[0] && this.value[1]) {
                    let startDiffNow = -this.$moment().dayCorrection().diff(this.$moment(this.value[0]), 'days',false),
                        endDiffNow = this.$moment().dayCorrection().diff(this.$moment(this.value[1]), 'days',false);
                    result=result.map(function({diff,...other}){
                        var flag=false;
                        if(endDiffNow !== 0){
                            flag=false;
                        }
                        else if(startDiffNow==diff){
                            flag=true;
                        }
                        return {
                            flag,
                            diff,
                            ...other
                        }
                    });
                }
                return result;
            },
            getRange(){
                if(!!this.value){
                    let result=[];
                    if(this.value[0]){
                        result[0]=this.$moment(this.value[0]).dayCorrection().format('x')-0;
                    }
                    if(this.value[1]){
                        result[1]=this.$moment(this.value[1]).dayCorrection().format('x')-0;
                    }
                    return result;
                }
                return [];
                // if(this.value&&this.value[1]){
                //     return this.value[1]-ONE_DAY_RANGE;
                // }
                // return undefined;
            }
        },
        methods:{
            /*
            * flag:
            *   0:rangeStart
            *   1:rangeEnd
            * */
            set(start,end,flag){
                var start=Number(start),
                    end=Number(end);
                if(flag){
                    if(!start){
                        start=end
                    }
                    else if(end<start){
                        start=end-24*60*60*1000;
                    }
                    end+=ONE_DAY_RANGE;
                }
                else{
                    if(!end){
                        end=start+ONE_DAY_RANGE;
                    }
                    else if(start>end){
                        end=start+24*60*60*1000+ONE_DAY_RANGE;
                    }
                }
                this.$emit('input',[start,end]);
            },
            changeDate({diff,flag}) {
                if(flag){
                    this.$emit(
                        'input',
                        []
                    );
                }
                else{
                    this.$emit(
                        'input',
                        [
                            Number(this.$moment().subtract('days', -diff).dayCorrection().format('x')),
                            Number(this.$moment().dayCorrection().format('x'))+ONE_DAY_RANGE
                        ]
                    );
                }

            },
        }
    }
</script>

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

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