<!--
 * @Author: xiejiang
 * @Date: 2024-11-05 10:14:56
 * @LastEditors: xiejiang
 * @LastEditTime: 2025-03-25 15:57:55
 * @Description: 首页
 * Copyright（c）2024 by 好老师教育科技有限公司 All right Reserved.
-->
<template>
  <div class="article-content" id="article-content"></div>
</template>

<script setup lang="ts" name="home">
import markdownIt from '@/utils/markdown'
import { deepCloneAndUpdate, buildCodeBlock } from '@/utils/markdown/code-block'
import { formatOutputKatex } from '@/utils'

let htmlData: string = ''
let el: HTMLElement | null = null
let isRendering = false
const renderQueue: string[] = []

/** Step 4. 渲染markdown的 HTML Element. */
const renderMarkdown = (data: string) => {
  if (!el) el = document.getElementById('article-content')
  if (!el) return

  const tmpDiv = document.createElement('div')
  tmpDiv.innerHTML = markdownIt.render(formatOutputKatex(data)) // 只渲染当前的块
  buildCodeBlock(tmpDiv)

  // 这里不再拼接 htmlData，而是每次渲染独立的块
  deepCloneAndUpdate(el, tmpDiv)
}

/** Step 3. 处理异步渲染 */
const processRenderQueue = () => {
  if (renderQueue.length === 0) {
    isRendering = false // 队列为空时标记渲染完成
    return
  }

  const data = renderQueue.shift() // 获取并移除队列中的第一个渲染任务
  if (data !== undefined) {
    // 确保数据有效
    renderMarkdown(data) // 执行渲染操作
  }

  // 继续处理下一个渲染任务
  setTimeout(processRenderQueue, 0)
}

/** Step 2. 异步队列控制渲染 */
const enqueueRender = (data: string) => {
  if (!data) return // 避免空数据被添加
  htmlData += data
  renderQueue.push(htmlData)
  // 如果当前没有渲染任务在进行，启动渲染队列
  if (!isRendering) {
    isRendering = true
    processRenderQueue()
  }
}

onMounted(() => {
  enqueueRender(
    '# Math Rulez! \n $\\sqrt[3x-1]+(1+x)^2$ 🎉当然！以下是一个使用Python实现的冒泡排序算法的示例：\n\n```python\ndef bubble_sort(arr):\n    n = len(arr)\n    # 遍历所有数组元素\n    for i in range(n):\n        # 最后i个元素已经是有序的\n        for j in range(0, n-i-1):\n            # 如果当前元素大于下一个元素，则交换它们测试最大的长度 ============================================================================================================ ==========\n            if arr[j] > arr[j+1]:\n                arr[j], arr[j+1] = arr[j+1], arr[j]\n        # 打印每一轮排序结果用于调试\n        print(f"第{i+1}轮排序结果: {arr}")\n    return arr\n\n# 示例数组\narr = [64, 34, 25, 12, 22, 11, 90]\nprint("初始数组:", arr)\n\n# 调用冒泡排序函数\nsorted_arr = bubble_sort(arr)\nprint("排序后的数组:", sorted_arr)\n```\n\n在这个代码中：\n1. `bubble_sort`函数接受一个列表作为参数，并对其进行冒泡排序。\n2. 外层循环控制遍历的轮数。\n3. 内层循环用于比较和交换相邻的元素。\n4. 每一轮结束后，最大的元素都会被“冒泡”到列表的末尾。\n5. 在排序过程中，会打印出每一轮排序的中间结果，方便调试和观察排序过程。\n\n运行此代码将会输出每一轮排序后的数组状态，最终输出完全排序的数组。'
  )

  // enqueueRender(
  //   '非偶函数的定义是，如果一个函数 \\( f(x) \\) 满足 \\( f(-x) = -f(x) \\) 对所有 \\( x \\) 成立，那么这个函数就是非偶函数。对于偶函数，则满足 \\( f(-x) = f(x) \\)。\n\n给定的函数是 \\( y = x^2(1 - x^2) \\)。首先我们检查这个函数是否为非偶函数：\n\n计算 \\( f(-x) \\)：\n\\[ f(-x) = (-x)^2(1 - (-x)^2) \\]\n\\[ f(-x) = x^2(1 - x^2) \\]\n\n显然，\\( f(-x) = x^2(1 - x^2) = f(x) \\)，这意味着该函数是偶函数，而不是非偶函数。\n\n接下来，我们求解这个函数。注意到这个函数是一个三次多项式函数，我们可以通过展开和因式分解来求解。\n\n展开原函数：\n\\[ y = x^2(1 - x^2) \\]\n\\[ y = x^2 - x^4 \\]\n\n这是一个关于 \\( x \\) 的三次多项式，我们可以将其因式分解来求解：\n\n\\[ y = x^2(1 - x^2) \\]\n\\[ y = x^2(1 - x)(1 + x) \\]\n\n令 \\( y = 0 \\)，我们得到：\n\n\\[ x^2 = 0  \\quad \\Rightarrow \\quad \\] 或 \\[\\quad (1 - x)(1 + x) = 0 \\]\n\n解得：\n\\[ x = 0 \\]\n\\[ 1 - x = 0 \\quad \\Rightarrow \\quad x = 1 \\]\n\\[ 1 + x = 0 \\quad \\Rightarrow \\quad x = -1 \\]\n\n因此，函数 \\( y = x^2(1 - x^2) \\) 的解是 \\( x = -1, 0, 1 \\)'
  // )
})
</script>
