<template>
  <div class="out-container">
    <div class="input-container" :style="container_style">
      <input
        class="common-input"
        :placeholder="placeholderVal"
        :value="modelValue"
        :type="inputType"
        @input="updateValue" />
    </div>
    <slot name="suffix" />
  </div>
</template>

<script setup>
import { computed } from 'vue';
const props = defineProps({
  placeholderVal: {
    type: String,
    default: '请输入'
  },
  modelValue: {
    type: String || Number,
    default: ''
  },
  inputT: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '315'
  },
  inputType: {
    type: String,
    default: 'text'
  }
});
const emit = defineEmits(['update:modelValue']);
const updateValue = (event) => {
  let value = event.target.value;
  if (props.inputT === 'number') {
    // 移除非法字符，只允许输入数字和小数点
    const validNumber = /^-?\d*\.?\d*$/;
    if (validNumber.test(value)) {
      emit('update:modelValue', value);
    } else {
      emit('update:modelValue', ''); // 清空输入
      event.target.value = ''; // 直接更新输入框的显示值
    }
  } else {
    emit('update:modelValue', value);
  }
};
const container_style = computed(() => `width:${props.width}px;`);
</script>
<style lang="less" scoped>
.out-container {
  display: flex;
  align-items: center;
  position: relative;
  .input-container {
    width: 315px;
    height: 44px;
    border: 1px solid #dcdcdc;
    border-radius: 4px 4px 4px 4px;
    background: #ffffff;
    display: flex;
    align-items: center;
    padding: 14px 0;
    font-size: 16px;
    .common-input {
      border: 0;
      width: 100%;
    }
  }
}
</style>
