<!--
 *
 * 【界面概述】
 * 带下拉条的长图片展示样例
 *
 * 【控件介绍】
 * SimpleWidget：见simpleMetrowidget
 *
 * 【技巧说明】
 * Q: 如何让图片的高度自适应？
 * A: 使用img元素，并且style中高度不设置即可
 *    通过element.clientHeight获取渲染后的自动高度，以决定滚动轴的总高度
 *
 * Q: 如何知道图片加载完成？
 * A: 为img标签追加OnLoad回调函数来接收图片加载完成的消息
 *
 -->

<script setup>
import LongImageScroll from "./LongImageScroll.vue";
import Button from "./Button.vue";
import longImageSource from "./assets/1280x7200.jpg";
import { useRouter } from "vue-router";

const router = useRouter();

const onKeyDown = (ev) => {
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    router.go(-1); // 有router时，是从DemoHomepage进入，回退
  }
  return true;
};
</script>

<template>
  <jsv-focus-block
    autoFocus
    :onAction="{
      onKeyDown: onKeyDown,
    }"
  >
    <div
      :style="{
        textAlign: 'center',
        fontSize: 30,
        lineHeight: 50,
        color: '#ffffff',
        left: 100,
        top: 20,
        width: 1000,
        height: 50,
        backgroundColor: 'rgba(27,38,151,0.8)',
      }"
    >
      可加载长或宽超过maxBuffer(1080p:4096px)的图片
    </div>
    <div :style="{ left: 100, top: 100 }">
      <LongImageScroll
        :style="{ width: 1000, height: 500, backgroundColor: '#EEEEEE' }"
        :imageSrc="longImageSource"
        :scrollBlockStyle="{
          width: 10,
          height: 30,
          backgroundColor: '#555555',
        }"
        :scrollStyle="{
          left: 1005,
          width: 10,
          height: 500,
          backgroundColor: '#DDDDDD',
        }"
        :step="60"
      />
      <div :style="{ left: 400, top: 550 }">
        <Button></Button>
      </div>
    </div>
  </jsv-focus-block>
</template>
