<template>
  <div class="out-container">
    <div
      class="input-container"
      :class="[textArea ? 'textArea' : '', size, isPassword ? 'isPassword' : '']">
      <input
        class="common-input"
        autocomplete="off"
        auto-complete="new-password"
        :autofill="false"
        :placeholder="placeholderVal"
        :value="modelValue"
        :type="inputType"
        @input="updateValue" />
      <span v-if="inputUnit.length > 0" class="input-unit">{{ inputUnit }}</span>
    </div>
    <slot name="suffix" />
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { getPx } from '@/utils';

const props = defineProps({
  placeholderVal: {
    type: String,
    default: '请输入'
  },
  modelValue: {
    type: String || Number,
    default: ''
  },
  inputType: {
    type: String,
    default: 'text'
  },
  textArea: {
    type: Boolean,
    default: false
  },
  isPassword: {
    type: Boolean,
    default: false
  },
  size: {
    type: String,
    default: 'small'
  },

  inputUnit: {
    type: String,
    default: ''
  }
});
const emit = defineEmits(['update:modelValue']);
const updateValue = (event) => {
  let value = event.target.value;
  if (props.inputType === '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);
  }
};
</script>
<style lang="less" scoped>
.out-container {
  display: flex;
  align-items: center;
  position: relative;
  .input-container {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 14px 10px;
    font-size: 40px;
    background: #ffffff;
    box-shadow: inset 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
    border: 1px solid #dcdcdc;
    border-radius: 4px 4px 4px 4px;
    &.small {
      width: 190px;
      height: 60px;
      font-size: 20px;
    }
    &.medium {
      width: 360px;
      height: 60px;
      font-size: 20px;
    }

    .common-input {
      border: 0;
      width: 100%;
    }
  }
  input::placeholder {
    color: #6666;
  }
  .textArea {
    height: 200px;
    width: 1379px;
    line-height: 30px;
  }
  .input-unit {
    margin: 0 15px;
    font-size: 20px;
    color: #b8b8b8;
  }
  .isPassword {
    input {
      -webkit-text-security: disc; /* Safari */
      text-security: disc; /* Firefox */
    }
  }
  input::-webkit-inner-spin-button  {
    display: none;
  }
}
</style>
