<template>
  <view class="relative flex items-center px-42 bg-back rounded-40 h-104 box-border" :class="customClass">
    <input class="flex-1 h-full text-30 text-fore-subcontent" v-model="modelValue" :type="type" :password="password" :maxlength="maxlength"
      :placeholder="placeholder" placeholder-class="text-fore-light" />
    <view>
      <slot></slot>
    </view>
  </view>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue';

const modelValue = defineModel<number | string>('modelValue', {
  type: [String, Number] as PropType<string | number>,
  default: ''
});

interface Props {
  type?: 'text' | 'number' | 'idcard' | 'password' | 'digit' | 'safe-password' | 'nickname';
  placeholder?: string;
  maxlength?: number;
  customClass?: string;
  password?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  type: 'text',
  placeholder: '请输入',
  maxlength: -1,
  customClass: ''
});
</script>
<style lang="scss" scoped></style>