<template>
    <ElTimePicker
        :id="keyname"
        v-model="modelValues"
        :clearable="clearable"
        :disabled="disabled"
        :format="format"
        :keyname="keyname"
        :placeholder="placeholder"
        :readonly="readonly"
        :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"
    />
</template>

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

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

const props = defineProps({
    modelValue: {
        type: [Date, String, Number, Array],
    },
    format: {
        type: String,
        default: 'HH:mm:ss',
    },
    valueFormat: {
        type: String,
        default: 'HH:mm:ss',
    },
    keyname: {
        type: String,
        default: '',
    },
    readonly: {
        type: Boolean,
        default: false,
    },
    disabled: {
        type: Boolean,
        default: false,
    },
    clearable: {
        type: Boolean,
        default: true,
    },
    placeholder: {
        type: String,
        default: '',
    },
})

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

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

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

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>
