<!--
 * @Author: ChenChanghua
 * @Date: 2022-01-25 09:56:46
 * @LastEditors: Please set LastEditors
-->
<script setup>
import coin from "./coin.mp3";
import lose from "./lose.mp3";
import {
  JsvSoundPool,
  jJsvRuntimeBridge,
  JsvAudio,
  globalLoadJsvAudioPlugin,
} from "jsview";
import { onMounted, onBeforeUnmount, shallowRef } from "vue";
import { useRouter } from "vue-router";

import bgMusic from "./bgmusic.mp3";

const router = useRouter();
const soundPool = new JsvSoundPool(10);
let coinController1 = null;
let coinController2 = null;
let loseController1 = null;
let loseController2 = null;
let bgm = shallowRef(null);
const _onKeyDown = (ev) => {
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    router.go(-1); // 有router时，是从DemoHomepage进入，回退
    return true;
  }
  switch (ev.keyCode) {
    case 37:
      if (loseController1) {
        loseController1.play();
      }
      break;
    case 38:
      if (coinController1) {
        coinController1.play();
      }
      break;
    case 39:
      if (loseController2) {
        loseController2.play();
      }
      break;
    case 40:
      if (coinController2) {
        coinController2.play();
      }
      break;
    case 13:
      bgm?.play();
      break;
  }
  return true;
};
soundPool.request(`url(${coin})`, null, 1, (state, audioController) => {
  if (state === 0) {
    coinController1 = audioController;
  }
});
soundPool.request(`url(${coin})`, null, 1, (state, audioController) => {
  if (state === 0) {
    coinController2 = audioController;
    coinController2.setLoop(0);
  }
});

soundPool.request(`url(${lose})`, null, 1, (state, audioController) => {
  if (state === 0) {
    loseController1 = audioController;
  }
});
soundPool.request(`url(${lose})`, null, 1, (state, audioController) => {
  if (state === 0) {
    loseController2 = audioController;
  }
});

const onRef = (ele) => {
  bgm = ele;
};

onMounted(() => {
  jJsvRuntimeBridge.notifyPageLoaded();
  globalLoadJsvAudioPlugin((status) => {
    console.log("load JsvAudio plugin status", status);
  });
});
onBeforeUnmount(() => {
  coinController1 = null;
  coinController2 = null;
  loseController1 = null;
  loseController2 = null;
  soundPool.destroy();
  bgm?.pause();
  bgm?.unload();
});
</script>

<template>
  <jsv-focus-block
    autoFocus
    :onAction="{
      onKeyDown: _onKeyDown,
    }"
  >
    <div :style="{ width: 1920, height: 1080, backgroundColor: '#FFFFFF' }">
      <div
        :style="{
          textAlign: 'center',
          fontSize: 30,
          lineHeight: 50,
          color: '#ffffff',
          left: 100,
          top: 20,
          width: 1280 - 200,
          height: 50,
          backgroundColor: 'rgba(27,38,151,0.8)',
        }"
      >
        {{ `适合游戏场景的多音效混音效果` }}
      </div>
      <div
        :style="{
          left: 400,
          top: 300,
          width: 500,
          height: 500,
          color: '#000000',
          textAlign: 'center',
          fontSize: 30,
        }"
      >
        {{
          `[确定]: 播放背景音乐\n[左]: 播放失败音乐1\n[右]: 播放失败音乐2\n[上]: 播放硬币音乐1\n[下]: 播放硬币音乐2`
        }}
      </div>
      <jsv-audio :onRef="onRef" :src="bgMusic" :loop="true" />
    </div>
  </jsv-focus-block>
</template>