<template>
    <el-date-picker :id="keyname"
                    v-model="modelValues"
                    :clearable="clearable"
                    :disabled="disabled"
                    :end-placeholder="endPlaceholder"
                    :format="format"
                    :keyname="keyname"
                    :placeholder="placeholder"
                    :range-separator="rangeSeparator"
                    :readonly="readonly"
                    :start-placeholder="startPlaceholder"
                    :type="type"
                    :value-format="valueFormat"
                    style="width: 100%;height: 100%;"
                    @change="timePickerChange"
                    @keydown.shift.up="keyupShiftUp"
                    @keydown.shift.down="keyupShiftDown"
                    @keydown.shift.left="keyupShiftLeft"
                    @keydown.shift.right="keyupShiftRight"></el-date-picker>
</template>

<script>
export default {
    inheritAttrs: false,
}
</script>

<script setup>
import {ref, watch} from 'vue'
import {ElDatePicker} from 'z-element-plus'
import 'dayjs/locale/zh-cn'

const props = defineProps({
    modelValue: {
        type: [Date, String, Number, Array]
    },
    type: {
        type: String,
        default: 'date'
    },
    rangeSeparator: {
        type: String,
        default: '-'
    },
    startPlaceholder: {
        type: String,
        default: ''
    },
    endPlaceholder: {
        type: String,
        default: ''
    },
    format: {
        type: String,
        default: 'YYYY:MM:DD'
    },
    valueFormat: {
        type: String,
        default: 'YYYY年MM月DD日'
    },
    keyname: {
        type: String,
        default: ''
    },
    readonly: {
        type: Boolean,
        default: false
    },
    disabled: {
        type: Boolean,
        default: false
    },
    clearable: {
        type: Boolean,
        default: true
    },
    placeholder: {
        type: String,
        default: ''
    },
})

//变量
const modelValues = ref(props.modelValue)

//监听
watch(() => [
    props.modelValue,
], ([val]) => {
    modelValues.value = val
})

//事件
const emit = defineEmits(['update:modelValue', 'change', 'keydowns'])

const timePickerChange = (val) => {
    emit('update:modelValue', val)
    emit('change', val)
}

//向上
const keyupShiftUp = (e) => {
    emit('keydowns', {type: 'up', name: {target: {id: props.keyname}}, key: props.keyname, e});
}

//向下
const keyupShiftDown = (e) => {
    emit('keydowns', {type: 'down', name: {target: {id: props.keyname}}, key: props.keyname, e});
}

//向左
const keyupShiftLeft = (e) => {
    emit('keydowns', {type: 'left', name: {target: {id: props.keyname}}, key: props.keyname, e});
}

//向右
const keyupShiftRight = (e) => {
    emit('keydowns', {type: 'right', name: {target: {id: props.keyname}}, key: props.keyname, e});
}
</script>
