<template>
  <jsv-focus-block autoFocus :onAction="actionDefines">
    <div :class="[bg, bg1]">
      <metro-widget
        name="floor"
        :width="style.bg.width"
        :height="style.bg.height"
        :data="data"
        :direction="VERTICAL"
        :measures="measures"
        :onEdge="onEdge1"
        :sendFocusRectEvent="true"
        :slideSetting="slideSetting"
        :on-focus="onFocus"
        layout-type="absolute"
      >
        <template #renderItem="{ data, query, onEdge, onAction }">
          <!-- 楼层1 -->
          <div :class="floor1Bg">
            <metro-widget
              name="floor1"
              :width="style.floor1Metro.width"
              :height="style.floor1Metro.height + 20"
              :data="data1"
              :direction="HORIZONTAL"
              :measures="measures"
              :onEdge="onEdge1"
              :padding="style.floor1Metro.padding"
              :sendFocusRectEvent="true"
            >
              <template #renderItem="{ data, query, onEdge, onAction }">
                <FloorItem
                  :data="data"
                  :query="query"
                  :onEdge="onEdge"
                  :onAction="onAction"
                  :num="1"
                />
              </template>
            </metro-widget>
          </div>
          <!-- 楼层2 -->
          <div :class="floor2Bg">
            <metro-widget
              name="floor2"
              :width="style.floor2Metro.width"
              :height="style.floor2Metro.height + 20"
              :data="data2"
              :direction="HORIZONTAL"
              :measures="measures"
              :onEdge="onEdge2"
              :padding="style.floor2Metro.padding"
              :sendFocusRectEvent="true"
            >
              <template #renderItem="{ data, query, onEdge, onAction }">
                <FloorItem
                  :data="data"
                  :query="query"
                  :onEdge="onEdge"
                  :onAction="onAction"
                  :num="2"
                />
              </template>
            </metro-widget>
          </div>
          <!-- 楼层3 -->
          <div :class="floor3Bg">
            <metro-widget
              name="floor3"
              :width="style.floor3Metro.width"
              :height="style.floor3Metro.height + 20"
              :data="data3"
              :direction="HORIZONTAL"
              :measures="measures1"
              :onEdge="onEdge3"
              :padding="style.floor3Metro.padding"
              :sendFocusRectEvent="true"
            >
              <template #renderItem="{ data, query, onEdge, onAction }">
                <FloorItem
                  :data="data"
                  :query="query"
                  :onEdge="onEdge"
                  :onAction="onAction"
                  :num="3"
                />
              </template>
            </metro-widget>
          </div>
        </template>
      </metro-widget>
    </div>
  </jsv-focus-block>
</template>
<script setup>
/* eslint-disable */
import {
  MetroWidget,
  VERTICAL,
  HORIZONTAL,
  EdgeDirection,
  METRO_WIDGET_CONST,
  SeamlessSlide,
} from "jsview";
import {
  onMounted,
  ref,
  inject,
} from "vue";
import FloorItem from "./FloorItem.vue";

const props = defineProps({
  changeCount: Function,
  focusHub: Object,
  changeStyle: Function,
  getStyleClass: Function,
  deleteStyleClass: Function,
  changeDeletText: Function,
});
const slideSetting = new SeamlessSlide({ startPercent: 0.2, endPercent: 0.8 });

let bg = ref("");
let bg1 = ref("");
let floor1Bg = ref("");
let floor2Bg = ref("");
let floor3Bg = ref("");
let style = inject("style");
let sureDelete = inject("sureDelete");
const data = [
  {
    width: 1280,
    height: 1350,
    top: 0,
    left: 0,
  },
];
let data1 = inject("data1");
let data2 = inject("data2");
let data3 = inject("data3");

const measures = (item) => {
  return {
    ...item,
    focusable: true,
    itemSlide: METRO_WIDGET_CONST.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT,
  };
};
const measures1 = (item) => {
  return {
    ...item,
    focusable: true,
    itemSlide: METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS,
  };
};

const onEdge1 = (edgeInfo) => {
  if (edgeInfo.direction == EdgeDirection.bottom) {
    props.focusHub.setFocus("floor2");
  }
};
const onEdge2 = (edgeInfo) => {
  if (edgeInfo.direction == EdgeDirection.bottom) {
    props.focusHub.setFocus("floor3");
  } else if (edgeInfo.direction == EdgeDirection.top) {
    props.focusHub.setFocus("floor1");
  }
};

const onEdge3 = (edgeInfo) => {
  if (edgeInfo.direction == EdgeDirection.top) {
    props.focusHub.setFocus("floor2");
  }
};

const onKeyDown = (ev) => {
  switch (ev.keyCode) {
    case 49:
      sureDelete.value = false;
      props.changeDeletText();
      props.changeStyle();
      props.getStyleClass();
      props.changeCount();
      break;
    case 50:
      bg1.value = "";
      sureDelete.value = true;
      props.changeDeletText();
      break;
    default:
      break;
  }
};
const actionDefines = {
  onKeyDown,
};
const onFocus = () => {
  props.focusHub.setFocus("floor1");
};

bg.value = "bg";
floor1Bg.value = "floor1-bg";
floor2Bg.value = "floor2-bg";
floor3Bg.value = "floor3-bg";
bg1.value = "bg1";

onMounted(() => {
  props.focusHub.setFocus("floor1");
});
</script>
<style></style>
