<template>
  <view class="van-count-down">
    <slot v-if="useSlot"></slot>
    <block v-else>{{ formattedTime }}</block>
  </view>
</template>

<script>
import utils_1 from "./utils";
import Util from '@/utils/utils'
function simpleTick(fn) {
  return setTimeout(fn, 30);
}
export default {
  props: {
    useSlot: {
      type: Boolean,
      default: false
    },
    millisecond: {
      type: Boolean,
      default: false
    },
    time: {
      type: Number,
      default: 60
    },
    format: {
      type: String,
      value: "HH:mm:ss",
    },
    autoStart: {
      type: Boolean,
      value: true,
    },
  },
  watch: {
    time: function (newData) {
      this.reset()
    }
  },
  data() {
    return {
      counting: false,
      remain: 0,
      timeData: utils_1.parseTimeData(0),
      formattedTime: "0",
    }
  },
  created() {
    this.reset()
  },
  destroyed() {
    clearTimeout(this.tid);
    this.tid = null;
  },
  methods: {
    // 开始
    start: function () {
      if (this.counting) {
        return;
      }
      this.counting = true;
      this.endTime = Date.now() + this.remain;
      console.log('start', this.endTime)
      this.tick();
    },
    // 暂停
    pause: function () {
      this.counting = false;
      clearTimeout(this.tid);
    },
    // 重置
    reset: function () {
      this.pause();
      this.remain = this.time;
      console.log('reset',this.remain)
      this.setRemain(this.remain);
      if (this.autoStart) {
        this.start();
      }
    },
    tick: function () {
      if (this.millisecond) {
        this.microTick();
      } else {
        this.macroTick();
      }
    },
    microTick: function () {
      var _this = this;
      this.tid = simpleTick(function () {
        _this.setRemain(_this.getRemain());
        if (_this.remain !== 0) {
          _this.microTick();
        }
      });
    },
    macroTick: function () {
      var _this = this;
      this.tid = simpleTick(function () {
        var remain = _this.getRemain();
        console.log('remain',remain)
        if (!utils_1.isSameSecond(remain, _this.remain) || remain === 0) {
          _this.setRemain(remain);
        }
        if (_this.remain !== 0) {
          _this.macroTick();
        }
      });
    },
    getRemain: function () {
      return Math.max(this.endTime - Date.now(), 0);
    },
    setRemain: function (remain) {
      this.remain = remain;
      var timeData = utils_1.parseTimeData(remain);
      if (this.useSlot) {
        this.$emit("change", timeData);
      }
      this.setData({
        formattedTime: utils_1.parseFormat(this.format, timeData),
      });
      if (remain === 0) {
        this.pause();
        this.$emit("finish");
      }
    },
  },
};
</script>
<style>
@import "../common/index.css";
.van-count-down {
  color: #323233;
  color: var(--count-down-text-color, #323233);
  font-size: 14px;
  font-size: var(--count-down-font-size, 14px);
  line-height: 20px;
  line-height: var(--count-down-line-height, 20px);
}
</style>