<template>
  <el-col :span="colSpan">
    <el-form-item :label="label" :prop="prop">
      <el-input v-bind="$attrs" :placeholder="computedPlaceholder">
        <template v-for="(_, name) in $slots" #[name]="slotProps">
          <slot :name="name" v-bind="slotProps"></slot>
        </template>
      </el-input>
    </el-form-item>
  </el-col>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

interface Props {
  label?: string
  prop?: string
  colSpan?: number
  placeholder?: string
}

const props = withDefaults(defineProps<Props>(), {
  colSpan: 24,
  placeholder: ''
})

const computedPlaceholder = computed(() => {
  return props.placeholder || (props.label ? `请输入${props.label}` : '')
})
</script>
