<template>
  <div class="timer flexbox" :style="{color:config.textColor||'#02d9fd',justifyContent:config.textPosition||'flex-start' }">
    <span class="el-icon-time mrgr5"></span>
    <div ref="startTimer">
      <p class="font14">{{nowTime.split(' ')[1].replaceAll(/:/ig,' : ')}}</p>
      <p class="font12">{{nowTime.split(' ')[0].replaceAll(/-/ig,'/')}} {{week}}</p>
    </div>
  </div>
</template>
<script>
export default {
  name: 'niNowTimer',
  props: {
    config: {
      // 属性内容
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      timer: '',
      nowTime: this.$utils.getTodayDate('time'),
      week: this.getWeekDate()
    }
  },
  created() {
    this.timer = setInterval(this.startTimer, 1000)
  },
  destroyed() {
    clearInterval(this.timer)
  },

  methods: {
    getWeekDate(date) {
      var now = date || new Date()
      var day = now.getDay()
      var weeks = new Array(
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六'
      )
      var week = weeks[day]
      return week
    },
    startTimer() {
      this.nowTime = this.$utils.getTodayDate('time')
      // this.seconds += 1
      // if (this.seconds >= 60) {
      //   this.seconds = 0
      //   this.minute = this.minute + 1
      // }

      // if (this.minute >= 60) {
      //   this.minute = 0
      //   this.hour = this.hour + 1
      // }
      // this.$refs.startTimer.innerHTML =
      //   (this.minutes < 10 ? '0' + this.minutes : this.minutes) +
      //   ':' +
      //   (this.seconds < 10 ? '0' + this.seconds : this.seconds)
    }
  },
  watch: {
  }
}
</script>
    
<style lang="scss" scoped>
.timer {
  align-items: center;
  .el-icon-time {
    font-size: 30px;
    font-weight: bold;
  }
}
</style>
