<!--
 * @Author: ChenChanghua
 * @Date: 2023-03-08 14:52:08
 * @Description: file content
-->
<script setup>
import {
  ListWidget,
  HORIZONTAL,
  useFocusHub,
  FixPositionSlide,
  EdgeDirection,
} from "jsview";
import Item from "./Item.vue";
import { ref, provide } 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 +
    "77"
  );
};

const fixPositionSlide = new FixPositionSlide();
const largeItemIndex = ref(0);
provide("largeItemIndex", largeItemIndex);
const data = [
  {
    width: 310,
    height: 100,
    marginRight: 10,
    color: randomColor(),
    content: 0,
  },
  {
    width: 110,
    height: 100,
    marginRight: 10,
    color: randomColor(),
    content: 1,
  },
  {
    width: 110,
    height: 100,
    marginRight: 10,
    color: randomColor(),
    content: 2,
  },
];
const provideData = () => {
  return data;
};

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

const onEdge = (edgeInfo) => {
  if (edgeInfo.direction == EdgeDirection.top) {
    focusHub.setFocus("itemResizeBackward");
  }
};

const widgetLayout = {
  left: 0,
  top: 0,
  width: 600,
  height: 120,
};

const padding = {
  left: 25,
  top: 10,
  right: 25,
  bottom: 10,
};

const name = "stretch";
</script>

<template>
  <div>
    <div
      :style="{
        ...widgetLayout,
        backgroundColor: 'rgba(255,0,0,0.5)',
      }"
    ></div>
    <list-widget
      ref="widgetRef"
      :name="name"
      :left="widgetLayout.left"
      :top="widgetLayout.top"
      :width="widgetLayout.width"
      :height="widgetLayout.height"
      :provideData="provideData"
      :direction="HORIZONTAL"
      :slideSetting="fixPositionSlide"
      :measures="measures"
      :padding="padding"
      :onEdge="onEdge"
    >
      <template #renderItem="{ data, onAction, query }">
        <item
          :data="data"
          :onAction="onAction"
          :query="query"
        />
      </template>
    </list-widget>
  </div>
</template>
