<script setup>
import { JsvTextBox } from "jsview";
import { useRouter } from "vue-router";
const router = useRouter();
const TextData = [
  {
    id: 0,
    title: "偏移x,y为0(文字发光)",
    textShadow: "0 0 3 #00FF00",
  },
  {
    id: 1,
    title: "blur为0(不显示阴影)",
    textShadow: "2 2 0 #00FF00",
    /* 此处会报错，为正常情况。
     * 当TextData数据中有blur为0（不显示阴影）时，为了测试会报“StyleFormatCheck.js?058c:447 textShadow: blur shadow above 0(now=2 2 0 #00FF00)”错误
     */
  },
  {
    id: 2,
    title: "rgba格式颜色(半透明红)",
    textShadow: "4 4 3 rgba(255,0,0,0.5)",
  },
  {
    id: 3,
    title: "#格式颜色(蓝色+小数点)",
    textShadow: "4 4 3.3 #0000EF",
  },
]

const onKeyDown = (ev) => {
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
  }
  return true;
}
</script>

<template>
  <jsv-focus-block autoFocus :onAction="{
    onKeyDown: onKeyDown,
  }">
    <div v-for="item in TextData" :key="item.id" :style="{ left: 320 * item.id }">
      <div>
        <div :style="{
          width: 320,
          height: 50,
          fontSize: 25,
          textAlign: 'center',
          lineHeight: 50,
          backgroundColor: item.id % 2 == 0 ? '#00ff00' : '#0000ff',
        }">
          {{ item.title }}
        </div>
        <JsvTextBox :verticalAlign="'middle'" :style="{
          top: 50,
          width: 320,
          height: 70,
          textShadow: item.textShadow,
          backgroundColor: item.id % 2 == 0 ? '#ffffee' : '#ffff10',
          fontSize: 35,
          textAlign: 'center',
          lineHeight: 40,
        }">
          {{ "文字阴影" + item.id }}
        </JsvTextBox>
      </div>
    </div>
  </jsv-focus-block>
</template>