<template>
  <el-form-item
    :label="label"
    :prop="prop"
    :style="styles"
    :class="className"
    :inline-message="inlineMessage"
    v-bind="formItemProps"
  >
    <slot />
    <!-- eslint-disable vue/no-v-html -->
    <span v-if="labelSlot" slot="label" v-html="labelSlot" />
    <th-tips v-if="tips" v-bind="tips" />
    <th-popover
      v-if="popoverText"
      :popover-text="popoverText"
      :popover-width="popoverWidth"
    />
  </el-form-item>
</template>
<script>
import ThTips from '../../tips/src/main'
import ThPopover from '../../popover/src/main'
export default {
  name: 'ThFormItem',
  components: {
    ThTips,
    ThPopover
  },
  props: {
    label: {
      type: String,
      default: ''
    },
    prop: {
      type: String,
      default: ''
    },
    styles: {
      type: Object,
      default: () => ({})
    },
    className: {
      type: String,
      default: ''
    },
    formItemProps: {
      type: Object,
      default: () => ({})
    },
    labelSlot: {
      type: String,
      default: ''
    },
    tips: {
      type: Object,
      default: () => ({})
    },
    popoverText: {
      type: String,
      default: ''
    },
    popoverWidth: {
      type: String,
      default: ''
    },
    inlineMessage: {
      type: Boolean,
      default: false
    }
  }
}
</script>
