<template>
    <div v-show="isShow" :style="style">
        <slot></slot>
    </div>
</template>
<script setup lang="ts" name="GridItem">
import { computed, inject, Ref, ref, useAttrs, watch } from 'vue';
import { BreakPoint, Responsive } from '../interface/index';

type Props = {
    offset?: number;
    span?: number;
    suffix?: boolean;
    xs?: Responsive;
    sm?: Responsive;
    md?: Responsive;
    lg?: Responsive;
    xl?: Responsive;
};

const props = withDefaults(defineProps<Props>(), {
    offset: 0,
    span: 1,
    suffix: false,
    xs: undefined,
    sm: undefined,
    md: undefined,
    lg: undefined,
    xl: undefined,
});

const attrs = useAttrs() as { index: string };
const isShow = ref(true);

// 注入断点
const breakPoint = inject<Ref<BreakPoint>>('breakPoint', ref('xl'));
const shouldHiddenIndex = inject<Ref<number>>('shouldHiddenIndex', ref(-1));
watch(
    () => [shouldHiddenIndex.value, breakPoint.value],
    (n) => {
        if (attrs.index) {
            isShow.value = !(n[0] !== -1 && parseInt(attrs.index) >= Number(n[0]));
        }
    },
    { immediate: true }
);

const gap = inject('gap', 0);
const cols = inject('cols', ref(4));
const style = computed(() => {
    let span = props[breakPoint.value]?.span ?? props.span;
    let offset = props[breakPoint.value]?.offset ?? props.offset;
    if (props.suffix) {
        return {
            gridColumnStart: cols.value - span - offset + 1,
            gridColumnEnd: `span ${span + offset}`,
            marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : 'unset',
        };
    } else {
        return {
            gridColumn: `span ${span + offset > cols.value ? cols.value : span + offset}/span ${span + offset > cols.value ? cols.value : span + offset}`,
            marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : 'unset',
        };
    }
});
</script>
