<template>
  <!-- <FlexView v-if="supportsGridMasonry" v-bind="props" :innerStyle="{
    display: 'grid',
    gridTemplateColumns: `repeat(${columnCount}, 1fr)`, /* 定义3列 */
    gridTemplateRows: 'masonry', /* 行方向采用瀑布流布局 */
    rowGap: resolveThemeSize(rowSpacing), /* 间距 */
    columnGap: resolveThemeSize(columnSpacing), /* 间距 */
    ...(innerStyle || {}),
  }">
    <slot />
  </FlexView> -->
  <FlexView v-bind="props" :innerStyle="{
    display: 'block',
    columnCount: columnCount, 
    columnGap: resolveThemeSize(columnSpacing),
    ...(innerStyle || {}),
  }">
    <slot />
  </FlexView>
</template>

<script setup lang="ts">
import { useTheme } from '@/components/theme/ThemeDefine';
import FlexView, { type FlexProps } from '../FlexView.vue';

export interface MasonryGridProps extends Omit<FlexProps, 'justify' | 'align' | 'direction'> {
  columnCount?: number;
  columnSpacing?: number;
  rowSpacing?: number;
}

// const supportsGridMasonry = CSS.supports('grid-template-rows', 'masonry');

const props = withDefaults(defineProps<MasonryGridProps>(), {
  columnCount: 2,
  columnSpacing: 10,
  rowSpacing: 10,
});

const { resolveThemeSize } = useTheme();
</script>