<!--
 * @Author: ChenChanghua
 * @Date: 2022-04-20 21:05:26
 * @LastEditors: ChenChanghua
 * @LastEditTime: 2022-07-08 11:16:52
 * @Description: file content
-->
<script setup>
import { onMounted, shallowRef } from "vue";
import { useRouter } from "vue-router";
import { JsvFlexDiv, jJsvRuntimeBridge, DefaultKeyCodeMap } from "jsview";
import TestFrame1 from "./TestFrame1.vue";
import TestFrame2 from "./TestFrame2.vue";
import TestFrame3 from "./TestFrame3.vue";
import TestFrame4 from "./TestFrame4.vue";
import TestFrame5 from "./TestFrame5.vue";

import image1 from "./images/1.png";
import image2 from "./images/2.png";
import image3 from "./images/3.png";
import image4 from "./images/4.jpg";

const router = useRouter();

const enableManualDemo = false;
const cEnableTestArray = [
  { open: true, comp: TestFrame1 },
  { open: true, comp: TestFrame2 },
  { open: true, comp: TestFrame3 },
  { open: true, comp: TestFrame4 },
  { open: true, comp: TestFrame5 },
];

let vDivLeft = shallowRef(0);
const cMoveLeftGap = 350;

const _onKeyDown = (ev) => {
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    router.go(-1); // 有router时，是从DemoHomepage进入，回退
  } else if (ev.keyCode == DefaultKeyCodeMap.Left) {
    if (vDivLeft.value > 0) {
      vDivLeft.value -= cMoveLeftGap;
    }
  } else if (ev.keyCode == DefaultKeyCodeMap.Right) {
    if (vDivLeft.value < cMoveLeftGap * (cEnableTestArray.length - 2)) {
      vDivLeft.value += cMoveLeftGap;
    }
  }

  return true;
};

onMounted(() => {
  jJsvRuntimeBridge.notifyPageLoaded();
});
</script>

<template>
  <jsv-focus-block
    autoFocus
    :onAction="{
      onKeyDown: _onKeyDown,
    }"
  >
    <!-- 手动测试时打开 -->
    <div
      v-if="enableManualDemo"
      :style="{
        top: 150,
        left: 50,
        width: 300,
        height: 400,
        backgroundColor: 'rgba(0,128,128,0.5)',
        fontSize: 12,
        color: '#FF0000',
        textAlign: 'center',
        lineHeight: 16,
      }"
    >
      <jsv-flex-div
        :style="{
          width: 300,
          height: 400,
          flexDirection: 'row',
          flexWrap: 'wrap',
          justifyContent: 'flex-end',
          alignItems: 'flex-start',
          alignContent: 'center',
        }"
        :onSized="_onSizeTest1_1"
      >
        <!-- 测试主轴尺寸未给的场景下的撑大处理, 复用父节点的width -->
        <jsv-flex-div :style="{ flexWrap: 'wrap' }" :onSized="_onSizeTest1_2">
          <img :src="image1" :style="{ height: 80 }" />
          <img :src="image2" :style="{ height: 60 }" />
          <img :src="image1" :style="{ height: 45 }" />
          <img :src="image1" :style="{ height: 45 }" />
        </jsv-flex-div>
        <img :src="image3" :style="{ height: 50 }" />
        <img :src="image4" :style="{ height: 50 }" />
      </jsv-flex-div>
    </div>

    <div :style="{ left: -vDivLeft }">
      <!-- 测试人员自动测试时打开，最左端测试样例 -->
      <div
        v-for="(item, index) in cEnableTestArray"
        :key="'' + index"
        :style="{
          top: 150,
          left: 50 + index * cMoveLeftGap,
          width: 300,
          height: 400,
          backgroundColor: 'rgba(0,128,128,0.5)',
        }"
      >
        <div v-if="!enableManualDemo && item.open">
          <component :is="item.comp" />
        </div>
      </div>
    </div>

    <div
      :style="{
        top: 600,
        height: 40,
        width: 1280,
        fontSize: 35,
        lineHeight: 40,
        color: '#FFFFFF',
        textAlign: 'center',
      }"
    >
      {{ "[[[[  左右键进行浏览  ]]]]" }}
    </div>
  </jsv-focus-block>
</template>

<style scoped></style>
