<script setup>
import { JsvTextBox } from "jsview";

//TODO left, top, width, height无法通过class传递, 待调查
const baseStyle = {
  left: 50,
  width: 1000,
  height: 50,
};

//TODO 此字符串直接写在双花括号内编译出错, 待调查
const text = "测试\\textcolor{#FF0000}{红色并且\\textb{加粗}}文字";
</script>

<template>
  <div :style="{ width: 1920, height: 1080, backgroundColor: '#007788' }"></div>
  <jsv-text-box
    :enableLatex="true"
    :style="{ top: 50, ...baseStyle }"
    class="textStyle"
  >
    {{ "测试\\textcolor{#FF0000}{红色}文字" }}
  </jsv-text-box>
  <jsv-text-box
    :enableLatex="true"
    :style="{ top: 100, ...baseStyle }"
    class="textStyle"
  >
    {{ "测试\\textb{加粗}文字" }}
  </jsv-text-box>
  <jsv-text-box
    :enableLatex="true"
    :style="{ top: 150, ...baseStyle }"
    class="textStyle"
  >
    {{ "测试\\texti{italic}文字" }}
  </jsv-text-box>
  <jsv-text-box
    :enableLatex="true"
    :style="{ top: 200, ...baseStyle }"
    class="textStyle"
  >
    {{ "测试\\textdecoration{underline}{下划线}文字" }}
  </jsv-text-box>
  <jsv-text-box
    :enableLatex="true"
    :style="{ top: 250, ...baseStyle }"
    class="textStyle"
  >
    {{ "测试\\textdecoration{line-through}{删除线}文字" }}
  </jsv-text-box>
  <jsv-text-box
    :enableLatex="true"
    :style="{ top: 300, ...baseStyle }"
    class="textStyle"
  >
    {{ text }}
  </jsv-text-box>

  <div :style="{ top: 350 }">
    <div :style="baseStyle" class="textStyle">0高度是否显示:</div>
    <jsv-text-box
      :enableLatex="true"
      :style="{ width: 500, height: 0, left: 330 }"
      class="textStyle"
    >
      {{ "测试\\textdecoration{line-through}{删除线}文字" }}
    </jsv-text-box>
  </div>
</template>

<style scoped>
.textStyle {
  line-height: 50;
  font-size: 40;
}
</style>
