<!--
 * @Author: ChenChanghua
 * @Date: 2022-07-12 10:45:38
 * @LastEditors: ZhengYi
 * @LastEditTime: 2023-05-04 
 * @Description: file content
-->
<script setup>
import {
  VERTICAL,
  MetroWidget,
  METRO_WIDGET_CONST,
  SeamlessSlide,
} from "jsview";
import WidgetItem from "./WidgetItem.vue";
import { shallowRef, watch, onBeforeUnmount } from "vue";

const props = defineProps({
  data: {
    type: Object,
    require: true,
  },
  name: {
    type: String,
    require: true,
  },
  onEdge: {
    type: Function,
  },
});

const widgetRef = shallowRef(null);

const slideSetting =
  props.data.tabIndex == 0
    ? new SeamlessSlide({
        startPercent: 0.5,
        endPercent: 0.5,
        fixFirstPage: true,
      })
    : new SeamlessSlide({
        startPercent: 0.5,
        endPercent: 0.5,
      });

const provideData = () => {
  return props.data.data;
};
const measures = (item) => {
  return {
    width: item.width,
    height: item.height,
    itemSlide: METRO_WIDGET_CONST.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT,
  };
};

const watcher = watch(
  () => props.data,
  (newValue, oldValue) => {
    widgetRef.value?.refreshData();
  }
);

onBeforeUnmount(() => {
  watcher();
});
</script>

<template>
  <metro-widget
    ref="widgetRef"
    :name="name"
    :width="data.width"
    :height="data.height"
    :provideData="provideData"
    :direction="VERTICAL"
    :measures="measures"
    :onEdge="onEdge"
    :slideSetting="slideSetting"
  >
    <template #renderItem="{ data, query, onItemEdge, onAction }">
      <widget-item
        :data="data"
        :query="query"
        :onItemEdge="onItemEdge"
        :onAction="onAction"
      ></widget-item>
    </template>
  </metro-widget>
</template>
