<template>
    <div>
        <div key="timer" :style="{
            width: 140 * 1.5,
            height: 140 * 1.5,
            backgroundImage: _ScoreBg,
            top: 40 * 1.5,
            left: 40 * 1.5,
            textAlign: 'center',
            lineHeight: 140 * 1.5,
            color: 'rgba(255,0,0,1.0)',
            fontSize: 72 * 1.5
        }">{{ timer }}</div>
        <SpriteTranslate v-for="(item, index) in itemList" :MoneyBag="props.MoneyBag" :onImpactTracer="onImpactTracer"
            :onDestory="_RemoveItem" :key="`spritetranslate${item.key}`" :item=item />
    </div>
</template>

<script setup>
import { shallowRef, defineProps, onMounted, onBeforeUnmount, inject } from 'vue';
import SpriteTranslate from './SpriteTranslate.vue';
//定义props
const props = defineProps({
    onImpactTracer: Function,
    MoneyBag: Object,
    _ScoreMinAnimationEnd: Function,
    _ScoreAddAnimationEnd: Function
})
//接收
const resourceMap = inject("resourceMap")
let _Index = 0;
// 随机生成列表
const _RedImage = resourceMap.red_packet;
const _BigRedImage = resourceMap.bigRed_packet;
const _BoomImage = resourceMap.boom_image;
const _ScoreBg = resourceMap._ScoreBg;
let itemList = shallowRef([])
let timer = shallowRef(60)
const onImpactTracer = props.onImpactTracer;
let _TimerOutId = null;
let _GameTimerID = null;
let _IsRunning = shallowRef(false);

//定义随机加入的item
const addRandomItemList = () => {
    const total_num = 1;
    let ret_obj = "";
    for (let i = 0; i < total_num; i++) {
        const random_index = Math.floor(Math.random() * 3);
        const duration = 2 + Math.floor(Math.random() * 2);
        const index = ++_Index;
        const left = 300 * 1.5 + Math.floor(Math.random() * (1280 - 500) * 1.5);
        const top = -20 * 1.5;

        switch (random_index) {
            case 0:
                ret_obj = {
                    key: index.toString(), type: 0, src: _RedImage, left, top, width: 87, height: 118, duration,
                };
                break;
            case 1:
                ret_obj = {
                    key: index.toString(), type: 1, src: _BigRedImage, left, top, width: 210, height: 114, duration,
                };
                break;
            case 2:
                ret_obj = {
                    key: index.toString(), type: 2, src: _BoomImage, left, top, width: 100, height: 116, duration
                };
                break;
            default:
                break;
        }

        console.log("initRandomItemList ret_obj:", ret_obj);
        itemList.value.push(ret_obj);
    }
}
// addRandomItemList();



const startTimer = () => {
    _TimerOutId = setInterval(() => {
        console.log('timmmm', timer.value);
        timer.value = timer.value - 1;
        if (timer.value === 0) {
            stopGame();
            itemList.value = []
        }
    }, 1000);
}

const startGame = () => {
    console.log("startGame ");
    _IsRunning.value = true;
    _Refresh();
}

const stopGame = () => {
    console.log("stopGame ");
    _IsRunning.value = false;
    if (_TimerOutId !== null) {
        clearInterval(_TimerOutId);
        _TimerOutId = null;
    }
    //停止游戏时动画也应该停止
    props._ScoreMinAnimationEnd()
    props._ScoreAddAnimationEnd()
}

const _RemoveItem = (key) => {
    console.log("_RemoveItem in itemList.length:", itemList.value.length);
    for (let i = 0; i < itemList.value.length; i++) {
        if (itemList.value[i].key === key) {
            const item = itemList.value[i];
            if (item.sensor) {
                item.sensor.Recycle();
            }
            console.log("_RemoveItem key:", itemList.value[i].key);
            itemList.value.splice(i, 1);
            break;
        }
    }
    console.log("_RemoveItem out itemList.length:", itemList.value.length);
}

const _Refresh = () => {
    if (_IsRunning.value === false) {
        return;
    }
    const delay = 500;// Math.floor(Math.random()*600);
    _GameTimerID = setTimeout(() => {
        if (_IsRunning.value === true) {
            addRandomItemList();
            _Refresh();
        }
    }, delay);
}


onMounted(() => {
    console.log("render itemList.length:", itemList.value.length);
    startGame();
    startTimer();
})

onBeforeUnmount(() => {
    if (_GameTimerID !== null) {
        clearInterval(_GameTimerID);
        _GameTimerID = null;
    }

    if (_TimerOutId !== null) {
        clearInterval(_TimerOutId);
        _TimerOutId = null;
    }

    stopGame();
})
</script>

<style scoped></style>