<template>
  <jsv-focus-block autoFocus :onKeyDown="procKeyDown">
    <div class="bgSty">
      <!-- 提示 -->
      <div class="text" :style="{ left: 210, top: 20 }">
        {{
          "操作提示：\n触控进行左右拖拽\n点击进度条空白处游标直接跳过去\n按 返回 键退出"
        }}
      </div>
      <div
        class="logo-bg"
        :style="{
          left: 210,
          top: 160,
        }"
      >
        <!-- 三个背景色块,用来确认进度条的透明度 -->
        <div class="bg1" />
        <div class="bg2" />
        <div class="bg3" />
        <!-- 进度条 -->
        <SizeDivBar :top="80" :left="0" />
        <ClipBar :top="210" :left="0" />
        <NinePatchBar :top="340" :left="0" />
        <!-- 图1说明 -->
        <div :style="{ left: 0, top: 26 }" class="text">
          {{ "pin模式下拖拽(拖动点尺寸略大于进度条)" }}
        </div>
      </div>
    </div>
  </jsv-focus-block>
</template>

<script setup>
import { shallowRef, onMounted } from "vue";
import NoBackgroundBar from "./NoBackgroundBar.vue";
import ClipBar from "./ClipBar.vue";
import NinePatchBar from "./NinePatchBar.vue";
import SizeDivBar from "./SizeDivBar.vue";

// //进度百分比
// 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;
  //   }
};

onMounted(() => {});
</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: 500;
  width: 267;
  background-color: #007f00;
}
.bg2 {
  left: 267;
  top: 0;
  height: 500;
  width: 267;
  background-color: #3049b8;
}
.bg3 {
  left: 534;
  top: 0;
  height: 500;
  width: 266;
  background-color: #d12b8c;
}
</style>
