<template>
  <el-time-picker v-model="getValue" v-bind="$attrs" />
</template>

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

/**
 * 默认值为： HH:mm:ss
 */
const modelValue = defineModel({
  type: String,
  default: ''
})

const getValue = computed({
  get() {
    const time = modelValue.value?.split(':')

    const date = dayjs()
      .hour(Number(time?.[0] || 0))
      .minute(Number(time?.[1] || 0))
      .second(Number(time?.[2] || 0))
      .format('YYYY-MM-DD HH:mm:ss')
    return modelValue.value ? date : undefined
  },
  set(val) {
    if (val) {
      modelValue.value = dayjs(val).format('HH:mm:ss')
    } else {
      modelValue.value = ''
    }
  }
})
</script>

<style scoped></style>
