<template>
  <div class="direction">
    {{
      "操作指南：按 [1] 切换json文件，按 [2] 删除第二个背景色class。可通过方向键移动。 当前json: " +
      styleText
    }}
  </div>
  <div class="myEffect">{{ "当前效果: " + effectText + " " + deletText }}</div>
  <FloorList name="FloorList" :focusHub="focusHub" :changeStyle="changeStyle" :getStyleClass="getStyleClass"
    :deleteStyleClass="deleteStyleClass" :changeDeletText="changeDeletText" :changeCount="changeCount" :key="count">
  </FloorList>
</template>

<script setup>
import { shallowRef, provide, reactive, onBeforeUnmount } from "vue";
import { useFocusHub, JsvStyleSheetsDeclarer } from "jsview";
import FloorList from "./components/FloorList.vue";
import style1 from "./style1.json";
import style2 from "./style2.json";

let style = shallowRef(style1);
let styleText = shallowRef("style1.json");
let deletText = shallowRef("未删除第二个class背景色");
let effectArray = [
  "整体字体更大，标题颜色变化，聚焦颜色：土黄色以及绿色。",
  "整体文字变小，标题颜色变化，聚焦颜色：粉色以及荧光绿色。",
];
let sureDelete = shallowRef(false)
provide('sureDelete', sureDelete)
let effectText = shallowRef(effectArray[0]);
const focusHub = useFocusHub();
let count = shallowRef(0)
const changeCount = () => {
  count.value += 1;
};

const changeStyle = () => {
  style.value = style.value == style1 ? style2 : style1;
  styleText.value = style.value == style1 ? "style1.json" : "style2.json";
  effectText.value = style.value == style1 ? effectArray[0] : effectArray[1];
};
const changeDeletText = () => {
  console.log('sureDelete.value', sureDelete.value);
  if (sureDelete.value == true) {
    deletText.value = "已删除第二个class背景色";
  } else {
    deletText.value = "未删除第二个class背景色";
  }
};
const getStyleClass = () => {
  for (let className in style.value) {
    const styleProperties = style.value[className];
    JsvStyleSheetsDeclarer.DeclareClass(className, styleProperties);
  }
};
getStyleClass();

const deleteStyleClass = () => {
  for (let className in style.value) {
    JsvStyleSheetsDeclarer.UndeclareClass(`${className}`);
  }
};

let data1 = reactive([]);
let data2 = reactive([]);
let data3 = reactive([]);
const dataShow = (dataNum, data, length) => {
  dataNum.splice(0, dataNum.length);
  for (let i = 0; i < length; i++) {
    const item = {
      index: i,
      ...data,
      title: `我是标题${i}`,
      text: `我是跑马灯简介我是跑马灯简介我是跑马灯简介${i}`,
    };
    dataNum.push(item);
  }
};
dataShow(data1, style.value.floor1Metro.data, 5);
dataShow(data2, style.value.floor2Metro.data, 2);
dataShow(data3, style.value.floor3Metro.data, 8);

provide("data1", data1);
provide("data2", data2);
provide("data3", data3);
provide("style", style);
focusHub.enableFocusTrace(true)
onBeforeUnmount(() => {
  deleteStyleClass();
});
</script>

<style lang="scss" scoped>
.direction {
  top: 10;
  left: 0;
  width: 1280;
  height: 36;
  font-size: 26;
  line-height: 36;
  z-index: 999;
  color: #0000ff;
}

.myEffect {
  top: 50;
  left: 0;
  width: 1280;
  height: 30;
  line-height: 30;
  font-size: 26;
  z-index: 999;
  color: #ff0000;
}
</style>
