<!--
 * @Author: ChenChanghua
 * @Date: 2022-07-11 13:31:36
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-03-09 15:31:53
 * @Description: file content
-->
<script setup>
import { MetroWidget, HORIZONTAL, useFocusHub } from "jsview";
import ButtonItem from "./ButtonItem.vue";
import Item from "./Item.vue";
import { onMounted } from "vue";

const focusHub = useFocusHub();

const randomColor = () => {
  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
  return (
    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
  );
};
//item混排的回调
const provideData = () => {
  const advanceMix = [];
  for (let i = 0; i < 20; i++) {
    advanceMix.push({
      width: 200,
      height: 100,
      name: "mix_button_" + i,
      marginRight: 10,
      marginBottom: 10,
      type: i % 2 == 0 ? "button" : "item",
      color: randomColor(),
      content: i,
    });
  }
  return advanceMix;
};
const measures = (item) => {
  return {
    width: item.width,
    height: item.height,
    marginRight: item.marginRight,
    marginBottom: item.marginBottom,
  };
};

const onEdge = (edgeInfo) => {};

onMounted(() => {
  focusHub.setFocus("mwMix");
});
</script>

<template>
  <div>
    <div
      :style="{
        left: 50,
        top: 10,
        width: 600,
        height: 400,
        fontSize: 30,
        color: '#FFFFFF',
      }"
    >
      {{ "包含JsvFocusBlock的组件和纯描画组件混排" }}
    </div>
    <metro-widget
      name="mwMix"
      :top="100"
      :left="50"
      :provideData="provideData"
      :width="600"
      :height="400"
      :direction="HORIZONTAL"
      :measures="measures"
      :onEdge="onEdge"
    >
      <template #renderItem="{ data, onAction }">
        <button-item
          v-if="data.type == 'button'"
          :data="data"
          :onAction="onAction"
        />
        <item v-else :data="data" :onAction="onAction" />
      </template>
    </metro-widget>
  </div>
</template>