<!--
 * @Author: ChenChanghua
 * @Date: 2022-07-11 13:31:36
 * @Description: file content
-->
<script setup>
import { MetroWidget, VERTICAL, useFocusHub, METRO_WIDGET_CONST, JsvTouchModeSwitcher } from "jsview";
import WidgetItem from "./WidgetItem.vue";
import { onMounted, ref, onBeforeUnmount, provide } from "vue";

const focusHub = useFocusHub();
focusHub.enableFocusTrace()
const modeSwitchRef = ref();
const modeString = ref("key")

const provideData = () => {
  const data = [];
  for (let i = 0; i < 30; i++) {
    data.push({
      width: 500,
      height: 190,
      name: "widget_" + i,
      marginBottom: 10,
      index: i,
    });
  }
  return data;
};

const measures = (item) => {
  return {
    width: item.width,
    height: item.height,
    marginRight: item.marginRight,
    marginBottom: item.marginBottom,
    /**重要代码: itemSlide设置为ACT_FOCUS_RECT_EVENT, 由子MetroWidget控制滚动 */
    itemSlide: METRO_WIDGET_CONST.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT,
  };
};

const onModeChange = (mode) => {
  modeString.value = mode == 1 ? "key" : "touch";
}

provide("modeSwitch", modeSwitchRef)

const widgetRef = ref();
function onScroll(visibleStart, range, totalSize) {
  console.log("onScroll", visibleStart, range, totalSize);
}
onMounted(() => {
  modeSwitchRef.value.registerCallback(onModeChange);
  focusHub.setFocus("mwWidget");
  widgetRef.value.setSensorSensitivity(12);
});

onBeforeUnmount(() => {
  modeSwitchRef.value.unregisterCallback(onModeChange);
})
</script>

<template>
  <jsv-touch-mode-switcher
    ref="modeSwitchRef"
    :width="1280"
    :height="720"
  >
    <div :style="{ width: 1280, height: 720, backgroundColor: '#007788' }" />
    <div
      :style="{
        left: 100,
        top: 20,
        width: 800,
        height: 400,
        fontSize: 30,
        color: '#FFFFFF',
      }"
    >
      {{ `MetroWidget的item是包含MetroWidget的组件` }}
    </div>
    <!-- 为了保证边缘的item缩放后依旧完整显示, 需要设置padding, 注意width/height是包含padding的 -->
    <metro-widget
      name="mwWidget"
      ref="widgetRef"
      :top="50"
      :left="50"
      :width="660"
      :height="600"
      :provideData="provideData"
      :padding="{ left: 30, right: 30 }"
      :direction="VERTICAL"
      :measures="measures"
      :touchFlag="1"
      :onScroll="onScroll"
    >
      <!-- 重要代码: 为了实现焦点就近移动, 需要传递onItemEdge回调 -->
      <template #renderItem="{ data, onAction, onItemEdge }">
        <widget-item
          :data="data"
          :onAction="onAction"
          :onItemEdge="onItemEdge"
        />
      </template>
    </metro-widget>

    <div
      :style="{
        width: 50,
        height: 50,
        backgroundColor: '#ff000055',
        animation: 'testRotate 2s infinite',
      }"
    ></div>
  </jsv-touch-mode-switcher>
  <div :style="{
    width: 300,
    height: 50,
    fontSize: 30,
    color: '#ffffff'
  }">
    {{ modeString }}
  </div>
</template>

<style scoped>
@keyframes testRotate {
  from {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  to {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}
</style>
