<script setup>
import {
  MetroWidget,
  VERTICAL,
  HORIZONTAL,
  useFocusHub,
  EdgeDirection,
} from "jsview";
import Item from "./Item.vue";
import ControlItem from "./ControlItem.vue";
import { onMounted, shallowRef } from "vue";
import { useRouter } from "vue-router";
import imageUrl from "./assets/imageList.json";

let freshToken = 0;
const prepareData = (data, w, h, start, end, contentPrefix = "test") => {
  for (let i = start; i < end; ++i) {
    data.push({
      jsvKey: i + "_" + freshToken,
      width: w,
      height: h,
      url: imageUrl[i],
      index: i,
      content: contentPrefix + "_" + i,
    });
  }
};

const data1 = [];
const data2 = [];
prepareData(data2, 200, 200, 0, 40);
const data3 = [];
prepareData(data3, 200, 200, 0, 60);

const router = useRouter();
const focusHub = useFocusHub();

const measures = (item) => {
  return {
    width: item.width,
    height: item.height,
    marginRight: 10,
    marginBottom: 10,
  };
};

let curData = data1;
const provideData = () => {
  return curData;
};

onMounted(() => {
  focusHub.setFocus("myFocusWidget");
  setTimeout(() => {
    curData = data2;
    widgetRef.value.refreshData();
    setTimeout(() => {
      curData = data3;
      widgetRef.value.refreshData();
    }, 1000);
  }, 1000);
});

const widgetRef = shallowRef();
const onEdge = (edgeInfo) => {
  if (edgeInfo.direction == EdgeDirection.right) {
    focusHub.setFocus("control");
  }
};

//controller
const controlList = [
  {
    name: "追加",
    callback: () => {
      if (curData.length + 20 < imageUrl.length) {
        prepareData(curData, 200, 200, curData.length, curData.length + 20);
        widgetRef.value.refreshData();
      }
    },
  },
  {
    name: "全部替换",
    callback: () => {
      freshToken++;
      const data = [];
      prepareData(data, 200, 100, 0, 60);
      curData = data;
      widgetRef.value.refreshData();
    },
  },
  {
    name: "刷新第5个item",
    callback: () => {
      if (curData.length > 5) {
        freshToken++;
        let oldItem = curData[5];
        curData[5] = {
          ...oldItem,
          jsvKey: 5 + "_" + freshToken,
          content: Math.round(Math.random() * 100) + "",
        };
        widgetRef.value.refreshData();
      }
    },
  },
  // {
  //   name: "新数据旧id:不刷新",
  //   callback: () => {
  //     const data = [];
  //     prepareData(data, 200, 200, 0, curData.length);
  //     data.forEach((i, index) => {
  //       i.jsvKey = curData[index].jsvKey;
  //     });
  //     curData = data;
  //     widgetRef.value.refreshData();
  //   },
  // },
  {
    name: "同尺寸新数据:刷新",
    callback: () => {
      freshToken++;
      const data = [];
      prepareData(data, 200, 200, 0, curData.length > 0 ? curData.length : 40);
      curData = data;
      widgetRef.value.refreshData();
    },
  },
  {
    name: "刷新为空数据",
    callback: () => {
      freshToken++;
      const data = [];
      curData = data;
      widgetRef.value.refreshData();
    },
  },
];
const controlWidgetMeasure = (data) => {
  return {
    width: 300,
    height: 50,
    marginBottom: 10,
  };
};
const controlWidgetProvideData = () => {
  return controlList;
};
const controlOnEdge = (edgeInfo) => {
  if (edgeInfo.direction == EdgeDirection.left) {
    focusHub.setFocus("myFocusWidget");
  }
};
</script>

<template>
  <div
    :style="{
      width: 1920,
      height: 1080,
      backgroundColor: '#007788',
    }"
  ></div>
  <metro-widget
    ref="widgetRef"
    name="myFocusWidget"
    :top="100"
    :left="50"
    :width="1000"
    :height="550"
    :direction="VERTICAL"
    :provideData="provideData"
    :measures="measures"
    :padding="{ left: 50, right: 50, top: 50, bottom: 50 }"
    :enableItemRenderBreak="true"
    :onEdge="onEdge"
    :placeHolderSetting="{
      backgroundColor: 'rgba(78,105,127, 0.8)',
      focusBackgroundColor: '#770088aa',
      borderRadius: 10,
      gap: 10,
    }"
  >
    <template #renderItem="{ data, query, onEdge, onAction }">
      <item :data="data" :query="query" :onEdge="onEdge" :onAction="onAction" />
    </template>
  </metro-widget>

  <metro-widget
    name="control"
    :left="1100"
    :top="50"
    :width="300"
    :height="500"
    :direction="HORIZONTAL"
    :provideData="controlWidgetProvideData"
    :measures="controlWidgetMeasure"
    :onEdge="controlOnEdge"
  >
    <template #renderItem="{ data, onAction }">
      <control-item :data="data" :onAction="onAction" />
    </template>
  </metro-widget>

  <div
    :style="{
      left: 50,
      top: 50,
      width: 800,
      height: 200,
      color: '#FFFFFF',
      fontSize: 30,
    }"
  >
    起来时先是无数据, 1s后有数据, 再1s后刷新, 无报错, 无闪烁即可
  </div>
</template>
