<template>
  <div class="search-item">
    <div
      v-if="label"
      class="item-label"
    >{{ label }}</div>
    <div
      v-else-if="$slots.label"
      class="item-label"
    >
      <slot name="label"></slot>
    </div>
    <div
      v-else-if="$slots.select"
      class="select-label"
    >
      <slot name="select"></slot>
    </div>

    <div
      v-if="$slots.select"
      class="item-content select-content"
    >
      <slot name="content"></slot>
    </div>
    <div
      v-else-if="$slots.button"
      class="btn-item-content"
    >
      <slot name="button"></slot>
    </div>
    <div
      v-else
      class="item-content"
    >
      <slot name="content"></slot>
    </div>
  </div>

</template>

<script>
export default {
  name: 'BiFormItem',
  props: {
    label: { type: String, default: '' }
  }
}
</script>

<style>
</style>