<template>
  <td
    v-if="!readOnly || fieldOption.componentForDisplay"
    v-show="!hiddenComputed || keepHiddenCell"
    v-bind="inputTdAttrs"
    class="ant-form-item-control-wrapper"
  >
    <div v-show="!hiddenComputed" :class="{ [$style.selectorWapper]: selector }">
      <!-- 可编辑模式的td -->
      <a-form-model-item
        v-if="Array.isArray(name)"
        :class="{ 'sd-readonly': readOnly, 'sd-multi-input': true }"
        :auto-link="false"
      >
        <sd-form-item
          :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
          :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 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 :prop="name" :class="{ 'sd-readonly': readOnly }">
        <slot :name="readOnly ? 'read' : 'default'" :editable="!readOnly">
          <component
            :is="readOnly ? fieldOption.componentForDisplay : fieldOption.component"
            v-model="model[name]"
            v-bind="fieldProps"
            :read-only="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 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>
      <portal-target :name="'sd-selector-' + name + SdFormContext._uid" slim />
    </div>
  </td>
  <td
    v-else
    v-show="!hiddenComputed || keepHiddenCell"
    v-bind="inputTdAttrs"
    class="ant-form-item-control-wrapper sd-readonly"
  >
    <div v-show="!hiddenComputed" :class="{ [$style.selectorWapper]: selector }">
      <!-- 只读模式的td -->
      <div>
        <template v-if="Array.isArray(name)">
          <div class="sd-multi-input ">
            <sd-form-item
              :key="name[0]"
              :name="name[0]"
              :label="null"
              :input-props="
                Array.isArray($props.inputProps) ? $props.inputProps[0] : $props.inputProps
              "
            />
            ~
            <sd-form-item
              :key="name[1]"
              :name="name[1]"
              :label="null"
              :input-props="
                Array.isArray($props.inputProps) ? $props.inputProps[0] : $props.inputProps
              "
            />
          </div>
        </template>
        <template v-else>
          <slot name="read" :editable="false">
            <sd-form-display-text :value="displayValue || model[name]" />
          </slot>
        </template>
        <sd-form-item-help
          :html="fieldDescription"
          :no-divider="sdGet(field, 'attrFD?.cid') === 'sd-description'"
        />
      </div>
      <portal-target :name="'sd-selector-' + name + SdFormContext._uid" slim />
    </div>
  </td>
</template>

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

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

<style module lang="scss">
@use '@/common/design' as *;
.selector-wapper {
  display: flex;
  align-items: center;
  > div:first-child {
    width: 100%;
  }
}
</style>
