<script>
// 为了一个组件能输出两个td，需要此包装组件
import components from './_import-components/sd-form-item-td-import'
import sdFormItemTdMixin from './sd-form/sd-form-item-td-mixin'
import tdInput from './sd-form/sd-form-item-td-input'
import tdNonInput from './sd-form/sd-form-item-td-non-input'
import tdLabel from './sd-form/sd-form-item-td-label'

/**
 * 带 label 和 input 框的表单项。与 SdFormItem 的差别是会渲染为两个 td，可以完全控制布局
 * @displayName SdFormItemTd 表单项
 */
export default {
  name: 'SdFormItemTd',
  functional: true,
  components: { ...components },
  mixins: [sdFormItemTdMixin],
  props: {
    /**
     * <p>input框的td占几个横向单元格。</p><p>与 inputTdAttrs:{colspan:3} 这种方式效果相同</p>
     */
    colspan: {
      type: Number,
      default: undefined,
    },
  },
  /**
   * 字段可编辑时的内容
   * @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 first = createElement(tdLabel, { props: context.props })

    // 把直接写的 colspan 搬运到 inputTdAttrs 里面
    if (context.props.colspan) {
      context.props.inputTdAttrs = {
        ...context.props.inputTdAttrs,
        colspan: context.props.colspan,
      }
    }
    const readAndEditSlot = context.scopedSlots['read-and-edit']
    let second
    if (context.data.attrs.transient) {
      // 仅前端展示的组件
      second = createElement(tdNonInput, {
        attrs: {
          field: context.data.attrs.field,
          ...context.props,
        },
      })
    } else {
      // 后端保存了的组件
      second = createElement(tdInput, {
        props: context.props,
        on: context.listeners,
        scopedSlots: {
          default: readAndEditSlot,
          read: readAndEditSlot,
          ...context.scopedSlots,
        },
      })
    }

    return [first, second]
  },
}
</script>

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