<template>
 <div>
  <span
    :sendSync="sendSync"
    :autoStart="autoStart"
    :defaultVal="defaultVal"
  >{{countString}}</span>
 </div>
</template>

<script>
export default {
  name:'time-count',
  data() {
    return {
      isStart: false,
      globalTimer: null, //获取setInterval对象值
      countString: "0秒", //用来显示时间
      day: 0,
      hour: 0,
      minute: 0,
      second: 0,
      millisecond: 0,
      countVal: this.defaultVal, //获取初始值
      pauseTime: 0
    };
  },
  watch: {
    countString: {
      deep: true,
      handler: function(val, oldVal) {
        var vm = this;
        if (vm.needSendSunc) {
          vm.passToParent(val);
        }
      }
    },
    needSendSunc: {
      deep: true,
      handler: function(val) {
        var vm = this;
        if (val) {
          vm.passToParent(vm.countString);
        }
      }
    }
  },
  props: {
    sendSync: {
      type: Boolean,
      default: false
    },
    autoStart: {
      type: Boolean,
      default: false
    },
    defaultVal: {
      type: Number,
      default: 0
    }
  },
  mounted() {
    var vm = this;
    if (vm.autoStart) {
      vm.startCountFn();
    }
  },
  computed: {
    needSendSunc: function() {
      return this.sendSync;
    }
  },
  created() {
    this.$on("startCount", function() {
      this.startCountFn();
    });
    this.$on("stopCount", function() {
      this.stopCountFn();
    });
  },
  methods: {
    counterFn: function(counterTime) {
      var vm = this;
      var nowDate = new Date().getTime();
      if (vm.pauseTime <= 0) {
        var num =  counterTime - nowDate; //计算时间毫秒差
      } else {
        vm.pauseTime = vm.pauseTime + 10;
        var num = counterTime - vm.pauseTime; //计算时间毫秒差
      }
      // console.log(num)
      if(num <= 0) {

        this.stopCountFn();
        this.$nextTick(_ => {
          this.countString = '';
        })

      }

      // console.log(num)
      var leave1 = num % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
      var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
      var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
      vm.day = Math.floor(num / (24 * 3600 * 1000)); //计算相差天数
      vm.hour = Math.floor(leave1 / (3600 * 1000)); //计算相差小时
      vm.minute = Math.floor(leave2 / (60 * 1000)); //计算相差分钟
      vm.second = Math.round(leave3 / 1000); //计算相差秒
      if (vm.day > 0) {
        vm.countString = `${vm.day}天 ${vm.hour}小时 ${vm.minute}分 ${
          vm.second
        }秒`;
      } else if (vm.hour > 0) {
        vm.countString = `${vm.hour}小时 ${vm.minute}分 ${vm.second}秒`;
      } else if (vm.minute > 0) {
        vm.countString = `${vm.minute}分 ${vm.second}秒`;
      } else {
        vm.countString = `${vm.second}秒`;
      }
    },
    startCountFn: function() {
      var vm = this;
      if (!vm.isStart) {
        vm.countVal = vm.countVal ? vm.countVal : new Date().getTime();
        var timer = setInterval(function() {
          vm.counterFn(vm.countVal);
        }, 1000);
        vm.globalTimer = timer;
        vm.isStart = true;
      }
    },
    stopCountFn: function() {
      var vm = this;
      if (vm.isStart) {
        window.clearInterval(vm.globalTimer);
        vm.globalTimer = null;
        vm.isStart = false;
        vm.pauseTime = new Date().getTime();
      }
    },
    passToParent: function(data) {
      var vm = this;
      this.$emit("getDataFromChild", data);
    }
  },
  destroyed() {
    this.stopCountFn();
  }
};
</script>
