<template>
  <div id="input-num">
    <p>{{ params.name }}</p>
    <input type="text" :placeholder="params.placeholder" @input="handleChange" :disabled="params.disabled" />
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, onUnmounted } from "vue";
const params = defineProps({
  name: String,
  placeholder: String,
  disabled: Boolean,
});
const emit = defineEmits(["inputValue"]);
let timer = null;
function handleChange(e) {
  if (timer) clearTimeout(timer);
  timer = setTimeout(() => {
    emit("inputValue", e.target.value);
  }, 200);
}
onUnmounted(handleUnmounted);
function handleUnmounted() {
  clearInterval(timer);
}
</script>

<style lang="scss" scoped>
#input-num {
  margin: 40px 30px 0px 30px;

  P {
    width: 130px;
    height: 35px;
    font-size: 26px;
    font-family: MicrosoftYaHei;
    color: #ffffff;
    line-height: 35px;
  }

  input {
    width: 284px;
    height: 51px;
    border: 2px solid #0f82af;
    background: transparent;
    margin-top: 20px;
    font-size: 26px;
    font-family: MicrosoftYaHei;
    color: #ffffff;
    line-height: 35px;
    padding: 0px 10px;
    overflow: hidden;
  }

  ::placeholder {
    color: #0f82af;
  }
}
</style>
