<template>
  <div :class="classes">
    <slot></slot>
  </div>
</template>

<script>
import { prop, inArray, toNumber } from '@uif/next/lib/utils/tools'

export default {
  name: 'n-grid',
  props: {
    // 是否为grid容器组件
    container: prop.boolean(),
    // 是否为grid行组件
    row: prop.boolean(),
    // grid栅格组件宽度，可选值为 1, 2, 3, 4
    width: {
      validator: (value) => inArray([0, 1, 2, 3, 4], toNumber(value)),
      default: 0
    },
    // grid栅格组件高度，可选值为 1, 2, 3, 4, 5, 6, 7, 8
    height: {
      validator: (value) => inArray([0, 1, 2, 3, 4, 5, 6, 7, 8], toNumber(value)),
      default: 0
    }
  },
  computed: {
    classes ({container, row, width, height}) {
      if (container || row) {
        return {
          'n-grid-container': container,
          'n-grid-row': row
        }
      }
      return [
        'n-grid',
        {
          [`n-grid-width-${width}`]: width,
          [`n-grid-height-${height}`]: height
        }
      ]
    }
  }
}
</script>
