<template>
  <div class="timepiece">
    <div class="time" v-if="time > 0">
      <img :src="require('../../../assets/icon/course/alarmClock.png')" />
      <span>{{ showTime(time) }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // time: 300,//5分钟
      time: 0,
      timer: null
    };
  },
  watch: {
    time(newValue) {
      if (this.timer) {
        if (newValue < 0) {
          clearInterval(this.timer);
					this.timer = null;
          this.$alert("计时已结束", "计时器", {
            confirmButtonText: "确定",
            callback: action => {
							console.log('计时结束')
            }
          });
        }
      }
    }
  },
	methods: {
		startTime(time){
			if(this.timer)clearInterval(this.timer);
			this.timer = null;
			this.time = time;
			this.timer = setInterval(()=>{
				this.time-=1;
			},1000)
		}
	},
  computed: {
    showTime() {
      return duration => {
        if (duration <= 0) return `00：00`;
        // 更新currentTime，将秒数转换为时分秒格式
        // let hours = Math.floor(duration / 3600);
        let minutes = Math.floor((duration % 3600) / 60);
        let seconds = Math.floor(duration % 60);
        // this.recordedForm.time = `${hours.toString().padStart(2, "0")}:${minutes
        // 	.toString()
        // 	.padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
        return `${minutes
          .toString()
          .padStart(2, "0")}：${seconds.toString().padStart(2, "0")}`;
      };
    }
  }
};
</script>

<style scoped>
.timepiece {
  position: fixed;
  width: auto;
  height: auto;
  top: 140px;
  right: 10px;
  z-index: 9999;
  display: flex;
}

.time {
  width: auto;
  height: 80px;
  display: flex;
  align-items: center;
}

.time > img {
  width: 55px;
  height: 55px;
  z-index: 9;
}
.time > span {
  background-color: #38d0b1;
  border: solid 1px #1a9200;
  border-radius: 8px;
  position: relative;
  left: -20px;
  top: 3px;
  padding: 5px 10px 5px 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
