<!--
 * @Author: 贺永胜
 * @Date: 2022-01-24 17:18:55
 * @email: 1378431028@qq.com
 * @LastEditors: 贺永胜
 * @LastEditTime: 2022-01-25 16:40:03
 * @Descripttion:
-->
<template>
    <div class='wrap'>
        <el-date-picker
            v-model="value1"
            type="date"
            value-format="yyyy-MM-dd"
            :picker-options=" disabledDate ? pickerOptions : {}"
            placeholder="选择日期" @change="changeDate">
        </el-date-picker>
        <el-time-picker
            is-range
            v-model="value2"
            :format="timeType"
            :value-format="timeType"
            range-separator="至"
            @change="changeTime"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围">
        </el-time-picker>
    </div>
</template>

<script>

export default {
    name: '',
    data() {
        return {
            value1: '',
            value2: [],
            pickerOptions: { // 时间筛选器
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
                }
            },
        }
    },
    watch: {
        value: {
            immediate: true,
            handler(newV, oldV) {
                if (newV) {
                    this.init()
                }
            }
        }
    },
    props: {
        value: {
            type: Object,
            default: () => {
            }
        },
        timeType: {
            type: String,
            default: 'HH:mm'//1 时分 2 时分秒
        },
        disabledDate: {
            type: Boolean,
            default() {
                return true;
            }
        }
    },
    model: {
        prop: 'value',
        event: 'change'
    },
    methods: {
        /**
         * 格式化时间字符串
         * @param timeStr 时间字符串
         * @param bindType 是否返回格式绑定timeType 不绑定则返回全量格式
         */
        getTime(timeStr, bindType) {
            let timeType = this.timeType;
            if (!bindType) {
                timeType = 'HH:mm:ss';
            }
            if (timeType === 'HH:mm') {
                return timeStr.substr(0, 5)
            } else if (timeStr.length === 5) {
                return timeStr + ":00"
            } else {
                return timeStr
            }
        },
        init() {
            this.value2 = [this.getTime('00:00:00', true), this.getTime('23:59:59', true)];
            if (Object.keys(this.value).length > 0) {
                this.value1 = this.value.startTime.split(' ')[0];
                this.value2 = [this.getTime(this.value.startTime.split(' ')[1], true), this.getTime(this.value.endTime.split(' ')[1], true)];
            }
        },
        changeDate(e) {
            this.changeValue();

        },
        changeTime(e) {
            this.changeValue();
        },
        changeValue() {
            if (!this.value1) {
                this.$message({
                    type: "warning",
                    message: '请先选择日期'
                })
                return;
            }
            if (this.value2 && this.value2.length) {
                let date = this.value1.slice(0, 10);
                let val1 = date + ' ' + this.getTime(this.value2[0]);
                let val2 = date + ' ' + this.getTime(this.value2[1]);
                this.$emit('change', {startTime: val1, endTime: val2});
            }
        },
    }
}
</script>
<style scoped>
</style>
