<template>
  <div
    class="ui-box"
    :class="['ui-box--' + type, 'ui-box--' + size]"
    :style="style"
  >
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'UiBox',
  props: {
    type: {
      type: String,
      default: 'default',
      validator(value) {
        return ['default', 'primary', 'success', 'info', 'warning', 'danger'].includes(value)
      }
    },
    height: {
      type: String,
      default: 'auto'
    },
    size: {
      type: String,
      default: 'small',
      validator(value) {
        return ['medium', 'small'].includes(value)
      }
    }
  },
  computed: {
    style() {
      const sy = {}
      if (this.height && this.height !== 'auto') {
        sy.height = this.height
      }
      return sy
    }
  }
}
</script>
<style lang="less">
.ui-box--medium {
  border-radius: 4px;
  padding: 21px 24px;
}
.ui-box--small {
  border-radius: 4px;
  padding: 16px;
}
.ui-box--primary {
  background-color: #deebfe;
}
.ui-box--success {
  background-color: #d5f3fc;
}
.ui-box--warning {
  background-color: #fef7f2;
}
</style>
