<script setup>
import ScssApp from './Scss/App.vue';
import LessApp from './Less/App.vue';
import StylusApp from './Stylus/App.vue';
import { useRouter } from "vue-router";
import { reactive } from "vue"
const router = useRouter();
const panelInfo = reactive({
  index: 1,
  total: 3,
  desc: "1/3",
})
const onKeyDown = (ev) => {
  console.log('onKeyDown');
  // 8:Backspace, 27:Escape, 10000:盒子返回键
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    console.log("Basic has router: ", !!router)
    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
    return true;
  } else if (ev.keyCode == 37) { // left
    panelInfo.index = (--panelInfo.index > 1 ? panelInfo.index : 1);
    panelInfo.desc = (panelInfo.index + '/' + panelInfo.total);
    return true;
  } else if (ev.keyCode == 39) { // right
    panelInfo.index = (++panelInfo.index < panelInfo.total ? panelInfo.index : panelInfo.total);
    panelInfo.desc = (panelInfo.index + '/' + panelInfo.total);
    return true;
  }

  return false;
}
const actionDefines = {
  onKeyDown
}    
</script>

<template>
  <div>
    <!-- 有router时，将按键交给router去处理，此处没有其他用处 -->
    <jsv-focus-block autoFocus :onAction="actionDefines" />
    <div class="root">
      <ScssApp v-if="panelInfo.index == 1" />
      <LessApp v-else-if="panelInfo.index == 2" />
      <StylusApp v-else-if="panelInfo.index == 3" />
      <div :style="{ top: 660, left: 30, width: 50 }">
        {{ panelInfo.desc }}
      </div>
      <div :style="{ top: 660, left: 100, width: 500 }">
        按左/右键切换Panel，按Back键返回
      </div>
    </div>
  </div>
</template>

<style scoped>
.root {
  color: #FF0000;
}
</style>