<script setup lang="ts">
import { onMounted, ref, watch } from "vue"

const props = defineProps(["modelValue"])
const emit = defineEmits(["update:modelValue"])
const day = ref<number>(0)
const hour = ref<number>(0)
const min = ref<number>(0)
const sec = ref<number>(0)
const updateValue = () => {
  const result = day.value * 86400 + hour.value * 3600 + min.value * 60 + sec.value
  emit("update:modelValue", result)
}
watch(day, updateValue)
watch(hour, updateValue)
watch(min, updateValue)
watch(sec, updateValue)
onMounted(() => {
  if (props.modelValue == 0) {
    day.value = 0
    hour.value = 0
    min.value = 0
    sec.value = 0
  }
})
</script>

<template>
  <div class="inp">
    <el-input-number v-model.number="day" :precision="0" :step="1" :max="365" :min="0" step-strictly />
    <el-text>天</el-text>
  </div>
  <div class="inp">
    <el-input-number v-model.number="hour" :precision="0" :step="1" :max="24" :min="0" step-strictly />
    <el-text>时</el-text>
  </div>
  <div class="inp">
    <el-input-number v-model.number="min" :precision="0" :step="1" :max="60" :min="0" step-strictly />
    <el-text>分</el-text>
  </div>
  <div class="inp">
    <el-input-number v-model.number="sec" :precision="0" :step="1" :max="60" :min="0" step-strictly />
    <el-text>秒</el-text>
  </div>
</template>

<style scoped lang="scss">
.inp {
  margin-top: 4px;
}
</style>
