<template>
  <component
    :is="formItemIs"
    v-if="activated"
    v-show="visible"
    :[formItemPropName]="field.name"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
    :colon="false"
    :class="{'slot': true, 'form-item': true, 'readonly': readonly}"
    :style="{
      marginBottom: colMarginY,
      display: 'flex',
      flexDirection: isLabelTop ? 'column' : '',
    }"
    :sfr-f="field.name"
  >
    <div style="display: none;"/>
    <template v-slot:label>
      <Tooltip :field="field" />
    </template>
    <div
      v-if="!field.slotName"
      class="blank"
    />
    <slot
      v-if="field.slotName"
      :name="field.slotName"
    />
  </component>
</template>

<style>
.slot .blank {
  width: 100%;
  height: 40px;
  color: #ccc;
  text-align: center;
}
</style>

<script>
import formItemMixin from '../../common/form-item/mixin'

export default {
  mixins: [formItemMixin],
};
</script>
