<template>
  <jsv-focus-block :onAction="{ onFocus: mainFocus }" name="main">
    <div class="bgStyle">
      <DispersedItemWidget
        name="dispersed"
        :data="data"
        :initFocusId="2"
        :onEdge="onEdge"
      >
        <template #renderItem="{ data, query, onEdge, onAction }">
          <Item
            :data="data"
            :query="query"
            :onEdge="onEdge"
            :onAction="onAction"
          ></Item>
        </template>
      </DispersedItemWidget>
      <!-- 提示 -->
      <div class="focusText">{{ "初始聚焦: 第2项" }}</div>
      <div class="opText">
        {{
          "操作提示：按上下左右键进行焦点切换，按【OK】键对当前聚焦项进行变色，按【返回】键退出。"
        }}
      </div>
      <div class="specialText">
        {{ "第2项正常情况按右键应为第3项，通过SpecIndex重新设置到了第6项。" }}
      </div>
    </div>
  </jsv-focus-block>
</template>

<script setup>
import { useFocusHub } from "jsview";
import { onMounted } from "vue";
import Item from "./Item.vue";
import DispersedItemWidget from "./DispersedItemWidget/DispersedItemWidget.vue";
let focusHub = useFocusHub();
const data = [
  {
    width: 200,
    height: 100,
    left: 60,
    top: 400,
    color: "#FF1213",
  },
  {
    width: 200,
    height: 100,
    left: 380,
    top: 420,
    color: "#FF1213",
  },
  {
    width: 200,
    height: 100,
    left: 700,
    top: 360,
    color: "#FF1213",
    SpecIndex: {
      right: 6,
    },
  },
  {
    width: 300,
    height: 200,
    left: 900,
    top: 500,
    color: "#FF1213",
  },
  {
    width: 200,
    height: 100,
    left: 1060,
    top: 200,
    color: "#FF1213",
  },
  {
    width: 200,
    height: 100,
    left: 760,
    top: 60,
    color: "#FF1213",
  },
  {
    width: 200,
    height: 100,
    left: 1060,
    top: 380,
    color: "#FF1213",
  },
];

const mainFocus = () => {
  focusHub.setFocus("dispersed");
};

const onEdge = () => {
  console.log("到边缘了无法移动");
};
onMounted(() => {
  focusHub.setFocus("main");
});
</script>

<style lang="scss" scoped>
.bgStyle {
  width: 1280;
  height: 720;
  background-color: #007788;
}
.focusText {
  width: 200;
  height: 26;
  font-size: 24;
  color: #ffffff;
  line-height: 26;
  left: 30;
}
.opText {
  width: 400;
  height: 90;
  font-size: 24;
  color: #ffffff;
  line-height: 26;
  top: 40;
  left: 30;
}
.specialText {
  width: 400;
  height: 90;
  font-size: 24;
  color: #ffffff;
  line-height: 26;
  top: 150;
  left: 30;
}
</style>
