<template>
    <el-date-picker
        v-model="content"
        :type="type"
        range-separator="-"
        :format="format"
        :valueFormat="format"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        clearable
        :disabled-date="setDisabledDate"
        :disabled-hours="setDisabledHours"
        :shortcuts="shortcuts"
        :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]"
    ></el-date-picker>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import type { DatePickType } from 'element-plus'

/* Props S */
const props = withDefaults(
    defineProps<{
        startTime?: string | number
        endTime?: string | number
        type?: DatePickType
        format?: string
        isDisabledDate?: boolean
        isDisabledHours?: boolean
        // eslint-disable-next-line @typescript-eslint/ban-types
        shortcuts?: Array<{ text: string; value: Date | Function }>
    }>(),
    {
        startTime: '',
        endTime: '',
        type: 'daterange',
        format: 'YYYY-MM-DD',
        isDisabledDate: false,
        isDisabledHours: false,
        shortcuts: () => []
    }
)
const emit = defineEmits(['update:startTime', 'update:endTime'])

const content = computed<any>({
    get: () => {
        return [props.startTime, props.endTime]
    },
    set: (value: Event | any) => {
        if (value === null) {
            emit('update:startTime', '')
            emit('update:endTime', '')
        } else {
            emit('update:startTime', value[0])
            emit('update:endTime', value[1])
        }
    }
})
const setDisabledDate = (date: Date) => {
    if (props.isDisabledDate) {
        return date.getTime() < Date.now() - 8.64e7
    }
}
const setDisabledHours = () => {
    if (props.isDisabledHours) {
        const arrs = []
        for (let i = 0; i < 24; i++) {
            if (new Date().getHours() <= i) continue
            arrs.push(i)
        }
        return arrs
    }
}
</script>
