<template>
  <div :class="[changePoster,changeBg,changeSize]">
    <!-- 主标题 -->
    <div :class="changeTitle">
      {{ props.data.title }}
    </div>
    <!-- 简介 -->
    <JsvMarquee
    :style="props.data.marqueeData"
    :text="props.data.text"
    :slideSpeed="100"
    :forceSlide="true"
    />
    </div>
</template>

<script setup>
import { shallowRef,onMounted } from "vue";
import { JsvMarquee,useFocusHub} from "jsview"
const props = defineProps({
  data: Object,
  query: Object,
  onEdge: Function,
  onAction: Object,
  getStyleClass: Function,
  num: Number,
});
const focusHub = useFocusHub();
let changeBg = shallowRef('')
let changeSize=shallowRef('')
let changePoster = shallowRef('')
let changeTitle =shallowRef('')


changePoster.value = `poster${props.num}`
changeTitle.value = `title${props.num}`
const onFocus = () => {
  changeBg.value =`focusBg${props.num}`
  changeSize.value='grow'
};

const onBlur = () => {
  changeBg.value =`blurBg1${props.num}` 
  changeSize.value = ""
};

props.onAction.register("onFocus", onFocus);
props.onAction.register("onBlur", onBlur);
props.onAction.register("onEdge", props.onEdge);
onMounted(()=>{
  focusHub.setFocus('floor1')
})
</script>

<style lang="scss" scoped></style>
