<template>
  <div class="flex justify-between items-center" id="cyp-timerange">
    <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.$emit('min-total-seconds', newValue.min);
          this.$emit('max-total-seconds', 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>
