SOURCE

<template>
  <div class="wrapper">
    <div v-if="msTime.show">
      <div class="auto-check">离系统自动签收还有</div>
      <span v-if="tipShow">{{tipText}}</span>
      <span v-if="!tipShow">{{tipTextEnd}}</span>
      <span v-if="msTime.day>0"><span class="red">{{msTime.day}}</span><i>{{dayTxt}}</i></span>
      <span class="red">{{msTime.hour}}</span><i>{{hourTxt}}</i>
      <span class="red">{{msTime.minutes}}</span><i>{{minutesTxt}}</i>
      <span class="red">{{msTime.seconds}}</span><i>{{secondsTxt}}</i>
    </div>
    <div v-if="!msTime.show">{{endText}}</div>
  </div>
</template>
<script>
  export default {
    replace: true,
    data () {
      return {
        tipShow: true,
        msTime: { // 倒计时数值
          show: false, // 倒计时状态
          day: '',
          hour: '',
          minutes: '',
          seconds: ''
        },
        star: '', // 活动开始时间
        end: '',  // 活动结束时间
        current: ''  // 当前时间
      }
    },
    watch: {
      currentTime: function (val, oldval) {
        this.gogogo()
      }
    },
    props: {
      //距离开始提示文字
      tipText: {
        type: String,
        default: '距离开始'
      },
      //距离结束提示文字
      tipTextEnd: {
        type: String,
        default: '距离结束'
      },
      //时间控件ID
      id: {
        type: String,
        default: '1'
      },
      //当前时间
      currentTime: {
        type: Number
      },
      // 活动开始时间
      startTime: {
        type: Number
      },
      // 活动结束时间
      endTime: {
        type: Number
      },
      // 倒计时结束显示文本
      endText: {
        type: String,
        default: '已结束'
      },
      //自定义显示文字:天
      dayTxt: {
        type: String,
        default: ':'
      },
      //自定义显示文字:时
      hourTxt: {
        type: String,
        default: ':'
      },
      //自定义显示文字:分
      minutesTxt: {
        type: String,
        default: ':'
      },
      secondsTxt: {
        type: String,
        default: ':'
      },
      // 是否开启秒表倒计，未完成
      secondsFixed: {
        type: Boolean,
        default: false
      }
    },
    mounted () {
      this.gogogo()
    },
    methods: {
      gogogo: function () {
        //判断是秒还是毫秒
        this.startTime.toString().length === 10 ? this.star = this.startTime * 1000 : this.star = this.startTime
        this.endTime.toString().length === 10 ? this.end = this.endTime * 1000 : this.end = this.endTime
        if (this.currentTime) {
          this.currentTime.toString().length === 10 ? this.current = this.currentTime * 1000 : this.current = this.currentTime
        } else {
          this.current = (new Date()).getTime()
        }
        if (this.end < this.current) {
          /**
           * 结束时间小于当前时间 活动已结束
           */
          this.msTime.show = false
          this.end_message()
        } else if (this.current < this.star) {
          /**
           * 当前时间小于开始时间 活动尚未开始
           */
          this.$set(this, 'tipShow', true)
          setTimeout(() => {
            this.runTime(this.star, this.current, this.start_message)
          }, 1)
        } else if ((this.end > this.current && this.star < this.current) || this.star === this.current) {
          /**
           * 结束时间大于当前并且开始时间小于当前时间，执行活动开始倒计时
           */
          this.$set(this, 'tipShow', false)
          this.msTime.show = true
          this.$emit('start_callback', this.msTime.show)
          setTimeout(() => {
            this.runTime(this.end, this.current, this.end_message, true)
          }, 1)
        }
      },
      runTime (startTime, endTime, callFun, type) {
        let msTime = this.msTime
        let timeDistance = startTime - endTime
        if (timeDistance > 0) {
          this.msTime.show = true
          msTime.day = Math.floor(timeDistance / 86400000)
          timeDistance -= msTime.day * 86400000
          msTime.hour = Math.floor(timeDistance / 3600000)
          timeDistance -= msTime.hour * 3600000
          msTime.minutes = Math.floor(timeDistance / 60000)
          timeDistance -= msTime.minutes * 60000
          // 是否开启秒表倒计,未完成
          // this.secondsFixed ? msTime.seconds = new Number(timeDistance / 1000).toFixed(2) : msTime.seconds = Math.floor( timeDistance / 1000 ).toFixed(0);
          msTime.seconds = Math.floor(timeDistance / 1000).toFixed(0)
          timeDistance -= msTime.seconds * 1000
          // 暂时注释
          // if (msTime.hour < 10) {
          //   msTime.hour = '0' + msTime.hour
          // }
          // if (msTime.minutes < 10) {
          //   msTime.minutes = '0' + msTime.minutes
          // }
          // if (msTime.seconds < 10) {
          //   msTime.seconds = '0' + msTime.seconds
          // }
          let _s = Date.now()
          let _e = Date.now()
          let diffPerFunc = _e - _s
          setTimeout(() => {
            if (type) {
              this.runTime(this.end, endTime += 1000, callFun, true)
            } else {
              this.runTime(this.star, endTime += 1000, callFun)
            }
          }, 1000 - diffPerFunc)
        } else {
          callFun()
        }
      },
      start_message () {
        this.$set(this, 'tipShow', false)
        this.$emit('start_callback', this.msTime.show)
        setTimeout(() => {
          this.runTime(this.end, this.star, this.end_message, true)
        }, 1)
      },
      end_message () {
        this.msTime.show = false
        if (this.currentTime <= 0) {
          return
        }
        this.$emit('end_callback', this.msTime.show)
      }
    }
  }
</script>

<style lang="scss">
 i {
   font-style: normal;
 }
 .red {
   color: red;
 }
 .wrapper > div {
   line-height: 0;
   .auto-check {
     margin-bottom: 16px;
   }
 }
</style>


### vue-countdown usage

```html
<count-down @start_callback="countDownS_cb(1)" @end_callback="countDownE_cb(1)" :currentTime="1481450106" :startTime="1481450110" :endTime="1481450115" :tipText="'距离开始文字1'" :tipTextEnd="'距离结束文字1'" :endText="'结束自定义文字2'" :dayTxt="'天'" :hourTxt="'小时'" :minutesTxt="'分'" :secondsTxt="'秒'"></count-down>
```

```js
import CountDown from 'vue-countdown'
components: {
    CountDown
},
methods: {
  countDownS_cb: function (x) {
    console.log(x)
  },
  countDownE_cb: function (x) {
    console.log(x)
  }
}
```
### options
1. **currentTime** - 当前时间戳,如果不传,默认获取用户本地的时间(建议传服务器的当前时间) 
    - **type**: Number
    - **required** : false
    - **default** : (new Date()).getTime()
2. **startTime** - 开始时间戳
    - **type**: Number
    - **required** : true
3. **endTime** - 结束时间戳
    - **type**: Number
    - **required** : true
4. **tipText** - 开始倒计时之前的提示文字
    - **type**: String
    - **required** : false
    - **default** : 距离开始
5. **tipTextEnd** - 开始倒计时之后的提示文字
    - **type**: String
    - **required** : false
    - **default** : 距离结束
6. **endText** - 倒计时结束之后的提示文字
    - **type**: String
    - **required** : false
    - **default** : 已结束
7. **dayTxt** - 自定义显示的天数文字
    - **type**: String
    - **required** : false
    - **default** : :
8. **hourTxt** - 自定义显示的小时文字
    - **type**: String
    - **required** : false
    - **default** : :
9. **secondsTxt** - 自定义显示的分钟文字
    - **type**: String
    - **required** : false
    - **default** : :
10. **secondsFixed** - 自定义显示的秒数文字
    - **type**: String
    - **required** : false
    - **default** : :
### callBack
1. **start_callback** - 开始倒计时结束之后的回调方法
    - **type**: Function
    - **required** : false
2. **end_callback** - 活动倒计时结束之后的回调方法
    - **type**: Function
    - **required** : false