将有用户的学习时长用learntime记录用户的学习时长即用用户输入的时候的倒计时减去用户重置的倒计时的时间template div class=countdown div class=input-container label for=time-input倒计时时间分钟：label input type=number id=time-input v-model=tim

<template>
  <div class="countdown">
    <div class="input-container">
      <label for="time-input">倒计时时间（分钟）：</label>
      <input type="number" id="time-input" v-model="time" min="1" max="1440" />
    </div>
    <div class="button-container">
      <div class="start-button" :class="{ disabled: isCounting }" @click="startCountdown">开始</div>
      <div class="pause-button" :class="{ disabled: !isCounting }" @click="pauseCountdown">暂停</div>
      <div class="reset-button" :class="{ disabled: isCounting }" @click="resetCountdown">重置</div>
    </div>
    <div class="time-display">{{ displayTime }}</div>
    <div class="learn-time">您的学习时长为：{{ learntime }}分钟</div>
  </div>
</template>
<script>
export default {
  name:"EffectiveLearning",
  data() {
    return {
      time: 0,
      isCounting: false,
      countdownInterval: null,
      startTime: null,
      elapsedTime: 0,
      visibilityChangeHandler: null,
      learntime: 0, // 新增的学习时长
    };
  },
  computed: {
    displayTime() {
      const remainingTime = this.time * 60 - this.elapsedTime;
      const minutes = Math.floor(remainingTime / 60);
      const seconds = remainingTime % 60;
      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    },
  },
  methods: {
    startCountdown() {
      if (this.time === 0 || this.isCounting) {
        return;
      }
      this.isCounting = true;
      this.startTime = Date.now() - this.elapsedTime * 1000;
      this.countdownInterval = setInterval(() => {
        this.elapsedTime = Math.floor((Date.now() - this.startTime) / 1000);
        if (this.elapsedTime >= this.time * 60) {
          this.pauseCountdown();
          this.learntime = this.time; // 记录学习时长
        }
      }, 1000);
      this.visibilityChangeHandler = () => {
        if (document.visibilityState === 'hidden') {
          this.pauseCountdown();
        } else if (document.visibilityState === 'visible' && this.isCounting) {
          this.startCountdown();
        }
      };
      document.addEventListener('visibilitychange', this.visibilityChangeHandler);
    },
    pauseCountdown() {
      if (!this.isCounting) {
        return;
      }
      clearInterval(this.countdownInterval);
      this.countdownInterval = null;
      this.isCounting = false;
    },
    resetCountdown() {
      if (this.isCounting) {
        return;
      }
      this.time = 0;
      this.elapsedTime = 0;
      this.pauseButtonText = '暂停';
      this.learntime = 0; // 重置学习时长
    },
  },
  watch: {
    time() {
      if (!this.isCounting) {
        this.elapsedTime = 0;
        this.learntime = 0; // 重置学习时长
      }
    },
  },
  beforeUnmount() {
    document.removeEventListener('visibilitychange', this.visibilityChangeHandler);
  },
  created() {
    window.addEventListener('focus', this.startCountdown);
    window.addEventListener('blur', this.pauseCountdown);
  },
  beforeUnmount() {
    window.removeEventListener('focus', this.startCountdown);
    window.removeEventListener('blur', this.pauseCountdown);
    document.removeEventListener('visibilitychange', this.visibilityChangeHandler);
  },
};
</script>
<style>
.countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.input-container {
  margin-bottom: 20px;
}

.button-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.start-button,
.pause-button,
.reset-button {
  display: inline-block;
  padding: 10px 20px;
  margin: 0 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

.start-button.disabled,
.reset-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pause-button.disabled {
  border-color: #ccc;
  color: #ccc;
  cursor: not-allowed;
}

.time-display {
  font-size: 48px;
}

.learn-time {
  margin-top: 20px;
  font-size: 24px;
}
</style>