<template>
  <jsv-focus-block autoFocus :onKeyDown="procKeyDown">
    <div class="bgSty">
      <!-- 提示 -->
      <div class="text" :style="{ left: 210, top: 20 }">
        {{
          "操作提示：\n按 左 键减小，\n按 右 键增加，\n按【OK】键恢复初始状态，\n按 返回 键退出"
        }}
      </div>
      <!-- 第一幅图 点九 -->
      <div
        class="logo-bg"
        :style="{
          left: 210,
          top: 200,
        }"
      >
        <!-- 三个背景色块 -->
        <div class="bg1" />
        <div class="bg2" />
        <div class="bg3" />
        <!-- 点九进度条 -->
        <div :style="{ top: 80, left: 0 }">
          <JsvProgressBar
            :width="800"
            :height="84"
            :progress="myProgress"
            :aniTime="0.5"
            :bgcBefore="'rgba(108, 196,187,0.8)'"
            :bgcBehind="'rgba(255,255,255,0.3)'"
          ></JsvProgressBar>
        </div>
        <!-- 图1说明 -->
        <div :style="{ left: 0, top: 26 }" class="text">
          {{ "CanvasTexture配合点九完成" }}
        </div>
        <!-- 第二幅图 clipView -->
        <div :style="{ top: 260 }">
          <JsvProgressBar
            :width="800"
            :height="84"
            :aniTime="0.5"
            :progress="myProgress"
            :bgcBefore="'rgba(108, 196,187,0.8)'"
            :bgcBehind="'rgba(255,255,255,0.3)'"
            :isCanvas="false"
          ></JsvProgressBar>
        </div>
        <!-- 图2说明 -->
        <div :style="{ left: 0, top: 210 }" class="text">
          {{ "ClipView的方式完成" }}
        </div>
      </div>
    </div>
  </jsv-focus-block>
</template>

<script setup>
import { shallowRef } from "vue";
import { JsvProgressBar } from "jsview";

//进度百分比
let myProgress = shallowRef(20);
//按键事件 控制进度条的width
const procKeyDown = (ev) => {
  switch (ev.keyCode) {
    case 37:
      myProgress.value -= 5;
      if (myProgress.value <= 0) {
        myProgress.value = 0;
      }
      break;
    case 39:
      myProgress.value += 5;
      if (myProgress.value >= 100) {
        myProgress.value = 100;
      }
      break;
    case 13:
      myProgress.value = 0;
      break;
    default:
      break;
  }
};
</script>

<style scoped>
.bgSty {
  background-color: #5490d1;
  width: 1280;
  height: 720;
}
.logo-bg {
  width: 800;
  height: 400;
}
.text {
  width: 800;
  height: 200;
  font-size: 24;
  font-weight: bold;
  line-height: 32;
  color: #ffffff;
  text-align: center;
}
.bg1 {
  left: 0;
  top: 0;
  height: 400;
  width: 267;
  background-color: #007f00;
}
.bg2 {
  left: 267;
  top: 0;
  height: 400;
  width: 267;
  background-color: #3049b8;
}
.bg3 {
  left: 534;
  top: 0;
  height: 400;
  width: 266;
  background-color: #d12b8c;
}
</style>
