<template>
  <div class="uif-description-list" :class="classes">
    <u-description v-for="(item, idx) in data" :key="idx" v-bind="item">
      <base-slot v-if="item.slot" tag="span" :slot-name="item.slot" :params="item"></base-slot>
      <base-render v-if="item.render" :render="item.render" :params="item"></base-render>
    </u-description>
  </div>
</template>
<script>
import {oneOf} from '@uif/hq/lib/utils/assist'
import BaseSlot from '@uif/hq/lib/components/base-slot'
import BaseRender from '@uif/hq/lib/components/base-render'
import UDescription from '@uif/admin/lib/components/description'
export default {
  name: 'u-description-list',
  components: {
    UDescription,
    BaseRender,
    BaseSlot
  },
  props: {
    data: {
      type: Array,
      default () {
        return []
      }
    },
    mode: {
      validator (value) {
        return oneOf(value, ['horizontal', 'vertical'])
      },
      default: 'horizontal'
    },
    space: {
      validator (value) {
        return oneOf(value, ['none', 'small', 'middle', 'large'])
      },
      default: 'none'
    }
  },
  computed: {
    classes () {
      return [
        'uif-description-list-' + this.mode,
        'uif-description-list-space-' + this.space
      ]
    }
  }
}
</script>
