<template>
    <el-date-picker
        v-model="dateValue"
        :type="dateType"
        :placeholder="placeholder"
        :range-separator="rangeSeparator"
        :start-placeholder="startPlaceholder"
        :end-placeholder="endPlaceholder"
        :value-format="valueFormat"
        :clearable="clearable"
        :disabled="disabled"
        :size="size"
        :style="style"
        v-bind="$attrs"
    />
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    modelValue: {
        type: [String, Array, Date],
        default: null,
    },
    dateType: {
        type: String,
        default: 'date', // date | daterange | datetime | datetimerange
    },
    placeholder: {
        type: String,
        default: '选择日期',
    },
    rangeSeparator: {
        type: String,
        default: '-',
    },
    startPlaceholder: {
        type: String,
        default: '开始日期',
    },
    endPlaceholder: {
        type: String,
        default: '结束日期',
    },
    valueFormat: {
        type: String,
        default: 'YYYY-MM-DD',
    },
    clearable: {
        type: Boolean,
        default: true,
    },
    disabled: {
        type: Boolean,
        default: false,
    },
    size: {
        type: String,
        default: 'default',
    },
    style: {
        type: Object,
        default: () => ({ width: '200px' }),
    },
})

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

const dateValue = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val),
})
</script>
