<template>
    <div>
        <JsvPreload :preloadList="props.preload_info" :onPreloadDone="onPreloadDone"></JsvPreload>
        <JsvActorMove :style="{ width: 1280 * 1.5, height: 720, backgroundImage: props.bgImg, }" :control="props.control">
            <div v-for="(item, index) in props.ArrayItem" :style="{
                width: item.length - gapWidth,
                height: 30,
                top: item.top,
                left: item.left,
                backgroundColor: '#FFFFFF',
            }">
                <!-- 红色障碍物 -->
                <div v-if="index === 1" :style="{ width: 70, height: 70, top: -180, left: 400, backgroundColor: '#FF1213' }"
                    :ref="props.ObstacleRef">
                    <div :style="{ top: -50, left: 6, fontSize: 30, color: '#FFFFFF' }">双跳</div>
                    <div :style="{ top: 80, left: 6, fontSize: 30, color: '#FFFFFF' }">下滚</div>
                </div>
                <!-- 上层判定边缘坠落区域 -->
                <div :style="{ width: item.length - gapWidth + 10, height: 5, left: 0, top: -2, backgroundColor: 'rgba(0, 0, 0, 0.5)' }"
                    :ref="props.TopRef">
                </div>
                <!-- 中层判定碰到就恢复奔跑状态的区域 -->
                <div :style="{ width: item.length - gapWidth + 4, height: 24, top: 6, left: -4, backgroundColor: 'rgba(255, 255, 255, 0.5)' }"
                    :ref="props.MidRef">
                </div>
                <!-- 下层碰到地板就死的区域 -->
                <div :style="{ width: item.length - gapWidth, height: 10, left: 0, top: 30, backgroundColor: '#000000' }"
                    :ref="props.BottomRef">
                </div>
                <!-- 追加左边界点判断区域 -->
                <div :style="{ width: 2, height: 10, left: 0, top: 15, backgroundColor: 'rgba(0,0,255,0.5)' }"
                    :ref="props.LeftRef">
                </div>
            </div>
        </JsvActorMove>
    </div>
</template>

<script setup>
import { JsvActorMove, JsvPreload, jJsvRuntimeBridge } from "jsview"
import { gapWidth } from "../Common/Random";
const props = defineProps({
    ArrayItem: Array,
    bgImg: String,
    preload_info: Array,
    control: Object,
    TopRef: null,
    MidRef: null,
    BottomRef: null,
    ObstacleRef: null,
    LeftRef: null,
})

const onPreloadDone = () => {
    //图片加载好后摘掉画布
    jJsvRuntimeBridge.notifyPageLoaded()
}

</script>

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