<template>
  <jsv-focus-block autoFocus :onAction="{ onKeyDown }"></jsv-focus-block>
  <gray-filter
    :open="openFilter"
    :left="50"
    :top="50"
    :width="400"
    :height="400"
  >
    <div
      :style="{
        width: 400,
        height: 400,
        backgroundColor: '#00ffff',
      }"
    >
      <img
        :src="`url(${imageUrl})`"
        :style="{
          width: 300,
          height: 300,
        }"
      />
      <div
        :style="{
          top: 320,
          width: 300,
          height: 100,
          color: '#ff0000',
          fontSize: 30,
        }"
      >
        按OK键切换
      </div>
    </div>
  </gray-filter>
</template>
<script setup>
import GrayFilter from "./GrayFilter.vue";
import { ref } from "vue";

const imageUrl = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/GrayFilter/App/jpegDemo.jpeg";
const openFilter = ref(false);
const onKeyDown = (ev) => {
  if (ev.keyCode == 13) {
    openFilter.value = !openFilter.value;
    return true;
  }
  return false;
};
</script>
