<template>
    <div  class="rangePicker">
    <el-date-picker
            v-model="value"
            :unlink-panels="properties.unlinkPanels"
            :format="formatEl"
            :type="properties.type"
            @change="onChange"
            :range-separator="properties.separator"
            :start-placeholder="properties.startPlaceholder"
            :end-placeholder="properties.endPlaceholder"
            :editable="properties.editable"
            :disabled="properties.disabled"
            :picker-options="properties.pickerOptions"
    ></el-date-picker>
    </div>
</template>
<script>
import DateUtil from "../../../../util/pattern/date";
import StringUtil from "../../../../util/pattern/string";
import mixin from "./mixin";
    export default {
    name: "rangePicker",
    mixins: [mixin],
    data() {
        return {
            data:{},
            value:["",""],
            formatEl:null,
            properties: {}
        };
    },
    created() {
    	let vm = this;
        this.initProperties({
            type:'daterange',//daterange monthrange
            startPlaceholder:'开始日期',
            separator:'~',
            endPlaceholder:'结束日期',
            format:this.properties.type!='monthrange'?'YYYY-MM-DD':'YYYY-MM',
	        pickerOptions:{
		        disabledDate(time) {
					return vm.compareDate(time, vm.properties.minDate, vm.properties.maxDate);
		        }
	        },
	        editable:true,
	        disabled: false,
            unlinkPanels: false,
        });
        this.formatEl = StringUtil.replace(this.properties.format,{
            "Y":"y",
            "M":"M",
            "D":"d",
            "H":"H",
        });
        },
    methods: {
        init(value){
            if (value) {
                this.value= [
                    value.start || '',
                    value.end　|| '',
                ];
            } else {
                this.value = []
            }
        },
        onChange(){
            let model={
                start:this.value && this.value[0] ? DateUtil.dateFmt(this.properties.format, this.value[0]) : null,
                end:this.value && this.value[1] ? DateUtil.dateFmt(this.properties.format, this.value[1]) : null,
            };
            this.$emit("update:model",model);
            this.$emit("change",model)
        },
	    //  比较日期时间
	    compareDate(time, minDate, maxDate) {
		    if (minDate && maxDate) {
			    return time.getTime() < DateUtil.getDate(minDate).getTime() || time.getTime() > DateUtil.getDate(maxDate).getTime()
		    } else if (minDate) {
			    return time.getTime() < DateUtil.getDate(minDate).getTime()
		    } else if (maxDate) {
			    return time.getTime() > DateUtil.getDate(maxDate).getTime()
		    } else {
			    return false;
		    }
	    },
    }
};
</script>
