<template>
  <div class="root">
    <!-- 提示 -->
    <div class="title">{{ "离散焦点控制" }}</div>
    <div class="prompt">
      {{
        "操作提示：按上下左右键进行焦点切换，\n" +
        "按【OK】键对当前聚焦项进行变色，\n" +
        "按【返回】键退出。"
      }}
    </div>

    <div class="group">
    <!-- namespace 使用autoFocus有bug, 移动时不能定位currentFocusNode -->
    <!-- <jsv-focus-block namespace="focus-group"> -->
        <Button v-for="(style, index) in data"
          :style="style"
          :auto-focus="index == 0"
          @click="(button) => onClick(button, index)"
          @focus="(button, focused) => onFocusChange(button, focused, index)">
          {{ ` index: ${index}\n pos: ${style.left}/${style.top}\n size: ${style.width}/${style.height}` }}
        </Button>
    <!-- </jsv-focus-block> -->
    </div>
  </div>
</template>

<script setup>
import { data } from "./data.js";
import Button from "./Button.vue";

const onClick = (button, index) => {
  console.log("onClick triggered. Button " + index);
}

const onFocusChange = (button, focused, index) => {
  console.log("onFocusChange triggered. Button " + index + " change to " + focused);
}
</script>

<style lang="scss" scoped>
.root {
  width: 1280;
  height: 720;
  background-color: #007788;
}
.title {
  width: 200;
  height: 26;
  font-size: 24;
  color: #ffffff;
  line-height: 26;
  left: 30;
}
.prompt {
  width: 500;
  height: 90;
  font-size: 24;
  color: #ffffff;
  line-height: 26;
  top: 40;
  left: 30;
}
.group {
  top: 80;
}
</style>
