<template>
    <div>
        <el-date-picker
            v-model="val[0]"
            :picker-options="startPickerOptions"
            :disabled="disabled"
            :clearable="clearable"
            type="datetime"
            @change="model => {
                onChange(model,  0);
            }"
            :placeholder="startPlaceholder"
            default-time="00:00:00"
        />
        {{ separator }}
        <el-date-picker
            v-model="val[1]"
            type="datetime"
            :picker-options="endPickerOptions"
            :disabled="disabled"
            :clearable="clearable"
            @change="model => {
                onChange(model,  1);
            }"
            :placeholder="endPlaceholder"
            default-time="23:59:59"
        />

    </div>
</template>

<script>
import DateUtil from "../../../util/pattern/date";
import * as ObjUtil from "../../../util/pattern/object";
import StringUtil from "../../../util/pattern/string";
import MapUtil from "../../../util/pattern/map";

export default {
    name: "rangePickerSingle",
    data() {
        let vm = this;
        return {
            val: ["", ""],
            data: {},
            startPickerOptions: {
                disabledDate(time) {
                    let minDate = vm.minDate ? DateUtil.getDate(vm.minDate.split(' ')[0]).getTime() : null;   // 最小时间
                    let maxDate = vm.val[1] ? new Date(vm.val[1]).getTime() : vm.maxDate ? DateUtil.getDate(vm.maxDate.split(' ')[0]).getTime() : null;   // 最大时间
                    return vm.compareDate(time.getTime(), minDate, maxDate);
                }
            },
            endPickerOptions: {
                disabledDate(time) {
                    let minDate = vm.val[0] ? new Date(vm.val[0]).getTime() : vm.minDate ? DateUtil.getDate(vm.minDate.split(' ')[0]).getTime() : null;   // 最小时间
                    let maxDate = vm.maxDate ? DateUtil.getDate(vm.maxDate.split(' ')[0]).getTime() : null;   // 最大时间
                    return vm.compareDate(time.getTime(), minDate, maxDate);
                }
            }
        };
    },
    props: {
        value: {
            type: Object,
            default: () => {
            }
        },
        /**
         * YYYY-MM-DD 年月日
         * YYYY-MM-DD hh:mm:ss 年月日时分秒
         */
        format: {
            type: String,
            default: 'YYYY-MM-DD hh:mm:ss'// 2 时分秒
        },
        /**
         * 最小时间
         * 'YYYY-MM-DD hh:mm:ss'
         */
        minDate: {
            type: String,
            default: null
        },
        /**
         * 最大时间
         * 'YYYY-MM-DD hh:mm:ss'
         */
        maxDate: {
            type: String,
            default: null
        },
        startPlaceholder: {
            type: String,
            default: '开始日期'
        },
        endPlaceholder: {
            type: String,
            default: '结束日期'
        },
        disabled: {
            type: Boolean,
            default: false
        },
        clearable: {
            type: Boolean,
            default: true
        },
        separator: {
            type: String,
            default: '至'
        },
        disabledDate: {
            type: Function,
            default() {
                return (time) => {
                    return false;
                };
            }
        }
    },
    computed: {
        formatEl() {
            return StringUtil.replace(this.format, {
                "Y": "y",
                "M": "M",
                "D": "d",
                "H": "H",
            });
        }
    },
    model: {
        prop: 'value',
        event: 'change'
    },
    watch: {
        value: {
            immediate: true,
            handler(newV, oldV) {
                if (newV) {
                    this.init(newV)
                }
            }
        }
    },
    methods: {
        init(val) {
            if (val) {
                this.val = [
                    val.start || '',
                    val.end || '',
                ];
                this.data = ObjUtil.copy(val)
            } else {
                this.val = []
                this.data = {start: '', end: ''}
            }
        },
        onChange(val, position) {
            this.data[["start", "end"][position]] = this.val[position] ? DateUtil.dateFmt(this.format, this.val[position]) : null;
            this.$emit("change", this.data)
        },
        //  比较日期时间
        compareDate(time, minDate, maxDate) {
            if (minDate && maxDate) {
                return time < minDate || time > maxDate
            } else if (minDate) {
                return time < minDate
            } else if (maxDate) {
                return time > maxDate
            } else {
                return false;
            }
        },
    }
};
</script>
<style lang="less" scoped>
</style>
