<template>
  <view
      :class="classObject"
      :style="[getStyle]"
  >
    <slot></slot>
  </view>
</template>

<script setup>
import { onMounted, ref } from "vue"

const props = defineProps([
  'direction',
  'align',
  'wrap',
  'justify',
  'size',
  'height',
  'padding',
  'flex',
  'border'
])

const classObject = ref({})

const handleClassObject = (props) => {
  let className = 'yshop-space'
  let direction = props.direction
  let align = props.align
  let wrap = props.wrap
  let justify = props.justify
  let flex = props.flex
  let border = props.border
  if (border) {
    className += ' yshop-space-border'
  }
  if (direction) {
    className += ` yshop-space-${ direction }`
  }
  if (wrap) {
    className += ` yshop-space-${ wrap }`
  }
  if (align) {
    className += ` yshop-space-align-${ align }`
  }
  if (justify) {
    className += ` yshop-space-justify-${ justify }`
  }
  if(props.gap){
    className += ` gap`

  }

  classObject.value = className
}

const getStyle = ({
                    size = 6,
                    wrap,
                    height,
                    padding,
                    flex
                  }) => {
  let innerStyle = {}
  // let size = size.value
  // let wrap = wrap.value
  // let height = height.value
  // let padding = padding.value

  if (height) {
    innerStyle.height = `${ height }rpx`
  }
  if (typeof size === 'number') {
    innerStyle.gap = size + 'px'
  }


  if (wrap) {
    innerStyle.flexWrap = 'wrap'
  }

  if (typeof size === 'string') {
    switch (size) {
      case 'small':
        innerStyle.gap = '8rpx'
        break
      case 'middle':
        innerStyle.gap = '16rpx'
        break
      case 'large':
        innerStyle.gap = '24rpx'
        break
    }
  }


  if (typeof padding === 'string') {
    innerStyle.padding = `${ padding }rpx`
  }

  if (Object.prototype.toString.call(padding) === '[object Array]') {
    if (typeof padding === 'object') {
      if (padding.length == 1) {
        innerStyle.padding = `${ padding[0] }rpx`
      }
      if (padding.length == 2) {
        innerStyle.padding = `${ padding[0] }rpx ${ padding[1] }rpx`
      }
    }
  }

  if (Object.prototype.toString.call(size) === '[object Array]') {
    if (typeof size === 'object') {
      if (size.length == 1) {
        innerStyle.gap = `${ size[0] }rpx`
      }
      if (size.length == 2) {
        innerStyle.gap = `${ size[0] }rpx ${ size[1] }rpx`
      }
    }
  }


  if (flex) {
    innerStyle.flex = flex
  }

  return innerStyle
}

onMounted(() => {
  handleClassObject(props)
  getStyle(props)
})

</script>

<style lang="scss">
space {
  width: 100%;
}

.yshop-space {
  display: flex;
  width: 100%;
  flex: 1;

  &-warp {
    flex-wrap: wrap;
  }

  &-vertical {
    flex-direction: column;
  }

  &-align-center {
    align-items: center;
  }

  &-align-start {
    align-items: flex-start;
  }

  &-align-end {
    align-items: flex-end;
  }

  &-justify-center {
    justify-content: center;
  }

  &-justify-between {
    justify-content: space-between;
  }

  &-justify-around {
    justify-content: space-around;
  }

  &-align-end {
    align-items: flex-end;
  }

  &-align-baseline {
    align-items: baseline;
  }

  &-item:empty {
    display: none;
  }

  &-border {
    border-bottom: 1rpx solid #f9f9f9;
  }

}
.gap{
  gap:20rpx;
}

// #ifdef APP-PLUS
.yshop-space {
  & > view {
    margin-right: 8rpx;
  }

  & > text {
    margin-right: 8rpx;
  }

  & > image {
    margin-right: 8rpx;
  }

  .u-tag-wrapper {
    margin-right: 8rpx;
  }

  .u-tag {
    margin-right: 8rpx;
  }

}

// #endif
</style>
