<script setup>
import { ref, computed } from "vue";
import { JsvLatex, globalLoadJsvLatexPlugin, processLatexStr } from "jsview";

globalLoadJsvLatexPlugin((status) => {
  console.log("load JsvLatex plugin status", status);
});

const stringList = [
  {
    width: 800,
    str: `\\begin{array}{l}
  \\textbf{测试}文字 \\forall\\varepsilon\\in\\mathbb{R}_+^*\\ \\exists\\eta>0\\ |x-x_0|\\leq\\eta\\Longrightarrow|f(x)-f(x_0)|\\leq\\varepsilon测试文字\\\\
  测试文字\\det
  \\begin{bmatrix}
      a_{11}&a_{12}&\\cdots&a_{1n}\\\\
      a_{21}&\\ddots&&\\vdots\\\\
      \\vdots&&\\ddots&\\vdots\\\\
      a_{n1}&\\cdots&\\cdots&a_{nn}
  \\end{bmatrix}
  \\overset{\\mathrm{def}}{=}\\sum_{\\sigma\\in\\mathfrak{S}_n}\\varepsilon(\\sigma)\\prod_{k=1}^n a_{k\\sigma(k)}\\\\
  \\sideset{_\\alpha^\\beta}{_\\gamma^\\delta}{\\begin{pmatrix}a&b\\\\c&d\\end{pmatrix}}\\\\
  \\int_0^\\infty{x^{2n} e^{-a x^2}\\,dx} = \\frac{2n-1}{2a} 
      \\int_0^\\infty{x^{2(n-1)} e^{-a x^2}\\,dx} = \\frac{(2n-1)!!}{2^{n+1}} \\sqrt{\\frac{\\pi}{a^{2n+1}}}\\\\
  \\int_a^b{f(x)\\,dx} = (b - a) \\sum\\limits_{n = 1}^\\infty  
      {\\sum\\limits_{m = 1}^{2^n  - 1} {\\left( { - 1} \\right)^{m + 1} } } 2^{ - n} f(a + m\\left( {b - a} \\right)2^{-n} )\\\\
  \\int_{-\\pi}^{\\pi} \\sin(\\alpha x) \\sin^n(\\beta x) dx = \\textstyle{\\left \\{
      \\begin{array}{cc}
          (-1)^{(n+1)/2} (-1)^m \\frac{2 \\pi}{2^n} \\binom{n}{m} & n \\mbox{ odd},\\ \\alpha = \\beta (2m-n) \\\\
          0 & \\mbox{otherwise} \\\\ \\end{array} \\right .}\\\\
  L = \\int_a^b \\sqrt{ \\left|\\sum_{i,j=1}^ng_{ij}(\\gamma(t))\\left(\\frac{d}{dt}x^i\\circ\\gamma(t)\\right)
      \\left(\\frac{d}{dt}x^j\\circ\\gamma(t)\\right)\\right|}\\,dt\\\\
  \\begin{array}{rl}
      s &= \\int_a^b\\left\\|\\frac{d}{dt}\\vec{r}\\,(u(t),v(t))\\right\\|\\,dt \\\\
      &= \\int_a^b \\sqrt{u'(t)^2\\,\\vec{r}_u\\cdot\\vec{r}_u + 2u'(t)v'(t)\\, \\vec{r}_u\\cdot
          \\vec{r}_v+ v'(t)^2\\,\\vec{r}_v\\cdot\\vec{r}_v}\\,\\,\\, dt. 
  \\end{array}\\\\
\\end{array}`,
  },
  {
    width: 1100,
    str: `要解这个方程 \\(x^2 + 2x + 1 = 9\\)，我们首先将方程移项，得到：

\\[x^2 + 2x + 1 - 9 = 0\\]

简化后得到：

\\[x^2 + 2x - 8 = 0\\]

在这个方程中，\\(a = 1\\), \\(b = 2\\), \\(c = -8\\)。代入求根公式：

\\[x = \\frac{-2 \\pm \\sqrt{2^2 - 4 \\cdot 1 \\cdot (-8)}}{2 \\cdot 1}\\]

\\[x = \\frac{-2 \\pm \\sqrt{4 + 32}}{2}\\]

\\[x = \\frac{-2 \\pm \\sqrt{36}}{2}\\]

\\[x = \\frac{-2 \\pm 6}{2}\\]
这给出了两个解：

\\[x_1 = \\frac{-2 + 6}{2} = 2\\]

\\[x_2 = \\frac{-2 - 6}{2} = -4\\]

所以，方程 \\(x^2 + 2x + 1 = 9\\) 的解是 \\(x = 2\\) 和 \\(x = -4\\)。`,
  },
  {
    width: 1100,
    str: `当然可以，这里有一个涉及正弦和余弦的三角函数问题：

在一个直角三角形中，一个角的正弦值是 \\(\\frac{3}{5}\\)，余弦值是 \\(\\frac{4}{5}\\)。请计算这个角的正切值和余切值。

提示：正切值 \\(\\tan(\\theta)\\) 可以通过正弦和余弦的比值来计算，即 \\(\\tan(\\theta) = \\frac{\\sin(\\theta)}{\\cos(\\theta)}\\)。余切值 \\(\\cot(\\theta)\\) 是正切值的倒数，即 \\(\\cot(\\theta) = \\frac{1}{\\tan(\\theta)}\\)。

请计算这个角的正切值和余切值。
\\[ \\tan(\\theta) = 0.75 \\]
\\[ \\cot(\\theta) = 1.33333333 \\]

这个角的正切值是 \\(0.75\\)，余切值是 \\(1.33333333\\)。`,
  },
];
const dataIndex = ref(0);
const width = computed(() => {
  return stringList[dataIndex.value].width;
});

const latexStr = computed(() => {
  const s = stringList[dataIndex.value].str;
  // return s.replaceAll(/(?<!\\\\)[\n]+/g, "\\\\");
  return processLatexStr(s);
});

const onKeyDown = (ev) => {
  switch (ev.keyCode) {
    case 37:
      dataIndex.value =
        dataIndex.value > 0 ? dataIndex.value - 1 : stringList.length - 1;
      return true;
    case 39:
      dataIndex.value =
        dataIndex.value < stringList.length - 1 ? dataIndex.value + 1 : 0;
      return true;
    default:
      return false;
  }
};
</script>
<template>
  <jsv-focus-block
    autoFocus
    :onAction="{
      onKeyDown,
    }"
    :style="{
      width: 1280,
      height: 720,
      backgroundColor: '#007788',
    }"
  ></jsv-focus-block>
  <jsv-latex
    :key="dataIndex"
    :latexStr="latexStr"
    :top="20"
    :left="20"
    :width="width"
    :fontSize="25"
    color="#FFFFFF"
  ></jsv-latex>
  <div
    :style="{
      width: 300,
      height: 100,
      left: 900,
      top: 650,
      color: '#ffffff',
      fontSize: 30,
    }"
  >
    按左右键切换内容
  </div>
</template>

<style scoped>
@keyframes test-translate {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(100, 0, 0);
  }
}
</style>
