<template>
  <jsv-focus-block autoFocus ref="App" :onAction="actionDefines">
    <div
      :style="{ width: 1920, height: 1080, overflow: 'hidden', transform: 'scale3d(0.67,0.67,1)', left: -220 * 1.5 + 8, top: -170 - 8 }">
      <JsvPreload :preloadList="preload_info"></JsvPreload>
      <div :style="{ backgroundImage: resourceMap.bg, width: 1920, height: 1080, overflow: 'hidden' }">
        <Score :score="score"></Score>
        <JsvActorMove key="JsvSpriteTranslate" :style="{
          top: 476 * 1.5,
          left: 220 * 1.5,
          width: 194 * 1.5,
          height: 244 * 1.5,
        }" :control=_TranslateControl>
          <div key="kimi" :style="{
            top: 0,
            left: 0,
            width: 194 * 1.5,
            height: 244 * 1.5,
            backgroundImage: kimi,
          }">
            <div key="MoneyBag" ref="moneyBag" :style="{
              top: 22 * 1.3,
              left: 7,
              width: 180 * 1.5,
              height: 100 * 1.5,
              backgroundColor: 'rgba(0,0,0,0)'
            }"></div>
            <div :style="{
              top: 0,
              left: 40 * 1.5,
              width: 81 * 1.5,
              height: 74 * 1.5,
              visibility: scoreMinAnim !== null ? 'visible' : 'hidden',
              backgroundImage: min_score_image,
              animation: scoreMinAnim,
            }" @animationend=_ScoreMinAnimationEnd />
            <div :style="{
              top: 0,
              left: 40 * 1.5,
              width: 81 * 1.5,
              height: 74 * 1.5,
              visibility: scoreAddAnim !== null ? 'visible' : 'hidden',
              backgroundImage: add_score_image,
              animation: scoreAddAnim,
            }" @animationend=_ScoreAddAnimationEnd />
          </div>
        </JsvActorMove>
        <RedPacket :MoneyBag="moneyBag" :onImpactTracer="_onImpactTracer" :_ScoreMinAnimationEnd="_ScoreMinAnimationEnd"
          :_ScoreAddAnimationEnd="_ScoreAddAnimationEnd" />

      </div>
      <!-- 音频 -->
      <JsvAudio key="AudioBg" :src="resourceMap._AudioBgUrl" :loop="true" :onRef="onRef1" :onLoad="audioOnLoad" />

      <JsvAudio v-if="!_DisableEffectSound" :onRef="onRef2" :loop="true" />


    </div>
  </jsv-focus-block>
</template>
<script setup>
/* eslint-disable */
import { JsvFocusBlock, JsvActorMove, JsvActorMoveControl, jJsvRuntimeBridge, JsvPreload, buildPreloadInfo, JsvAudio } from "jsview";
import { shallowRef, onMounted, onBeforeUnmount, provide } from "vue";
import { useRouter } from "vue-router";
import Score from "./components/Score.vue";
import RedPacket from "./components/RedPacket.vue";
import Sound from "./common/Sound.js"
import { getDataUrl } from "../CommonUtils/ResourceData"
//音频Sound
const MySound = new Sound()
//接收是否有DemoResourceBase,没有则正常走公共网络地址。
const DemoResourceBase = getDataUrl()
//预加载信息
const resourceMap = {
  kimi_normal: 'https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/GiftRain/App/kimi_normal.png',
  kimi_smile: 'https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/GiftRain/App/kimi_smile.png',
  kimi_boom: 'https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/GiftRain/App/kimi_boom.png',
  red_packet: 'https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/GiftRain/App/red.png',
  bigRed_packet: 'https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/GiftRain/App/bigred.png',
  boom_image: 'https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/GiftRain/App/boom.png',
  bg: 'https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/GiftRain/App/bg.jpg',
  _ScoreBg: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/GiftRain/App/score_bg.png",
  add1: 'https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/GiftRain/App/add1.png',
  add5: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/GiftRain/App/add5.png",
  min1: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/GiftRain/App/min1.png",
  _AudioBgUrl: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/GiftRain/App/MiniGameBackgroundMusic-redpack.mp3"
}
if (DemoResourceBase) {
  console.log('存在');
  console.log(DemoResourceBase);
  //正则进行替换
  for (let i in resourceMap) {
    //此正则规则是替换掉最后一个 / 前面的字符
    resourceMap[i] = resourceMap[i].replace(/.*\/(.*)/, `${DemoResourceBase}/$1`);
  }
  //修改后暴露给子组件
  provide("resourceMap", resourceMap)
} else {
  //暴露给子组件
  provide("resourceMap", resourceMap)
}
const preload_info = [
  buildPreloadInfo(resourceMap.kimi_normal),
  buildPreloadInfo(resourceMap.kimi_smile),
  buildPreloadInfo(resourceMap.kimi_boom),
  buildPreloadInfo(resourceMap.red_packet),
  buildPreloadInfo(resourceMap.bigRed_packet),
  buildPreloadInfo(resourceMap.boom_image),
  buildPreloadInfo(resourceMap.bg),
  buildPreloadInfo(resourceMap.add1),
  buildPreloadInfo(resourceMap.add5),
  buildPreloadInfo(resourceMap.min1)
];
//定义不需要响应式的变量
let _CurrentRain = null;
//音频ref
let _Audio = null;
//背景音频ref
let _BgAudio = null;
let _IsRunning = false;
let _DisableEffectSound = true;
let _TranslateControl = new JsvActorMoveControl()
//定义需要响应式的变量
let kimi = shallowRef(resourceMap.kimi_normal)
let score = shallowRef(0)
let min_score_image = shallowRef(null)
let add_score_image = shallowRef(null)
let scoreAddAnim = shallowRef(null)
let scoreMinAnim = shallowRef(null)
let moneyBag = shallowRef(null)

//定义扣分结束动画
const _ScoreAddAnimationEnd = (event) => {
  // event.stopPropagation();
  scoreAddAnim.value = null
  console.log(" _ScoreAddAnimationEnd event:", event);
}
//定义加分结束动画
const _ScoreMinAnimationEnd = (event) => {
  // event.stopPropagation();
  scoreMinAnim.value = null
  console.log(" _ScoreMinAnimationEnd event:", event);
}

//定义碰撞函数
const _onImpactTracer = (rain) => {
  if (rain !== null && rain !== _CurrentRain) {
    _CurrentRain = rain;
    console.log("_onImpactTracer rain:", rain);
    switch (rain.type) {
      case 0:
        scoreAddAnim.value = "scoreUp 0.2s";
        kimi.value = resourceMap.kimi_normal;
        add_score_image.value = resourceMap.add1;
        score.value += 1;
        MySound.playGetSound()
        break;
      case 1:
        scoreAddAnim.value = "scoreUp 0.2s";
        kimi.value = resourceMap.kimi_smile;
        add_score_image.value = resourceMap.add5;
        MySound.playGetSound()
        score.value += 5;
        break;
      case 2:
        scoreMinAnim.value = "scoreUp 0.2s";
        min_score_image.value = resourceMap.min1;
        kimi.value = resourceMap.kimi_boom;
        score.value -= 1;
        MySound.playBoomSound()
        if (score.value < 0) {
          score.value = 0;
        }
        break;
      default:
        break;
    }
  }
}
//定义边缘变量，到边缘时不允许触发相应方向的按键事件。
let leftEdge = shallowRef(false)
let rightEgde = shallowRef(false)

//键盘松开时应该暂停动作
const onKeyUp = (ev) => {
  console.log("onKeyUp in : ", ev);
  if (ev.keyCode === 37 || ev.keyCode === 39) {
    _IsRunning = false;
    _TranslateControl.pause((x, y) => {
      console.log(`_TranslateControl pause x:${x}`);
    });
    return true;
  }

  return false;
}
const router = useRouter();
//定义键盘按下
const onKeyDown = (ev) => {
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    router.go(-1)
  } else if (ev.keyCode === 37 && !leftEdge.value) {
    console.log(" ev.keyCode === 37 ");
    if (!_IsRunning) {
      _TranslateControl.moveToX(0, 400 * 1.5, () => leftEdge.value = true);
      _IsRunning = true;
      rightEgde.value = false
    }
  } else if (ev.keyCode === 39 && !rightEgde.value) {
    console.log(" ev.keyCode === 39");
    if (!_IsRunning) {
      _TranslateControl.moveToX((1280 - 220 - 194) * 1.5, 400 * 1.5, () => rightEgde.value = true);
      _IsRunning = true;
      leftEdge.value = false
    }
  }
  return true;
}

//注册
const actionDefines = {
  onKeyDown,
  onKeyUp
}
//定义音频回调
const onRef1 = (ref) => {
  _BgAudio = ref
}
const onRef2 = (ref) => {
  _Audio = ref
}
const audioOnLoad = () => {
  console.log("audio on load")
  _BgAudio.play()
}
onMounted(() => {
  //初始化音效
  MySound.initSound();
  //摘画布
  jJsvRuntimeBridge.notifyPageLoaded();
  window.BgAudio = _BgAudio;
})

//卸载之前摧毁音效
onBeforeUnmount(() => {
  MySound.destroy();
});
</script>
  
<style scoped>
@keyframes scoreUp {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, -20, 0);
  }
}

@keyframes rainDown {
  from {
    transform: translate3d(0, -780, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}
</style>