<!--
 * @Author: ChenChanghua
 * @Date: 2022-07-12 10:45:19
 * @LastEditors: ChenChanghua
 * @LastEditTime: 2022-09-01 16:19:51
 * @Description: file content
-->
<script setup>
import { HORIZONTAL, MetroWidget } from "jsview";
import TabItem from "./TabItem.vue";

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

const measures = (item) => {
  return {
    width: item.width,
    height: item.height,
    marginRight: item.marginRight,
  };
};
const provideData = () => {
  return props.data;
};
</script>

<template>
  <jsv-focus-block>
    <metro-widget
      :name="name"
      :width="layout.width"
      :height="layout.height"
      :provideData="provideData"
      :direction="HORIZONTAL"
      :measures="measures"
      :onEdge="onEdge"
      :padding="{
        top: 30,
        left: 60,
        right: 60,
      }"
    >
      <template #renderItem="{ data, query, onAction }">
        <tab-item :data="data" :query="query" :onAction="onAction"></tab-item>
      </template>
    </metro-widget>
  </jsv-focus-block>
</template>