<template>
  <a-form-model-item
    v-show="!hiddenComputed"
    v-if="Array.isArray(name)"
    :class="{ 'sd-multi-input': true, 'sd-readonly': readOnly }"
    :label="labelComputed"
    :auto-link="false"
  >
    <!-- 多个input模式 -->
    <template v-if="!readOnly || fieldOption.componentForDisplay">
      <sd-form-item-inner
        :key="name[0]"
        :name="name[0]"
        :label="null"
        :input-props="Array.isArray($props.inputProps) ? $props.inputProps[0] : $props.inputProps"
        v-bind="$props"
        v-on="$listeners"
      />
      ~
      <sd-form-item-inner
        :key="name[1]"
        :name="name[1]"
        :label="null"
        :input-props="Array.isArray($props.inputProps) ? $props.inputProps[1] : $props.inputProps"
        v-bind="$props"
        :range-after="name[0]"
        v-on="$listeners"
      />
    </template>
    <template v-else>
      <sd-form-item-inner
        :key="name[0]"
        :name="name[0]"
        :label="null"
        :input-props="Array.isArray($props.inputProps) ? $props.inputProps[0] : $props.inputProps"
      />
      ~
      <sd-form-item-inner
        :key="name[1]"
        :name="name[1]"
        :label="null"
        :input-props="Array.isArray($props.inputProps) ? $props.inputProps[0] : $props.inputProps"
      />
    </template>
    <template v-if="fieldDescription" v-slot:extra>
      <sd-form-item-help
        :html="fieldDescription"
        :no-divider="sdGet(field, 'attrFD?.cid') === 'sd-description'"
      />
    </template>
  </a-form-model-item>
  <a-form-model-item
    v-else
    v-show="!hiddenComputed"
    :class="{
      'sd-readonly': readOnly,
      'sd-no-label': !labelComputed,
      [$style.selectorWapper]: selector,
    }"
    :prop="name"
    :label="labelComputed"
  >
    <!-- 单个input模式 -->
    <template v-if="!readOnly || fieldOption.componentForDisplay">
      <!-- @slot 字段的 input 框 -->
      <slot :name="readOnly ? 'read' : 'default'" :editable="!readOnly">
        <component
          :is="readOnly ? fieldOption.componentForDisplay : fieldOption.component"
          v-model="model[name]"
          v-bind="fieldProps"
          :read-only="typeof fieldProps.readOnly === 'undefined' ? readOnly : fieldProps.readOnly"
          v-on="fieldOption.on"
        >
          <!-- 把input-开头的slot，转发给内部的组件 -->
          <template v-for="slot in inputSlots" v-slot:[slot]="scope">
            <slot :name="'input-' + slot" v-bind="scope" />
          </template>
        </component>
      </slot>
    </template>
    <template v-else>
      <slot name="read" :editable="false">
        <sd-form-display-text :value="displayValue || model[name]" />
      </slot>
    </template>
    <portal-target :name="'sd-selector-' + name + SdFormContext._uid" slim />
    <template v-if="fieldDescription" v-slot:extra>
      <sd-form-item-help
        :html="fieldDescription"
        :no-divider="sdGet(field, 'attrFD?.cid') === 'sd-description'"
      />
    </template>
  </a-form-model-item>
</template>

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

export default {
  name: 'SdFormItemInner',
  components,
  mixins: [sdFormItemInputMixin],
}
</script>

<style module lang="scss">
@use "@/common/components/sd-web-print.scss" as print;
@include print.wrapper {
  :global(.ant-row)::before,
  :global(.ant-form-item-control)::before {
    display: none;
  }
}
.selector-wapper {
  :global(.ant-form-item-children) {
    display: flex;
    > *:not([class*='selector-btn']) {
      flex: 1;
    }
  }
}
</style>
