<template>
  <div
    class="x-space"
    :class="[
      `x-space-${direction}`,
      { 'x-space-align-center': align === 'center' },
      { 'x-space-align-start': align === 'start' },
      { 'x-space-align-end': align === 'end' },
      { 'x-space-align-baseline': align === 'baseline' },
    ]"
    :style="spaceStyle"
  >
    <template v-if="$slots.default">
      <div
        v-for="(child, index) in $slots.default"
        v-if="child.tag"
        :key="index"
        class="x-space-item"
        :style="itemStyle"
      >
        <slot></slot>
      </div>
    </template>
    <template v-else>
      <div
        v-for="(item, index) in items"
        :key="index"
        class="x-space-item"
        :style="itemStyle"
      >
        {{ item }}
      </div>
    </template>
  </div>
</template>
<script>
  export default {
    name: 'XSpace',
    props: {
      // 间距方向
      direction: {
        type: String,
        default: 'horizontal',
        validator: function(value) {
          return ['horizontal', 'vertical'].includes(value);
        }
      },
      // 间距大小
      size: {
        type: [String, Number, Array],
        default: 'small'
      },
      // 对齐方式
      align: {
        type: String,
        default: 'center',
        validator: function(value) {
          return ['start', 'end', 'center', 'baseline'].includes(value);
        }
      },
      // 是否自动换行，仅在 horizontal 时有效
      wrap: {
        type: Boolean,
        default: false
      },
      // 数据源
      items: {
        type: Array,
        default: function() {
          return [];
        }
      }
    },
    data() {
      return {

      }
    },
    computed: {
      // 计算间距样式
      spaceStyle: function() {
        const style = {};

        // 处理 size 属性
        if (Array.isArray(this.size)) {
          const [horizontalSize, verticalSize] = this.size;
          style['--x-space-horizontal-gap'] = `${horizontalSize}px`;
          style['--x-space-vertical-gap'] = `${verticalSize}px`;
        } else {
          const sizeValue = typeof this.size === 'string'
            ? this.getSizeValue(this.size)
            : `${this.size}px`;

          style['--x-space-horizontal-gap'] = sizeValue;
          style['--x-space-vertical-gap'] = sizeValue;
        }

        // 处理 wrap 属性
        if (this.direction === 'horizontal' && this.wrap) {
          style.flexWrap = 'wrap';
          style.marginBottom = `calc(-1 * var(--x-space-vertical-gap))`;
        }

        return style;
      },
      // 计算子项样式
      itemStyle: function() {
        return {
          marginRight: this.direction === 'horizontal'
            ? 'var(--x-space-horizontal-gap)'
            : undefined,
          marginBottom: this.direction === 'vertical'
            ? 'var(--x-space-vertical-gap)'
            : this.wrap
              ? 'var(--x-space-vertical-gap)'
              : undefined,
        };
      }
    },
    methods: {
      // 获取预设尺寸的值
      getSizeValue: function(size) {
        const sizeMap = {
          small: '8px',
          middle: '16px',
          large: '24px'
        };
        return sizeMap[size] || sizeMap.middle;
      }
    }
  }
</script>
<style scoped lang="scss">
.x-space {
  display: flex;
}

.x-space-horizontal {
  flex-direction: row;
}

.x-space-vertical {
  flex-direction: column;
}

.x-space-align-center {
  align-items: center;
}

.x-space-align-start {
  align-items: flex-start;
}

.x-space-align-end {
  align-items: flex-end;
}

.x-space-align-baseline {
  align-items: baseline;
}

.x-space-item:last-child {
  margin-right: 0;
  margin-bottom: 0;
}
</style>
