<template>
  <div class="typewriter-container" :style="fontsConStyle">
    <!-- 打字文本 - 逐字符渲染 -->
    <span class="typewriter-text">
      <span 
        v-for="(char, index) in displayedText" 
        :key="index" 
        class="character"
        :data-index="index"
      >
        {{ char }}
      </span>
    </span>
    
    <!-- 光標(biāo) - 精準(zhǔn)控制顯示/閃爍 -->
    <span 
      v-if="showCursor && isCursorVisible"
      class="cursor"
      :class="{ 'blink': showBlinkCursor }"
      aria-hidden="true"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed, watch, watchEffect } from "vue";

// 組件 Props 定義（帶完整校驗(yàn)）
const props = defineProps({
  // 要顯示的文本內(nèi)容
  text: {
    type: String,
    required: true,
    default: ""
  },
  // 打字速度（ms/字符）
  speed: {
    type: Number,
    default: 80,
    validator: (value) => value > 0
  },
  // 是否顯示光標(biāo)
  showCursor: {
    type: Boolean,
    default: true
  },
  // 光標(biāo)是否閃爍
  blinkCursor: {
    type: Boolean,
    default: true
  },
  // 是否自動(dòng)開(kāi)始打字
  autoStart: {
    type: Boolean,
    default: true
  },
  // 是否循環(huán)播放
  loop: {
    type: Boolean,
    default: false
  },
  // 循環(huán)延遲（打字完成后等待時(shí)間）
  loopDelay: {
    type: Number,
    default: 1000,
    validator: (value) => value >= 0
  },
  // 容器樣式（自定義字體、顏色等）
  fontsConStyle: {
    type: Object,
    default: () => ({
      fontSize: "2rem",
      fontFamily: "'Courier New', monospace",
      color: "#333",
      lineHeight: "1.5"
    })
  },
  // 是否開(kāi)啟刪除效果
  deleteEffect: {
    type: Boolean,
    default: false
  },
  // 刪除速度（ms/字符）
  deleteSpeed: {
    type: Number,
    default: 30,
    validator: (value) => value > 0
  },
  // 字符入場(chǎng)動(dòng)畫(huà)開(kāi)關(guān)
  charAnimation: {
    type: Boolean,
    default: true
  }
});

// 響應(yīng)式狀態(tài)
const displayedText = ref("");    // 當(dāng)前顯示的文本
const currentIndex = ref(0);      // 當(dāng)前字符索引
const isPlaying = ref(false);     // 是否正在播放
const isDeleting = ref(false);    // 是否正在刪除
const isCursorVisible = ref(true);// 光標(biāo)是否顯示

// 定時(shí)器標(biāo)識(shí)（用于清理）
let intervalId = null;
let timeoutId = null;
let cursorTimer = null;

// 計(jì)算屬性：控制光標(biāo)閃爍狀態(tài)
const showBlinkCursor = computed(() => {
  return props.blinkCursor && 
         !isDeleting.value &&
         (displayedText.value.length === props.text.length || displayedText.value.length === 0);
});

// 工具函數(shù)：清除所有定時(shí)器
const clearAllTimers = () => {
  if (intervalId) clearInterval(intervalId);
  if (timeoutId) clearTimeout(timeoutId);
  if (cursorTimer) clearInterval(cursorTimer);
  intervalId = null;
  timeoutId = null;
  cursorTimer = null;
};

// 核心方法：開(kāi)始打字
const startTyping = () => {
  // 重置狀態(tài)
  clearAllTimers();
  isPlaying.value = true;
  isDeleting.value = false;
  currentIndex.value = 0;
  displayedText.value = "";
  isCursorVisible.value = true;
  
  // 打字邏輯
  intervalId = setInterval(() => {
    if (currentIndex.value < props.text.length) {
      displayedText.value = props.text.substring(0, currentIndex.value + 1);
      currentIndex.value++;
    } else {
      // 打字完成
      clearInterval(intervalId);
      isPlaying.value = false;
      
      // 循環(huán)邏輯
      if (props.loop) {
        if (props.deleteEffect) {
          timeoutId = setTimeout(startDeleting, props.loopDelay);
        } else {
          timeoutId = setTimeout(startTyping, props.loopDelay);
        }
      }
    }
  }, props.speed);
};

// 核心方法：開(kāi)始刪除
const startDeleting = () => {
  clearAllTimers();
  isDeleting.value = true;
  
  intervalId = setInterval(() => {
    if (currentIndex.value > 0) {
      currentIndex.value--;
      displayedText.value = props.text.substring(0, currentIndex.value);
    } else {
      // 刪除完成
      clearInterval(intervalId);
      isDeleting.value = false;
      
      // 循環(huán)打字
      if (props.loop) {
        timeoutId = setTimeout(startTyping, props.loopDelay);
      } else {
        isCursorVisible.value = false; // 非循環(huán)模式下刪除完成隱藏光標(biāo)
      }
    }
  }, props.deleteSpeed);
};

// 監(jiān)聽(tīng)文本變化：自動(dòng)重啟打字（適配動(dòng)態(tài)文本場(chǎng)景）
watch(() => props.text, (newText) => {
  if (newText && props.autoStart) {
    startTyping();
  }
}, { immediate: true });

// 初始化光標(biāo)閃爍（非閃爍模式下固定顯示）
watchEffect(() => {
  if (props.showCursor && !cursorTimer) {
    cursorTimer = setInterval(() => {
      if (!showBlinkCursor.value) {
        isCursorVisible.value = true;
      } else {
        isCursorVisible.value = !isCursorVisible.value;
      }
    }, 500);
  }
});

// 組件掛載：自動(dòng)開(kāi)始打字
onMounted(() => {
  if (props.autoStart && props.text) {
    startTyping();
  }
});

// 組件卸載：清理所有定時(shí)器（避免內(nèi)存泄漏）
onBeforeUnmount(() => {
  clearAllTimers();
});

// 暴露組件方法（供父組件調(diào)用）
defineExpose({
  start: startTyping,        // 手動(dòng)開(kāi)始
  pause: clearAllTimers,     // 暫停
  restart: () => {           // 重啟
    clearAllTimers();
    startTyping();
  },
  isPlaying,                 // 當(dāng)前播放狀態(tài)
  isDeleting                 // 當(dāng)前刪除狀態(tài)
});
</script>

<style scoped>
/* 容器樣式 - 適配行內(nèi)/塊級(jí)顯示 */
.typewriter-container {
  display: inline-flex;
  align-items: center;
  position: relative;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  white-space: pre-wrap; /* 支持換行符 */
  word-break: break-all; /* 防止長(zhǎng)文本溢出 */
}

/* 文本容器 */
.typewriter-text {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  color: inherit;
}

/* 字符樣式 - 入場(chǎng)動(dòng)畫(huà) */
.character {
  display: inline-block;
  animation: typeIn 0.1s ease-out forwards;
  opacity: 0;
}

/* 字符入場(chǎng)動(dòng)畫(huà) */
@keyframes typeIn {
  0% {
    transform: translateY(5px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 光標(biāo)樣式 - 垂直居中優(yōu)化 */
.cursor {
  display: inline-block;
  width: 2px;
  height: 1.2em; /* 匹配字體高度 */
  background-color: currentColor;
  margin-left: 2px;
  vertical-align: middle;
  position: relative;
  top: 0;
  opacity: 1;
}

/* 光標(biāo)閃爍動(dòng)畫(huà) */
.cursor.blink {
  animation: blink 1s infinite step-end;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* 禁用字符動(dòng)畫(huà)的樣式 */
:deep(.character) {
  animation: none !important;
  opacity: 1 !important;
}
</style>

<template>
  <Typewriter 
    text="Hello Vue3! 這是一個(gè)超絲滑的打字機(jī)效果組件?"
    speed="50"
  />
</template>

<script setup>
import Typewriter from './components/Typewriter.vue';
</script>

<template>
  <div>
    <Typewriter 
      ref="typewriterRef"
      text="Vue3 打字機(jī)組件 | 支持循環(huán)刪除 | 自定義樣式"
      :speed="60"
      :deleteSpeed="40"
      :loop="true"
      :deleteEffect="true"
      :loopDelay="1500"
      :fontsConStyle="{
        fontSize: '1.5rem',
        color: '#409eff',
        fontFamily: '微軟雅黑'
      }"
    />
    <button @click="handleRestart">重啟打字</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Typewriter from './components/Typewriter.vue';

const typewriterRef = ref();

// 手動(dòng)重啟打字
const handleRestart = () => {
  typewriterRef.value.restart();
};
</script>

fontsConStyle: {
  fontSize: "18px",
  color: "#e6a23c",
  fontWeight: "bold",
  background: "#f5f7fa",
  padding: "10px 15px",
  borderRadius: "8px"
}