<template>
  <div>
    <el-form-item
      v-if="keys.includes('length')"
      label="长度"
      label-position="left"
      label-width="60px"
    >
      <input-number
        placeholder="请输入"
        v-model="length"
        controls-position="right"
        style="width: 100%"
        v-bind="componentProps?.['length']"
      />
    </el-form-item>
  </div>
</template>

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

defineProps<{
  keys: string[]
  componentProps: {
    [key: string]: any
  }
}>()

const modelValue = defineModel<{
  [key: string]: any
}>('modelValue')

// length
const length = computed({
  get: () => modelValue.value?.length,
  set: (val: number) => {
    if (modelValue.value) {
      modelValue.value.length = val
    }
  }
})
</script>

<style scoped></style>
