From 66e09aa85c8d0ead50808251c6c1d4498d42b0a3 Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Mon, 21 Aug 2023 10:16:24 +0800
Subject: [PATCH] =?UTF-8?q?compontent=20time=20duration=20=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E5=BD=B1=E9=9F=BF,=20=E9=97=9C=E8=81=AF=E6=80=A7?=
 =?UTF-8?q?=E5=BE=85=E4=BF=AE.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Conformance/ConformanceSidebar.vue        |   4 +-
 .../ConformanceTimeRange.vue                  |  80 ++++++-----
 src/components/durationjs.vue                 | 133 +++++++++++++-----
 3 files changed, 138 insertions(+), 79 deletions(-)

diff --git a/src/components/Discover/Conformance/ConformanceSidebar.vue b/src/components/Discover/Conformance/ConformanceSidebar.vue
index bc66503..1ad0df3 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar.vue
@@ -26,9 +26,9 @@
         ></ConformanceSelectResult>
         <!-- time range -->
         <ConformanceTimeRange v-if="selectedRuleType === 'Activity duration' || selectedRuleType === 'Processing time' || selectedRuleType === 'Waiting time' || selectedRuleType === 'Cycle time'" :time="selectDurationTime"></ConformanceTimeRange>
-        selectDurationData:{{selectDurationData}} <br>
+        <!-- selectDurationData:{{selectDurationData}} <br>
         selectDurationTime:{{selectDurationTime}} <br>
-        isSubmitDurationData:{{isSubmitDurationData}} <br>
+        isSubmitDurationData:{{isSubmitDurationData}} <br> -->
       </div>
       <!-- button -->
       <div class="space-x-4 p-4 flex justify-center items-content border-t border-neutral-300">
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
index 6803af3..fe8bf43 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
@@ -5,12 +5,13 @@
     <p>min: {{ timeData.min }}</p>
     <p>max: {{ timeData.max }}</p>
     <div class="flex justify-between items-center">
-      <Durationjs></Durationjs>
-      <span>~</span>
-      <Durationjs></Durationjs>
+      <!-- <Durationjs :max="max" :min="min" :size="'min'" @total-seconds="minTotalSeconds"></Durationjs>
+        <span>~</span>
+      <Durationjs :max="max" :min="min" :size="'max'" @total-seconds="maxTotalSeconds"></Durationjs> -->
+      <Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" ></Durationjs>
+        <span>~</span>
+      <Durationjs :max="maxVuemax" :min="maxVuemin" :size="'max'" ></Durationjs>
     </div>
-    <!-- <Durationjs></Durationjs> -->
-
   </div>
 </div>
 </template>
@@ -22,47 +23,50 @@ export default {
   data() {
     return {
       timeData: {
-        min: null,
-        max: null,
+        min: 0,
+        max: 0,
       },
-      selectTimeRange: [20, 80],
-      selectedStart: null,
-      selectedEnd: null,
-      timeStart: ['Sec(s)', 'Min(s)', 'Hour(s)', 'Day(s)', 'Week(s)', 'Mon(s)'],
-      timeEnd: ['Sec(s)', 'Min(s)', 'Hour(s)', 'Day(s)', 'Week(s)', 'Mon(s)'],
     }
   },
   components: {
     Durationjs,
   },
-  watch: {
-    time: function(newValue, oldValue) {
-      this.timeData = {
-        min: newValue.min,
-        max: newValue.max
-      }
+  computed: { // 一定得用 computed 傳遞資料，不要拿父元件 props 的數值，不然子元件會交互影響。
+    minVuemin() {
+      return this.time ? this.time.min : 0;
+    },
+    minVuemax() {
+      return this.time ? this.time.max : 0;
+    },
+    maxVuemin() {
+      return this.time ? this.time.min : 0;
+    },
+    maxVuemax() {
+      return this.time ? this.time.max : 0;
     },
   },
-  created() {
-    this.selectedStart = this.timeStart[1];
-    this.selectedEnd = this.timeEnd[5];
+  watch: {
+    time: function(newValue, oldValue) {
+      if(newValue == null) {
+        this.timeData = {
+          min: 0,
+          max: 0
+        };
+      }else if(newValue != null) {
+        this.timeData = {
+          min: newValue.min,
+          max: newValue.max
+        };
+      };
+    },
+  },
+  methods: {
+    minTotalSeconds(e) {
+      // console.log('min:', e);
+    },
+    maxTotalSeconds(e) {
+      // console.log('max:', e);
+    },
   },
-
 }
 </script>
-<style>
-.time-preview {
-  border: 1px solid #eee;
-  max-width: 400px;
-  text-align: center;
-  margin: 0 auto;
-  margin-bottom: 20px;
-  padding: 15px;
-  background: rgb(70, 25, 173);
-  color: #fff;
-}
-
-.time-preview-time {
-  font-size: 30px;
-}
-</style>
diff --git a/src/components/durationjs.vue b/src/components/durationjs.vue
index fdd65f4..12cf6fa 100644
--- a/src/components/durationjs.vue
+++ b/src/components/durationjs.vue
@@ -1,12 +1,15 @@
 <template>
-  <div class=" relative">
+<div class=" relative">
   <div class="flex justify-center items-center gap-1 px-1 w-32 border border-neutral-500 cursor-pointer" @click="openTiemSelect = !openTiemSelect">
     <p>{{ days }}d</p>
     <p>{{ hours }}h</p>
     <p>{{ minutes }}m</p>
     <p>{{ seconds }}s</p>
   </div>
-  <div class="duration-container absolute left-1/2 top-1/2 -translate-x-1/2" v-show="openTiemSelect">
+  <p>maxTotal: {{ maxTotal }}</p>
+  <p>minTotal: {{ minTotal }}</p>
+  <p>size: {{ size }}</p>
+  <div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTiemSelect">
     <div class="duration-box" v-for="(unit, index) in inputTypes" :key="unit">
       <input
         type="text"
@@ -29,6 +32,29 @@
 
 <script>
 export default {
+  props: {
+    max: {
+      type: Number,
+      default: 0,
+      required: true,
+      validator(value) {
+        return value >= 0;
+      },
+    },
+    min: {
+      type: Number,
+      default: 0,
+      required: true,
+      validator(value) {
+        return value >= 0;
+      },
+    },
+    size: {
+      type: String,
+      default: false,
+      required: true,
+    },
+  },
   data() {
     return {
       display: 'dhms',
@@ -39,11 +65,17 @@ export default {
       maxDays: 0,
       minDays: 0,
       totalSeconds: 0,
-      maxTotal: 8740000,
-      minTotal: 6666666,
+      maxTotal: null,
+      minTotal: null,
       inputTypes: [],
       lastInput: null,
       openTiemSelect: false,
+      // tUnits: {
+      //   s: { dsp: 's', inc: 1, val: 0, max: 60, rate: 1, min: 0 },
+      //   m: { dsp: 'm', inc: 1, val: 0, max: 60, rate: 60, min: 0 },
+      //   h: { dsp: 'h', inc: 1, val: 0, max: 24, rate: 3600, min: 0 },
+      //   d: { dsp: 'd', inc: 1, val: 0, max: this.maxDays, rate: 86400, min: this.minDays }
+      // },
     };
   },
   computed: {
@@ -68,23 +100,17 @@ export default {
       },
     },
   },
-  directives: {
-  'click-outside': {
-    bind(el, { value }) {
-      handleOutsideClick = e => {
-        const isClickOutside = e.target !== el && !el.contains(e.target)
-        if (isClickOutside) value(e)
-        e.stopPropagation()
-      }
-      document.addEventListener('click', handleOutsideClick)
-      document.addEventListener('touchstart', handleOutsideClick)
+  watch: {
+    max: function(newValue, oldValue) {
+      this.maxTotal = newValue;
+      this.size === 'max' && newValue !== oldValue ? this.createData() : null;
+
     },
-    unbind() {
-      document.removeEventListener('click', handleOutsideClick)
-      document.removeEventListener('touchstart', handleOutsideClick)
-    }
-  }
-},
+    min: function(newValue, oldValue) {
+      this.minTotal = newValue;
+      this.size === 'min' && newValue !== oldValue ? this.createData() : null;
+    },
+  },
   methods: {
     onFocus(event) {
       this.lastInput = event.target;
@@ -100,7 +126,7 @@ 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');
+      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
@@ -120,6 +146,7 @@ export default {
           this.seconds = event.target.value;
           break;
       };
+
       this.calculateTotalSeconds();
     },
     onKeyUp(event) {
@@ -152,15 +179,28 @@ export default {
             newVal = '00';
           } else {
             newVal = '00';
-          }
-        }
-      }
+          };
+        };
+      };
 
       input.value = newVal.toString().padStart(2, '0');
+      switch (tUnit) {
+        case 'd':
+          this.days = input.value;
+          break;
+        case 'h':
+          this.hours = input.value;
+          break;
+        case 'm':
+          this.minutes = input.value;
+          break;
+        case 's':
+          this.seconds = input.value;
+          break;
+      };
       if (selectIt) input.select();
     },
     secondToDate(totalSeconds, size) {
-      // .toString().padStart(2, '0')
       totalSeconds = parseInt(totalSeconds);
       if(!isNaN(totalSeconds)) {
         this.seconds = totalSeconds % 60;
@@ -183,37 +223,52 @@ export default {
 
       for (const unit in this.tUnits) {
         const val = parseInt(this.tUnits[unit].val, 10);
-        if (!isNaN(val)) totalSeconds += val * this.tUnits[unit].rate;
+        if (!isNaN(val)) {
+          totalSeconds += val * this.tUnits[unit].rate;
+        }
       }
 
       // 大於最大值時要等於最大值
+      console.log(totalSeconds);
       if(totalSeconds >= this.maxTotal){
+        console.log('>max');
         totalSeconds = this.maxTotal;
         this.tUnits = tUnits;
-        this.secondToDate(this.maxTotal, 'max');
       } else if (totalSeconds <= this.minTotal) {
+        console.log('<min');
         // 小於最小值時要等於最小值
         totalSeconds = this.minTotal;
         this.tUnits = tUnits;
         this.secondToDate(this.minTotal, 'min');
       } else {
         this.totalSeconds = totalSeconds;
-      }
+      };
+      // this.$emit('total-seconds', this.totalSeconds);
+    },
+    createData() {
+      // let size = 'min';
+      let size = this.size;
+
+      switch (size) {
+        case 'max':
+          this.secondToDate(this.minTotal, 'min');
+          this.secondToDate(this.maxTotal, 'max');
+          this.totalSeconds = this.maxTotal;
+          break;
+        case 'min':
+          this.secondToDate(this.maxTotal, 'max');
+          this.secondToDate(this.minTotal, 'min');
+          this.totalSeconds = this.minTotal;
+          break;
+        default:
+          break;
+      };
+      // this.$emit('total-seconds', this.totalSeconds);
     },
   },
   mounted() {
     this.inputTypes = this.display.split('');
-
-    let size ='min';
-    if(size === 'max') {
-      this.secondToDate(this.minTotal, 'min');
-      this.secondToDate(this.maxTotal, 'max');
-      this.totalSeconds = this.maxTotal;
-    }else if(size === 'min') {
-      this.secondToDate(this.maxTotal, 'max');
-      this.secondToDate(this.minTotal, 'min');
-      this.totalSeconds = this.minTotal;
-    }
+    this.createData();
   },
 };
 </script>