<template>
    <el-date-picker
        v-model="selectDate"
        type="datetimerange"
        unlink-panels
        range-separator="到"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :shortcuts="shortcuts"
        v-bind="$attrs"
        value-format="YYYY-MM-DD HH:mm:ss"
        @change="handleDateChange"
    />
</template>
<script setup>
    const emit = defineEmits(['update:modelValue']);
    const props = defineProps({
        modelValue: {
            type: Object,
            default: () => ({})
        },
        startKey: {
            type: String,
            default: 'createTimeStart'
        },
        endKey: {
            type: String,
            default: 'createTimeEnd'
        }
    });

    let selectDate = ref([]);
    watch(
        () => props.modelValue,
        (value) => {
            selectDate.value = value[props.startKey]
                ? [value[props.startKey], value[props.endKey]]
                : [];
            console.log(value, selectDate.value, 'valuexxxxxxxxxxx');
        },
        { deep: true }
    );

    const handleDateChange = (value) => {
        let temp = {};
        if (value && value.length === 2) {
            temp[props.startKey] = value[0];
            temp[props.endKey] = value[1];
        } else {
            temp[props.startKey] = '';
            temp[props.endKey] = '';
        }
        emit('update:modelValue', temp);
    };

    const shortcuts = [
        {
            text: '上周',
            value: () => {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                return [start, end];
            }
        },
        {
            text: '近1月',
            value: () => {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                return [start, end];
            }
        },
        {
            text: '近3月',
            value: () => {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                return [start, end];
            }
        }
    ];
</script>
