<view class="count-down">
<slot> {{ formatTime }} </slot>
</view>
</template>
<script>
import { parseTimeData , parseFormat } from './countDown.js'
export default{
props:{
//倒计时时长，单位ms ， String | Number
time:{
type:[String,Number]
},
//时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 , String
format:{
type:String
},
//是否自动开始倒计时 , Boolean
autoStart:{
type:Boolean
}
},
data () {
return {
runing:false, //倒计时是否进行中
timer:null, //定时器变量
remainTime:0, //剩余的毫秒数
endTime:0, //结束的时间戳
formatTime:0, //没有slot的时候，默认展示的格式
}
},
mounted(){
this.init();
},
methods:{
//初始化方法
init(){
this.reset();
},
//重置倒计时
reset(){
this.pause();
//父组件的值需要修改，但是不能直接修改，在本组件引用
this.remainTime = this.time;
//处理数据结构
this.setRemainTime( this.remainTime );
//判断开始执行倒计时
if( this.autoStart ){
this.start();
}
},
//处理成对象的数据结构，把具体的毫秒数转换成 x天 x小时等等
setRemainTime( remain ){
//不断赋值的过程
this.remainTime = remain;
//组织数据结构
let timeData = parseTimeData( this.remainTime );
//自定义事件传值
this.$emit('change' , timeData );
//如果不插入内容 的 数据展示格式
this.formatTime = parseFormat( this.format , timeData );
//如果倒计时结束，暂停倒计时
if( remain <= 0 ){
this.pause();
this.$emit('finish');
}
},
//开始倒计时
start(){
this.runing = true;
//结束时间戳 = 当前时间戳 + 剩余时间
this.endTime = new Date().getTime() + this.remainTime;
//进行倒计时的操作
this.toTick();
},
//执行倒计时
toTick(){
this.mactTick();
},
//倒计时定时器
mactTick(){
this.clear();
this.timer = setTimeout(()=>{
let remain = this.getRemainTime();
this.setRemainTime( remain );
//如果剩余时间不是0，就应该执行倒计时
if( this.remainTime != 0 ){
this.mactTick();
}
},500);
},
//计算剩余时间
getRemainTime(){
return Math.max( this.endTime - Date.now() , 0 );
},
//暂停倒计时
pause(){
this.runing = false;
//清除倒计时
this.clear();
},
//清除定时器
clear(){
clearTimeout( this.timer );
this.timer = null;
}
}
}
</script>
