<template>
  <div
    class="sel-grid-item"
    :style="{
      marginLeft: `${ offset * (xyGrid.xGrid+ parseFloat(xGapV)) }px`
    }"
  >
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
import { computed, inject, getCurrentInstance, defineProps } from 'vue'
import { isNumber } from 'lodash-es'

const instance: any = getCurrentInstance()
const styled = computed(() => instance?.appContext.config.globalProperties.styled)
defineOptions({
  name: 'SGridItem',
})

interface PropsType {
  span?: number
  h?: number
  x?: number
  y?: number
  i?: string
  auto?: boolean
  offset?: number
}

const props = withDefaults(defineProps<PropsType>(), {
  span: 1,
  h: 1,
  x: 0,
  y: 0,
  i: '',
  auto: true,
  offset: 0,
})

const xGapV = inject('xGapV')
const xyGrid = inject('xyGrid')
const useSpan = computed(() => Number(props.offset) + Number(props.span))
const gridColumn = computed(() => {
  if (props.auto) {
    return `auto /span ${ useSpan.value }`
  } else {
    return `${ isNumber(props.x) ? (props.x + 1) : props.x } / span ${ useSpan.value }`
  }
})
const gridRow = computed(() => {
  if (props.auto) {
    return `auto /span ${ props.h }`
  } else {
    return `${ isNumber(props.y) ? (props.y + 1) : props.y } / span ${ props.h }`
  }
})
</script>
<style lang="scss" scoped>
.sel-grid-item {
  grid-column: v-bind(gridColumn);
  grid-row: v-bind(gridRow);
}
</style>
