<template>
  <div v-if="showButton">
    <button @click="handleClick">{{ countdownText }}</button>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted,computed } from 'vue';

// 定义属性
const showButton = ref(true);
const countdownTime = ref(10); // 三分钟以秒为单位

// 计算倒计时文本
const countdownText = computed(() => {
  const minutes = Math.floor(countdownTime.value / 60).toString().padStart(2, '0');
  const seconds = (countdownTime.value % 60).toString().padStart(2, '0');
  return `点击我 (${minutes}:${seconds})`;
});

// 创建计时器
let intervalId;

onMounted(() => {
  intervalId = setInterval(() => {
    if (countdownTime.value > 0) {
      countdownTime.value--;
    } else {
      clearInterval(intervalId);
      showButton.value = false;
    }
  }, 1000);
});

onUnmounted(() => {
  // 确保清除计时器以防止内存泄漏
  clearInterval(intervalId);
});

// 按钮点击事件处理函数
const handleClick = () => {
  alert('按钮被点击了！');
};
</script>

<style scoped>
/* 添加你的样式 */
</style>