<!--
 * 【界面概述】
 * 协议书的示例
 *
 * 【技巧说明】
 * Q: 如何长文字div的高度自适应？
 * A: 描画长文字的div的高度不设置即可
 *    并通过element.clientHeight获取渲染后的自动高度，以决定滚动轴的总高度
 *
 * Q: 长段文字如何换行？
 * A: 若文字内容中需要折行，则需要把要显示内容放入字符串中，并加入'\n'来达到换行效果，例如：
 *          <div>{"第一行
 *          第二行"}</div>
 *          =======需要改成=======
 *          <div>{"第一行\n\
 *          第二行"}</div>
 *
 * Q: 文字首行缩进如何做？
 * A: 目前系统只支持通过空格进行首行缩进，行首加入期望的空格数量即可达到缩进，因为盒子字体库和PC不尽相同，
 *    所以务必在盒子上实际测试缩进效果。
 -->

<script setup>
import LongTextScroll from "./LongTextScroll.vue";
import Button from "./Button.vue";
import { jJsvRuntimeBridge } from "jsview";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

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

onMounted(() => {
  jJsvRuntimeBridge.notifyPageLoaded();
});
</script>

<template>
  <jsv-focus-block
    autoFocus
    :onAction="{
      onKeyDown: onKeyDown,
    }"
  >
    <div>
      <div
        :style="{
          textAlign: 'center',
          fontSize: 30,
          lineHeight: 50,
          color: '#ffffff',
          left: 140,
          top: 20,
          width: 1000,
          height: 50,
          backgroundColor: 'rgba(27,38,151,0.8)',
        }"
      >
        可展示篇幅超过一屏的文字(支持触控拖拽)
      </div>
      <div :style="{ left: 140, top: 100 }">
        <LongTextScroll
          :style="{ width: 1000, height: 500, backgroundColor: '#EEEEEE' }"
          :textStyle="{ color: '#000000', fontSize: 20 }"
          :scrollBlockStyle="{
            width: 15,
            height: 30,
            backgroundColor: '#555555',
          }"
          :scrollStyle="{
            left: 1005,
            width: 15,
            height: 500,
            backgroundColor: '#DDDDDD',
          }"
          :step="20"
        >
        </LongTextScroll>
        <div :style="{ left: 400, top: 550 }">
          <Button />
        </div>
      </div>
    </div>
  </jsv-focus-block>
</template>
