<template>
  <jsv-focus-block autoFocus :onAction="actionDefines">
    <div class="showName">{{ ` 当前组件： ` + myName }}</div>
    <div class="guide">{{ '按 [1] 切换为Style组件，按 [2] 切换为Class组件，按 [3] 切换数据。' }}</div>
    <StyleShow v-if="index == 0" :style="style" :data="data"></StyleShow>
    <ClassShow v-else :style="style" :data="data"></ClassShow>
  </jsv-focus-block>
</template>

<script setup>
import { reactive, shallowRef, provide } from "vue";
import StyleShow from "./components/StyleShow.vue";
import ClassShow from "./components/ClassShow.vue";

let index = shallowRef(0);

const style = {
  width: 1280,
  height: 720,
  padding: {
    left: 10,
    top: 0,
  },
};
let data = reactive([]);
for (let i = 0; i < 651; i++) {
  data.push({
    width: 140,
    height: 160,
    title: `我是标题${i}`,
  });
}
let change = shallowRef(false);
provide("change", change);

let myName = shallowRef("Style组件");

const onKeyDown = (ev) => {
  switch (ev.keyCode) {
    case 49:
      //切换到style
      index.value = 0;
      myName.value = "Style组件";
      break;
    case 50:
      //切换到class
      index.value = 1;
      myName.value = "Class组件";
      break;
    case 51:
      change.value = !change.value;
      break;
    default:
      break;
  }
};
const actionDefines = {
  onKeyDown,
};
</script>

<style lang="scss" scoped>
.showName {
  top: 0;
  left: 0;
  width: 300;
  height: 40;
  background-color: rgba(255, 255, 255, 0.5);
  font-size: 28;
  line-height: 40;
  z-index: 999;
}
.guide{
  top: 0;
  left: 950;
  width: 330;
  height: 120;
  background-color: rgba(255, 255, 255, 0.5);
  font-size: 28;
  line-height: 40;
  z-index: 999;
}
</style>
