<script>
import sdFormItemInputMixin from './sd-form/sd-form-item-input-mixin'
import sdFormItemInner from './sd-form/sd-form-item-inner'

/**
 * 带 label 和 input 框的表单项
 * @displayName SdFormItem 表单项
 */
export default {
  name: 'SdFormItem',
  functional: true,
  mixins: [sdFormItemInputMixin],
  /**
   * 字段可编辑时的内容
   * @slot default
   */
  /**
   * 字段只读时的内容
   * @slot read
   */
  /**
   * 字段可编辑+只读时都使用的内容
   * @slot read-and-edit
   * @binding {boolean} editable 是否为可编辑状态
   */
  /**
   * <p>转发给自动适配组件的插槽</p>
   * <p>比如 input-suffix 会作为 suffix 插槽，传递给内部的组件</p>
   * <p>8.0.5 新增</p>
   * @slot input-*
   */
  render(createElement, context) {
    const readAndEditSlot = context.scopedSlots['read-and-edit']
    return [
      createElement(sdFormItemInner, {
        props: context.props,
        on: context.listeners,
        scopedSlots: {
          default: readAndEditSlot,
          read: readAndEditSlot,
          ...context.scopedSlots,
        },
      }),
    ]
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>
