From 53e23b9475ac3f3cae8c19fcaf3ddc53e4b8b51b Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Mon, 18 Sep 2023 17:28:58 +0800
Subject: [PATCH] Issue #77: done.

---
 src/components/durationjs.vue | 68 ++++++++++++++++++++++++-----------
 1 file changed, 48 insertions(+), 20 deletions(-)

diff --git a/src/components/durationjs.vue b/src/components/durationjs.vue
index c95ad4d..3fb2f80 100644
--- a/src/components/durationjs.vue
+++ b/src/components/durationjs.vue
@@ -6,6 +6,9 @@
     <p>{{ minutes }}m</p>
     <p>{{ seconds }}s</p>
   </div>
+  maxTotal:{{ maxTotal }}
+  minTotal:{{ minTotal }}
+
   <div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTimeSelect">
     <div class="duration-box" v-for="(unit, index) in inputTypes" :key="unit">
       <input
@@ -135,6 +138,8 @@ export default {
      * @param {event} event
      */
     onBlur(event) {
+      let baseInputValue = event.target.value;
+      // 讓前綴數字自動補 0
       isNaN(event.target.value) ?
       event.target.value = '00' :
       event.target.value = event.target.value.toString().padStart(2, '0');
@@ -144,14 +149,16 @@ export default {
       const inputValue = parseInt(event.target.value, 10);
       const max = parseInt(event.target.dataset.max, 10); // 設定最大值
       const min = parseInt(event.target.dataset.min, 10);
-      if(inputValue > max) event.target.value = max.toString().padStart(2, '0');else if(inputValue < min) event.target.value= min.toString().padStart(2, '0');
+      if(inputValue > max) {
+        event.target.value = max.toString().padStart(2, '0');
+      }else if(inputValue < min) event.target.value= min.toString().padStart(2, '0');
 
       // 數值更新, tUnits 也更新, 並計算 totalSeconds
       const dsp = event.target.dataset.tunit;
       this.tUnits[dsp].val = event.target.value;
       switch (dsp) {
         case 'd':
-          this.days = event.target.value;
+          this.days = baseInputValue;
           break;
         case 'h':
           this.hours = event.target.value;
@@ -187,27 +194,47 @@ export default {
       const tUnit = input.dataset.tunit;
       let newVal = parseInt(input.value, 10);
       newVal = isNaN(newVal) ? 0 : newVal;
-      newVal += (goUp ? 1 : -1) * this.tUnits[tUnit].inc;
 
-      if (newVal <= 0 || newVal >= this.tUnits[tUnit].max) {
-        if (newVal === 0 || (newVal < 0 && input.dataset.index < 1)) {
-          newVal = '00';
-        } else if (input.dataset.index >= 1) {
-          const nextUnit = document.querySelector(`input[data-index="${parseInt(input.dataset.index) - 1}"]`);
-          let nextUnitVal = parseInt(nextUnit.value);
+      // if (newVal <= 0 || newVal > this.tUnits[tUnit].max) {
+      //   if (newVal === 0 || (newVal < 0 && input.dataset.index < 1)) {
+      //     newVal = '00';
+      //   } else if (input.dataset.index >= 1) {
+      //     const nextUnit = document.querySelector(`input[data-index="${parseInt(input.dataset.index) - 1}"]`);
+      //     let nextUnitVal = parseInt(nextUnit.value);
 
-          if (newVal < 0 && nextUnitVal > 0) {
-            nextUnit.value = nextUnitVal - 1;
-            nextUnit.dispatchEvent(new Event('blur'));
-            newVal = this.tUnits[tUnit].max - this.tUnits[tUnit].inc;
-          } else if (newVal > 0) {
-            nextUnit.value = nextUnitVal + 1;
-            nextUnit.dispatchEvent(new Event('blur'));
-            newVal = '00';
-          } else {
-            newVal = '00';
+      //     if (newVal < 0 && nextUnitVal > 0) {
+      //       nextUnit.value = nextUnitVal - 1;
+      //       nextUnit.dispatchEvent(new Event('blur'));
+      //       newVal = this.tUnits[tUnit].max;
+      //     } else if (newVal > 0) {
+      //       nextUnit.value = nextUnitVal + 1;
+      //       nextUnit.dispatchEvent(new Event('blur'));
+      //       newVal = '00';
+      //     } else {
+      //       newVal = '00';
+      //     }
+      //   }
+      // }
+
+      if(goUp) {
+        // 箭頭向上，數字加一
+        newVal += this.tUnits[tUnit].inc;
+        if(newVal > this.tUnits[tUnit].max) {
+          // 超過該單位最大值時要進位為零
+          newVal = newVal % (this.tUnits[tUnit].max + 1);
+          // 前一個更大的單位要進位
+          if(input.dataset.index > 0) {
+            const prevUnit = document.querySelector(`input[data-index="${parseInt(input.dataset.index) - 1}"]`);
+            this.actionUpDown(prevUnit, true);
           }
         }
+      } else {
+        // 箭頭向下，數字減一
+        newVal -= this.tUnits[tUnit].inc;
+        if (newVal < 0) {
+          // 小於零要調整為該單位最大值，但下一個單位不動
+          newVal = (this.tUnits[tUnit].max + 1) - this.tUnits[tUnit].inc;
+        }
       }
 
       input.value = newVal.toString().padStart(2, '0');
@@ -226,6 +253,7 @@ export default {
           break;
       };
       if (selectIt) input.select();
+      this.calculateTotalSeconds();
     },
     /**
      * 設定 dhms 的數值
@@ -266,7 +294,7 @@ export default {
       } else {
         this.totalSeconds = totalSeconds;
       };
-      this.$emit('total-seconds', this.totalSeconds);
+      this.$emit('total-seconds', totalSeconds);
     },
     /**
      * 初始化