<script setup lang="ts">
import { ModelValueType, SingleOrRange } from 'element-plus'
import { EpPropMergeType } from 'element-plus/es/utils'
import { StrAnyObj } from '@/typings'

const props = withDefaults(
  defineProps<{
    modelValue: EpPropMergeType<
      | (new (...args: any[]) => ModelValueType & {})
      | (() => ModelValueType)
      | ((new (...args: any[]) => ModelValueType & {}) | (() => ModelValueType))[],
      unknown,
      unknown
    >
    style?: StrAnyObj
    placeholder?: string
    clearable?: boolean
    disabled?: boolean
    readonly?: boolean
    // 显示类型
    type?:
      | 'year'
      | 'years'
      | 'month'
      | 'date'
      | 'dates'
      | 'datetime'
      | 'week'
      | 'datetimerange'
      | 'daterange'
      | 'monthrange'
    // 显示在输入框中的格式
    format?: string
    // 绑定值的格式。 不指定则绑定值为 Date 对象
    valueFormat?: string
    // 选择器打开时默认显示的时间
    defaultValue?: Date | [Date, Date]
    // 选择日期后的默认时间值。 如未指定则默认时间值为 00:00:00
    defaultTime?: EpPropMergeType<
      | (new (...args: any[]) => Date | [Date, Date])
      | (() => SingleOrRange<Date>)
      | ((new (...args: any[]) => Date | [Date, Date]) | (() => SingleOrRange<Date>))[],
      unknown,
      unknown
    >
    // 一个用来判断该日期是否被禁用的函数
    disabledDate?: (data: Date) => boolean
    // 设置快捷选项
    shortcuts?: Array<{ text: string; value: Date | Function }>
    // 范围选择时开始日期的占位内容
    startPlaceholder?: string
    // 范围选择时结束日期的占位内容
    endPlaceholder?: string
    // 选择范围时的分隔符
    rangeSeparator?: string
    // change事件
    change?: (value: any) => void
  }>(),
  {
    clearable: true,
    disabled: false,
    readonly: false,
    type: 'date',
    format: 'YYYY-MM-DD',
    valueFormat: 'YYYY-MM-DD HH:mm:ss',
    startPlaceholder: '请选择开始时间',
    endPlaceholder: '请选择结束时间'
  }
)

const emits = defineEmits(['update:modelValue'])

const computedModelValue = computed({
  get() {
    return props.modelValue
  },
  set(newValue) {
    emits('update:modelValue', newValue)
  }
})
</script>

<template>
  <el-date-picker
    v-model="computedModelValue"
    :placeholder="placeholder"
    :clearable="clearable"
    :disabled="disabled"
    :readonly="readonly"
    :style="style"
    :type="type"
    :format="format"
    :value-format="valueFormat"
    :default-value="defaultValue"
    :default-time="defaultTime"
    :disabled-date="disabledDate"
    :shortcuts="shortcuts"
    :start-placeholder="startPlaceholder"
    :end-placeholder="endPlaceholder"
    :range-separator="rangeSeparator"
    style="width: 100%"
    @change="(value: any) => change?.(value)"
  />
</template>
