<!--
 * @Author: ChenChanghua
 * @Date: 2022-08-30 10:58:38
 * @LastEditors: ChenChanghua
 * @LastEditTime: 2022-08-30 14:20:46
 * @Description: file content
-->
<script setup>
import { shallowRef, onMounted } from "vue";
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;
};

// @click处理项目的响应处理
const clickItemColor = shallowRef("#c3aa20");
const onClickItemClick = () => {
  clickItemColor.value = "#ba69af";
  // 点击后改变背景颜色来提示
  setTimeout(() => {
    clickItemColor.value = "#c3aa20";
  }, 150);
};

// TapListener处理项目的响应处理
const tapItemColor = shallowRef("#c3aa20");
const tapDivRef = shallowRef(null);
const registerTap = () => {
  tapDivRef.value.jsvSetTapListener({
    // 长按响应，以变色来回应
    onLongPress: () => {
      tapItemColor.value = "#25ac47";
      console.log("Long pressed");
    },

    // 长按响应结束，以颜色还原来回应
    onLongPressRelease: () => {
      tapItemColor.value = "#c3aa20";
      console.log("Long pressed release");
    },

    // 长按响应取消，通过长按 + 不放手时移动阿里激活，以颜色还原来回应
    onCancel: () => {
      tapItemColor.value = "#c3aa20";
      console.log("canceled");
    },

    // 同样的click处理，以blink来回应
    onClick: () => {
      console.log("onClicked");
      tapItemColor.value = "#ba69af";
      // 点击后改变背景颜色来提示
      setTimeout(() => {
        tapItemColor.value = "#c3aa20";
      }, 150);
    },
  });
};

onMounted(() => {
  registerTap();
});
</script>

<template>
  <jsv-focus-block
    autoFocus
    :style="{
      width: 1920,
      height: 1080,
      backgroundColor: '#007788',
    }"
    :onAction="{
      onKeyDown: onKeyDown,
    }"
  >
    <div
      class="baseTextSet"
      :style="{
        lineHeight: 50,
        left: 140,
        top: 20,
        width: 1000,
        height: 50,
        backgroundColor: 'rgba(27,38,151,0.8)',
      }"
    >
      展示两种接受点击事件div的写法
    </div>

    <div
      class="baseTextSet clickItem"
      :style="{
        left: 300,
        top: 230,
        backgroundColor: clickItemColor,
      }"
      @click="onClickItemClick"
    >
      {{ "@click" }}
    </div>
    <div
      class="baseTextSet"
      :style="{ left: 174, top: 350, width: 400, height: 50, lineHeight: 50 }"
    >
      {{ "点击会闪紫色" }}
    </div>

    <div
      class="baseTextSet clickItem"
      ref="tapDivRef"
      :style="{
        left: 600,
        top: 230,
        backgroundColor: tapItemColor,
        width: 320,
        lineHeight: 50,
      }"
    >
      {{ "TapListener\n支持Click/LongPress" }}
    </div>

    <div
      class="baseTextSet"
      :style="{ left: 550, top: 350, width: 400, height: 100, lineHeight: 50 }"
    >
      {{ "点击会闪紫色\n长按会出现绿色" }}
    </div>
  </jsv-focus-block>
</template>

<style scoped>
.baseTextSet {
  text-align: center;
  font-size: 30;
  color: #ffffff;
}

.clickItem {
  width: 150;
  height: 100;
  line-height: 100;
}
</style>
