<template>
  <FlexView
    v-bind="props"
    direction="column"
    :innerStyle="{
      position: 'relative',
      flexBasis: pec > 0 ? `${pec}%` : undefined,
      marginLeft: offset ? `${(offset / GRID_SIZE) * 100}%` : undefined,
      maxWidth: pec > 0 ? `${pec}%` : undefined,
      flexShrink: shrink ? 1 : 0,
      flexGrow: grow ? 1 : 0,
      ...(innerStyle || {}),
    }"
  >
    <slot />
  </FlexView>
</template>

<script setup lang="ts">
/**
 * 24列栅格列组件。
 *
 * 提供了 24列栅格，通过在 Col 上添加 span 属性设置列所占的宽度百分比。
 *
 * 此外，添加 offset 属性可以设置列的偏移宽度，计算方式与 span 相同。
 */
import { computed, inject, toRefs } from 'vue';
import type { FlexProps } from '../FlexView.vue';
import FlexView from '../FlexView.vue';

export interface ColProps extends FlexProps {
  /**
   * 列元素偏移距离
   */
  offset?: number;
  /**
   * 列元素宽度
   */
  span?: number;
  /**
   * 是否允许缩小
   * @default false
   */
  shrink?: boolean;
  /**
   * 是否允许放大
   * @default true
   */
  grow?: boolean;
}

defineOptions({
  options: {
    virtualHost: true,
  }
})

const props = withDefaults(defineProps<ColProps>(), {
  offset: 0,
  span: 0,
  shrink: false,
  grow: true,
});
    
const { span, offset } = toRefs(props);
const GRID_SIZE = inject('NanaFormLayoutGridSize', 24);
const pec = computed(() => {
  return ((span.value || 0) / GRID_SIZE) * 100;
});
</script>