<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';

const lastItemRef = ref("")
// const messages = "# v-md-editor\n\nVue3 的 markdown 編輯器插件我推薦 [v-md-editor](http://ckang1229.gitee.io/vue-markdown-editor/zh/#%E4%BB%8B%E7%BB%8D)腿椎，正是你看到的這個(gè)文本編輯器，我會(huì)將其保留著夭咬，方便自己使用啃炸。各位客官也可以隨意編輯，反正刷新頁(yè)面后內(nèi)容就不存在了卓舵。"
const messages = [
  {
    "role": "system",
    "content": "假設(shè)你是一個(gè)有用的助手"
  },
  {
    "role": "user",
    "content": "markdown 例子1"
  },
  {
    "content": "# v-md-editor\n\nVue3 的 markdown 編輯器插件我推薦 [v-md-editor](http://ckang1229.gitee.io/vue-markdown-editor/zh/#%E4%BB%8B%E7%BB%8D)南用，正是你看到的這個(gè)文本編輯器，我會(huì)將其保留著掏湾，方便自己使用裹虫。各位客官也可以隨意編輯，反正刷新頁(yè)面后內(nèi)容就不存在了融击。",
    "role": "assistant"
  },
  {
    "role": "user",
    "content": "markdown 例子2"
  },
  {
    "role": "assistant",
    "content": "# title\n```python\nimport json\njson.dumps()\n```\n在 Vue3 中使用 `<script setup>` 實(shí)現(xiàn) markdown-it 渲染 Markdown筑公，你可以使用 `ref` 函數(shù)來(lái)創(chuàng)建一個(gè)響應(yīng)式對(duì)象，然后在組件中使用 `computed` 屬性來(lái)將 Markdown 轉(zhuǎn)換成 HTML尊浪。"
  }
]

const isLastItem = computed(() => {
  return (index: number) => index === messages.length - 1;
})

// 當(dāng)前字符的偏移量十酣，即第 n 個(gè)字符
let offset = 0
let stopTime = 20

const itemTypeWriter = computed(() => {
  return (inputContent: String) => {
  // console.log("inputContent.length: " + inputContent.length)
  
  // 當(dāng)前字符
  let c = ""

  // 定義一個(gè)打字機(jī)函數(shù)：每調(diào)用一次，就打印 1 個(gè)字符际长，從而實(shí)現(xiàn)逐字打印效果
  const typeWriter = () => {
    // console.log("offset2: " + offset)

    if (offset < inputContent.length) {
      c = inputContent.charAt(offset)
      // console.log(c)
      lastItemRef.value += c
      offset++
      // console.log("offset3: " + offset)

      if (c === ",") {
        stopTime = 500
      }
      if (c === "耸采。" || c === "!" || c === "?") {
        stopTime = 1000
      }
      console.log(stopTime)

      // 自我遞歸調(diào)用
      setTimeout(typeWriter, stopTime)
    }
  }

  // 調(diào)用打字機(jī)函數(shù)
  setTimeout(typeWriter, stopTime)
  // console.log("outputConent: " + lastItemRef.value)
  return lastItemRef.value
}
})

</script>

<template>
  <el-row>
    <el-col :span="0"></el-col>
    <el-col :span="24">
      <el-card shadow="hover" v-for="message, index in messages" :key="index" style="border-radius: 0;">
        <v-md-editor v-if="!isLastItem(index)" :model-value="message.content" mode="preview"></v-md-editor>
        <v-md-editor v-if="isLastItem(index)" :model-value="itemTypeWriter(message.content)" mode="preview"></v-md-editor>
      </el-card>
    </el-col>
    <el-col :span="0"></el-col>
  </el-row>
</template>