<template>
  <el-input v-model="scanCode" placeholder="Please input" class="scanInput" @keyup.enter="enter">
    <template #prefix>
      <img src="@/assets/icons/shaoma.svg" />
    </template>
  </el-input>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
const props = defineProps({
  inputValue: {
    required: true,
    type: String,
  },
});
const emit = defineEmits(["setinputvalue", "enterfnc"]);
const scanCode = ref("");
const enter = () => {
  emit("enterfnc");
};
onMounted(() => {
  scanCode.value = props.inputValue;
});

watch(scanCode, (newVal) => {
  emit("setinputvalue", newVal);
});
</script>

<style lang="scss" scoped>
.scanInput {
  height: 80px;
  border-radius: 76px;
  overflow: hidden;
  border: 1px solid #00000025;
  font-size: $f24;
  color: #00000080;

  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
    cursor: default;

    .el-input__inner {
      cursor: default !important;
    }
  }

  :deep(.el-input-group__prepend) {
    border: 0px;
    background-color: white;
  }
}
</style>
