<template>  

  <div style="display:flex">  
      
    <el-input type="number" id="days" v-model.number="duration.fDay" @input="updateTotalMilliseconds" />
    <el-button type="text" disabled>:天</el-button>

    <el-input type="number" id="hours" v-model.number="duration.fHours" @input="updateTotalMilliseconds" />
    <el-button type="text" disabled>:小时</el-button>

    <el-input type="number" id="minutes" v-model.number="duration.fMinutes" @input="updateTotalMilliseconds" />  
    <el-button type="text" disabled>:分钟</el-button>

    <el-input type="number" id="seconds" v-model.number="duration.fSeconds" @input="updateTotalMilliseconds" />  
    <el-button type="text" disabled>:秒</el-button>

  </div>  
</template>  
  
<script>  
export default {  
  props:{
    duration: {  
      type: Object,
      default: () => ({})
    },  
  },
  computed: {  
    // 只返回数据,具体时间由后台计算 
    totalMilliseconds: function() {  
      return (  
        this.duration
      );  
    }  
  },  
  watch: {  
    // 监听外部毫秒数的变化,如果需要的话(通常不需要,因为我们是计算得到的)  
    externalMilliseconds(newVal) {  
      // 如果需要,可以在这里实现将毫秒数转换回天、小时、分钟和秒  
    }  
  },  
  methods: {  
    updateTotalMilliseconds() {  
      // 每次输入改变时,都会触发这个方法,但因为我们使用computed属性,所以这里实际上不需要做任何事情  
      // 如果需要额外的逻辑(如限制输入范围),可以在这里添加  
      this.$emit('update:externalMilliseconds', this.duration); // 如果需要,可以触发一个事件来通知父组件  
    },
  }  
};  
</script>