<!--
 * @Author: ChenChanghua
 * @Date: 2022-01-18 18:24:18
 * @LastEditors: ChenChanghua
 * @LastEditTime: 2022-11-10 15:29:12
 * @Description: file content
-->
<script setup>
import { jJsvRuntimeBridge, JsvMarquee } from "jsview";
import { useRouter } from "vue-router";
import { onMounted, shallowRef } from "vue";
import { longLongText, rtlLongLongText } from "./longText";

const slideSpeed = 240;
const width = 600,
  height = 70;
const style = {
  width,
  height,
  lineHeight: 70,
  fontSize: 50,
  color: "#000000",
};
const style2 = Object.assign({ textAlign: "center" }, style);
const style3 = Object.assign({ textAlign: "end" }, style);
const longText =
  "1.石室诗士施氏，嗜狮，誓食十狮。2.施氏时时适市视狮。3.十时，适十狮适市。4.是时，适施氏适市。5.施氏视是十狮，恃矢势，使是十狮逝世。6.氏拾是十狮尸，适石室。7.石室湿，氏使侍拭石室。8.石室拭，施氏始试食是十狮尸。9.食时，始识是十狮尸，实十石狮尸。10.试释是事。";
const shortText = "测试文字";
const littleLongText = "君不见，黄河之水天上来，奔流到海不复回。";
const rtlText = 'ABC انجليزي "abc" سعر الملابس 180 ';

const router = useRouter();
const index = shallowRef(1);
//响应式变化的文字
let changeText = shallowRef("响应式文字");
setInterval(() => {
  if (changeText.value.length <= 20) {
    changeText.value += changeText.value;
  } else {
    changeText.value = changeText.value.slice(0, 5);
  }
}, 5000);
const _onKeyDown = (ev) => {
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    router.go(-1); // 有router时，是从DemoHomepage进入，回退
  } else if (ev.keyCode == 37) {
    index.value = --index.value > 1 ? index.value : 1;
  } else if (ev.keyCode == 39) {
    index.value = ++index.value < 4 ? index.value : 4;
  }
  return true;
};
onMounted(() => {
  jJsvRuntimeBridge.notifyPageLoaded();
});
</script>
<template>
  <jsv-focus-block
    autoFocus
    :onAction="{
      onKeyDown: _onKeyDown,
    }"
    :style="{
      width: 1280,
      height: 720,
      backgroundColor: '#007788',
    }"
  >
    <div v-if="index == 1">
      <div
        :style="{
          left: 50,
          top: 50,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee
          :style="style"
          :text="longText"
          :slideSpeed="slideSpeed"
          :forceSlide="false"
        />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          长文字滚动
        </div>
      </div>
      <div
        :style="{
          left: 50,
          top: 130,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee
          :style="style"
          :text="littleLongText"
          :forceSlide="false"
          :slideSpeed="slideSpeed"
        />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          略长文字滚动
        </div>
      </div>
      <div
        :style="{
          left: 50,
          top: 210,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee
          :style="style"
          :text="shortText"
          :slideSpeed="slideSpeed"
          :forceSlide="true"
        />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          短文字滚动
        </div>
      </div>
      <div
        :style="{
          left: 50,
          top: 290,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee
          :style="{
            width,
            height,
            lineHeight: 70,
            fontSize: 50,
            color: '#000000',
            direction: 'rtl',
          }"
          :text="rtlText"
          :slideSpeed="slideSpeed"
        />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          rtl文字
        </div>
      </div>
      <div
        :style="{
          left: 50,
          top: 370,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee
          :style="{
            width,
            height,
            lineHeight: 70,
            fontSize: 50,
            color: '#000000',
            direction: 'rtl',
          }"
          text="انجليزي"
          :slideSpeed="slideSpeed"
          :forceSlide="true"
        />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          rtl短文字滚动
        </div>
      </div>
      <div
        :style="{
          left: 50,
          top: 450,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee
          :style="style"
          :text="longLongText"
          :slideSpeed="2000"
          :forceSlide="false"
        />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          超长文字
        </div>
      </div>
      <div
        :style="{
          left: 50,
          top: 530,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee
          :style="{
            width,
            height,
            lineHeight: 70,
            fontSize: 50,
            color: '#000000',
            direction: 'rtl',
          }"
          :text="rtlLongLongText"
          :slideSpeed="2000"
          :forceSlide="false"
        />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          超长rtl文字
        </div>
      </div>
      <div
        :style="{
          left: 50,
          top: 610,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee
          :style="{
            width,
            height,
            lineHeight: 70,
            fontSize: 50,
            color: '#000000',
          }"
          text="测试文字"
          :forceSlide="true"
          :slideSpeed="slideSpeed"
          slideDirection="ets"
        />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          反向滚动示例
        </div>
      </div>
    </div>

    <div v-if="index == 2">
      <div
        :style="{
          left: 50,
          top: 50,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee :style="style" :text="shortText" :forceSlide="false" />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          不滚动文字居左
        </div>
      </div>

      <div
        :style="{
          left: 50,
          top: 130,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee
          :style="style2"
          text="测试文字"
          :slideSpeed="slideSpeed"
          :forceSlide="false"
        />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          不滚动文字居中
        </div>
      </div>
      <div
        :style="{
          left: 50,
          top: 210,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee :style="style3" text="测试文字" :forceSlide="false" />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          不滚动文字居右
        </div>
      </div>
      <div
        :style="{
          left: 50,
          top: 290,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee
          :style="style2"
          text="انجليزي"
          :slideSpeed="slideSpeed"
          :forceSlide="false"
        />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          rtl文字不滚动居中
        </div>
      </div>
      <div
        :style="{
          left: 50,
          top: 370,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee
          :style="style3"
          text="انجليزي"
          :slideSpeed="slideSpeed"
          :forceSlide="false"
        />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          rtl文字不滚动居左
        </div>
      </div>
      <div
        :style="{
          left: 50,
          top: 450,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee
          :style="style"
          text="انجليزي"
          :slideSpeed="slideSpeed"
          :forceSlide="false"
        />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          rtl文字不滚动居右
        </div>
      </div>
    </div>

    <div v-else-if="index == 3">
      <div
        :style="{
          left: 50,
          top: 50,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee
          :style="style"
          :text="longText"
          :slideSpeed="slideSpeed"
          :forceSlide="false"
          :textGap="300"
        />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          长文字滚动间隔300
        </div>
      </div>
      <div
        :style="{
          left: 50,
          top: 130,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee
          :style="style"
          :text="littleLongText"
          :forceSlide="false"
          :textGap="300"
          :slideSpeed="slideSpeed"
        />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          略长文字滚动间隔300
        </div>
      </div>
      <div
        :style="{
          left: 50,
          top: 210,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee
          :style="style"
          :text="shortText"
          :slideSpeed="slideSpeed"
          :forceSlide="true"
          :textGap="width - 100"
        />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          短文字滚动间隔500
        </div>
      </div>
      <div
        :style="{
          left: 50,
          top: 290,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee
          :style="{
            width,
            height,
            lineHeight: 70,
            fontSize: 50,
            color: '#000000',
            direction: 'rtl',
          }"
          :text="rtlText"
          :slideSpeed="slideSpeed"
          :textGap="300"
        />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          rtl文字间隔300
        </div>
      </div>
      <div
        :style="{
          left: 50,
          top: 370,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee
          :style="{
            width,
            height,
            lineHeight: 70,
            fontSize: 50,
            color: '#000000',
            direction: 'rtl',
          }"
          text="انجليزي"
          :slideSpeed="slideSpeed"
          :forceSlide="true"
          :textGap="width - 100"
        />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          rtl短文字滚动间隔500
        </div>
      </div>
      <div
        :style="{
          left: 50,
          top: 450,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee
          :style="style"
          :text="longLongText"
          :slideSpeed="2000"
          :forceSlide="false"
          :textGap="300"
        />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          超长文字间隔300
        </div>
      </div>
      <div
        :style="{
          left: 50,
          top: 530,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee
          :style="{
            width,
            height,
            lineHeight: 70,
            fontSize: 50,
            color: '#000000',
            direction: 'rtl',
          }"
          :text="rtlLongLongText"
          :slideSpeed="2000"
          :forceSlide="false"
          :textGap="300"
        />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          超长rtl文字间隔300
        </div>
      </div>
      <div
        :style="{
          left: 50,
          top: 610,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee
          :style="{
            width,
            height,
            lineHeight: 70,
            fontSize: 50,
            color: '#000000',
          }"
          text="测试文字"
          :forceSlide="true"
          :slideSpeed="slideSpeed"
          slideDirection="ets"
          :textGap="width - 100"
        />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          反向滚动示例间隔500
        </div>
      </div>
    </div>
    <div v-else-if="index == 4">
      <div
        :style="{
          left: 50,
          top: 50,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee
          :style="style"
          text="انجليزي"
          :slideSpeed="slideSpeed"
          :forceSlide="true"
          slideDirection="ets"
        />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          rtl短文字反向
        </div>
      </div>
      <div
        :style="{
          left: 50,
          top: 130,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee
          :style="style"
          :text="shortText"
          :slideSpeed="slideSpeed"
          :forceSlide="true"
          :textGap="200"
        />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          短文字滚动失败
        </div>
      </div>
      <div
        :style="{
          left: 50,
          top: 210,
          width: width,
          height: height,
          backgroundColor: '#FFFFFF',
        }"
      >
        <jsv-marquee
          :style="style"
          :text="changeText"
          :slideSpeed="slideSpeed"
          :forceSlide="false"
        />
        <div
          :style="{
            left: width + 20,
            height: height,
            color: '#ffffff',
            fontSize: 50,
            lineHeight: 50,
          }"
        >
          每五秒文字响应式变化
        </div>
      </div>
    </div>
    <div
      :style="{
        left: 1000,
        top: 680,
        width: 300,
        height: 30,
        lineHeight: 28,
        fontSize: 30,
        color: '#000000',
      }"
    >
      {{ "左右键翻页 " + `${index}/4` }}
    </div>
  </jsv-focus-block>
</template>
