Conformance: add ConformanceTimeRange.vue

src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="flex justify-between items-center">
+    <Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" :updateMax="updateMax" @total-seconds="minTotalSeconds"></Durationjs>
+      <span>~</span>
+    <Durationjs :max="maxVuemax" :min="maxVuemin" :size="'max'" @total-seconds="maxTotalSeconds"></Durationjs>
+  </div>
+</template>
+<script>
+import Durationjs from '@/components/durationjs.vue';
+
+export default {
+  props: ['time', 'select'],
+  data() {
+    return {
+      timeData: {
+        min: 0,
+        max: 0,
+      },
+      timeRangeMin: 0,
+      timeRangeMax: 0,
+      minVuemin: 0,
+      minVuemax: 0,
+      maxVuemin: 0,
+      maxVuemax: 0,
+      updateMax: null,
+    }
+  },
+  components: {
+    Durationjs,
+  },
+  watch: {
+    time: {
+      handler: function(newValue, oldValue) {
+        if(newValue == null) {
+          this.timeData = {
+            min: 0,
+            max: 0
+          };
+        }else if(newValue != null) {
+          this.timeData = {
+            min: newValue.min,
+            max: newValue.max
+          };
+        }
+        this.setTimeValue();
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  methods: {
+    /**
+     * set props values
+     */
+    setTimeValue() {
+      // 深拷貝原始 timeData 的內容
+      this.minVuemin = JSON.parse(JSON.stringify(this.timeData.min));
+      this.minVuemax = JSON.parse(JSON.stringify(this.timeData.max));
+      this.maxVuemin = JSON.parse(JSON.stringify(this.timeData.min));
+      this.maxVuemax = JSON.parse(JSON.stringify(this.timeData.max));
+    },
+    /**
+     * get min total seconds
+     * @param {Number} e
+     */
+    minTotalSeconds(e) {
+      this.timeRangeMin = e;
+      this.$emit('min-total-seconds', e);
+    },
+    /**
+     * get min total seconds
+     * @param {Number} e
+     */
+    maxTotalSeconds(e) {
+      this.timeRangeMax = e;
+      this.updateMax = e;
+      this.$emit('max-total-seconds', e);
+    },
+  },
+  created() {
+    if(this.select){
+      this.timeData = this.select;
+      this.setTimeValue();
+    }
+  }
+}
+</script>