<!--
 * 【界面概述】
 * div元素style中设置值对应的样例
 *
 * 【控件介绍】
 * 无
 *
 * 【技巧说明】
 * Q: 如何将div布局到指定坐标中？
 * A: 设置div style中的top和left，坐标值是相对于父div的左上角的坐标值
 *
 * Q: 如何在界面上描画图片？
 * A: 参照div/DivBackground，div的style中，
 *    描绘纯色时，通过backgroundColor来设置，例如
 *    <div style={{width:200, height:200, backgroundColor: 'rgba(255, 255, 0, 1)'}}>
 *    描绘图片时，通过backgroundImage来设置，例如
 *    <div style={{width:200, height:200, backgroundColor:`url(${iconImgPath})`}}>
 *    注意，不设置width和height的情况是默认尺寸为0 * 0，不会展示图片
 *
 * Q: 如何对图片进行剪切，只展示图片的局部内容？
 * A: 参照div/DivClip，使用style中的overflow:"hidden"属性进行裁剪，或者使用style中clipPath属性进行裁剪
 *
 * Q: 如何将展示图片的四个角变成圆角？
 * A: 参照img/ImgRadius，通过设置style中的borderRadius属性完成圆角改变
 *
 * Q: 文字如何描绘？
 * A: 在div标签的内容中可填写需要描绘的文字，文字的字体字号等属性，通过div标签中的style来控制，参照text文件夹中的各个js。
 *    注意：若文字内容中需要折行，则需要把要显示内容放入字符串中，并加入'\n'来达到换行效果，例如：
 *          <div>{"第一行
 *          第二行"}</div>
 *          =======需要改成=======
 *          <div>{"第一行\n\
 *          第二行"}</div>
 *
 * Q: 几个位置使用的文字属性是统一的情况下，如何减少每个div中设置文字style的代码量？
 * A: 将统一的文字属性定义到一个js文件中(例如本Demo中的CommonFontStyle)，使用时，在style中采用array扩展的方式即可：
 *    <div style={{...TitleFont}}>
 *
 * Q: 如何让div产生动画效果？
 * A: 动画需要通过以下两种方式实现，具体见anim文件夹各个js:
 *    方式1：声明keyframe结构，通过div的style中的animation来引用keyFrame，启动动画
 *    方式2：设置div style中的transition属性，然后调整div的left/top/width/height之后，会按照transition规则进行动画。
 *    注意点1：keyFrame可以声明在css文件中，也可以通过document.styleSheet来动态加载，可以参考转盘demo(turntableDemo)
 *    在JsView系统中，css文件中只能声明keyFrame内容，不能声明其他内容
 *    注意点2：transition目前只支持left/top/width/height属性的跟踪，其他属性目前不支持
-->

<script setup>
import { jJsvRuntimeBridge } from "jsview";
import { reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import Panel1 from "./components/panel/Panel1.vue";
import Panel2 from "./components/panel/Panel2.vue";

const router = useRouter();
const itemSides = {
  top: 0,
  left: 0,
  width: 240,
  height: 160,
};

const panelInfo = reactive({
  index: 1,
  total: 2,
  desc: "1/2",
});
const onKeyDown = (ev) => {
  // 8:Backspace, 27:Escape, 10000:盒子返回键
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    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;
};
onMounted(() => {
  jJsvRuntimeBridge.notifyPageLoaded();
});
</script>

<template>
  <div>
    <!-- 有router时，将按键交给router去处理，此处没有其他用处 -->
    <jsv-focus-block autoFocus :onKeyDown="onKeyDown" />

    <div class="root">
      <Panel1
        v-if="panelInfo.index == 1"
        :style="{ top: 10, left: 20 }"
        panelClass="panel-size"
        :itemSides="itemSides"
      />
      <Panel2
        v-else-if="panelInfo.index == 2"
        :style="{ top: 10, left: 20 }"
        panelClass="panel-size"
        :itemSides="itemSides"
      />
      <div :style="{ top: 650, left: 20, width: 500, color: '#0000FF' }">
        {{ panelInfo.desc }}
      </div>
      <div :style="{ top: 650, left: 50, width: 500, color: '#0000FF' }">
        按左/右键切换Panel，按Back键返回
      </div>
    </div>
  </div>
</template>

<style>
.root {
  top: 10;
  left: 10;
  width: 1250;
  height: 670;
  background-color: rgba(200, 200, 200, 1);
}

.panel-size {
  width: 1210;
  height: 630;
}
</style>