<template>
    <JsvActorMove :key="`translate${item.key}`" ref="translateF"
        :style="{ left: item.left, top: item.top, width: item.width, height: item.height }" :control="_Control">
        <div :key="`bg${item.key}`" ref="translate"
            :style="{ backgroundImage: `url(${item.src})`, left: 0, top: 0, width: item.width, height: item.height }" />
    </JsvActorMove>
</template>

<script setup>
import { shallowRef, defineProps, onMounted, onBeforeMount } from 'vue';
import { JsvActorMove, JsvActorMoveControl, createImpactTracer, createImpactCallback, createImpactAutoFroze } from 'jsview'
//定义子ref
let translate = shallowRef(null)
//定义父ref
let translateF=shallowRef(null)
//定义props
const props = defineProps({
    onDestory: Function,
    item: Object,
    onImpactTracer: Function,
    MoneyBag: Object
})
const control = new JsvActorMoveControl();
const _Control = control;
const item = props.item;
//销毁方法
const _onDestroy = () => {
    if (props.onDestory) {
        props.onDestory(props.item.key);
    }
}

let sensor = null;

const _InitItemEle = (item, ele) => {
    if (ele && !item.ele) {
        item.ele = ele;
        if (props.MoneyBag) {
            const giftrain_sensor = createImpactTracer(props.MoneyBag, ele, createImpactCallback(
                () => {
                    props.onImpactTracer(item);
                    _onDestroy();
                },
            ),        //碰撞即停
                createImpactAutoFroze(
                    [props.MoneyBag,translateF.value.mainDiv],
                    null
                )
            );
            sensor = giftrain_sensor;
        }
    }
}


//挂载时初始化
onMounted(() => {
    _InitItemEle(item, translate.value)
    _Control.moveToY(720 * 1.5 + 30, 720 * 1.5 / item.duration, () => {
        _onDestroy();
    });
})
//卸载之前释放碰撞监听者
onBeforeMount(()=>{
    if(sensor!=null){
    sensor.Recycle()
    sensor=null
    }
})
</script>

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