<template>
    <div :class="properties.type==='day'?'rangePickerSingle':'timerangePickerSingle'">
        <template v-if="properties.type==='day'">
            <el-date-picker
                v-model="value[0]"
                :picker-options="properties.startPickerOptions"
                :editable="properties.editable"
                :disabled="properties.disabled"
                :clearable="properties.clearable"
                type="date"
                @change="model => {
                                        onChange(model,  0);
                                    }"
                :placeholder="properties.startPlaceholder"
            />
            {{ properties.separator }}
            <el-date-picker
                v-model="value[1]"
                :picker-options="properties.endPickerOptions"
                :editable="properties.editable"
                :disabled="properties.disabled"
                :clearable="properties.clearable"
                type="date"
                @change="model => {
                                        onChange(model,  1);
                                    }"
                :placeholder="properties.endPlaceholder"
            />
        </template>

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

    </div>
</template>

<script>
import DateUtil from "../../../util/pattern/date";
import * as ObjUtil from "../../../util/pattern/object";
import StringUtil from "../../../../util/pattern/string";
import mixin from "./mixin";
export default {
    name: "rangePickerSingle",
    mixins: [mixin],
    data() {
        return {
            data: {},
            value: ["", ""],
            formatEl: null,
            properties: {}
        };
    },

    created() {
        let vm = this;
        this.initProperties({
            editable: true,
            disabled: false,
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期',
            type: "day",
            // format: this.properties.type != 'time' ? 'YYYY-MM-DD' : 'YYYY-MM-DD hh:mm:ss',
            separator: '至',
            startPickerOptions: {
                disabledDate(time) {
                    let minDate = vm.properties.minDate ? DateUtil.getDate(vm.properties.minDate).getTime() : null;   // 最小时间
                    let maxDate = vm.value[1] ? new Date(vm.value[1]).getTime() : vm.properties.maxDate ? DateUtil.getDate(vm.properties.maxDate).getTime() : null;   // 最大时间
                    return vm.compareDate(time.getTime(), minDate, maxDate);
                }
            },
            endPickerOptions: {
                disabledDate(time) {
                    let minDate = vm.value[0] ? new Date(vm.value[0]).getTime() : vm.properties.minDate ? DateUtil.getDate(vm.properties.minDate).getTime() : null;   // 最小时间
                    let maxDate = vm.properties.maxDate ? DateUtil.getDate(vm.properties.maxDate).getTime() : null;   // 最大时间
                    return vm.compareDate(time.getTime(), minDate, maxDate);
                }
            }
        });
        vm.properties.format = this.properties.type != 'time' ? 'YYYY-MM-DD' : 'YYYY-MM-DD hh:mm:ss';
        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 || '',
                ];
                this.data = ObjUtil.copy(value)
            } else {
                this.value = []
                this.data = {start: '', end: ''}
            }
        },
        onChange(value, position) {
            this.data[["start", "end"][position]] = this.value[position] ? DateUtil.dateFmt(this.properties.format, this.value[position]) : null;
            this.$emit("update:model", this.data);
            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>
.rangePickerSingle {
    /deep/ .el-input--mini .el-input__inner {
        width: 104px;
    }

    /deep/ .el-input--mini .el-input__icon {
        width: 15px;
    }

    /deep/ .el-input--prefix .el-input__inner {
        padding-left: 20px;
        padding-right: 18px;
    }

    /deep/ .el-date-editor {
        width: auto;
    }
}

.timerangePickerSingle {
    /deep/ .el-input--mini .el-input__inner {
        width: 158px;
    }

    /deep/ .el-input--mini .el-input__icon {
        width: 15px;
    }

    /deep/ .el-input--prefix .el-input__inner {
        padding-left: 20px;
        padding-right: 18px;
    }

    /deep/ .el-date-editor {
        width: auto;
    }
}
</style>
