<script lang="ts" setup>
import { scanCode } from '@/utils/tools'

const props = defineProps({
  modelValue: String,
  placeholder: {
    type: String,
    default: '请扫描或输入车辆编号',
  },
  clearable: {
    type: Boolean,
    default: false,
  },
})
const emit = defineEmits(['update:modelValue', 'scan-change'])

const inputCodeValue = ref(props.modelValue)

function onScan() {
  scanCode({
    success: (res: any) => {
      const scanCode = res.code
      emit('scan-change', scanCode)
    },
    fail: () => {},
  })
}
function handleConfirm() {
  emit('scan-change', inputCodeValue.value)
}

watch(() => props.modelValue, (newVal) => {
  inputCodeValue.value = newVal
})
watch(inputCodeValue, (newVal) => {
  emit('update:modelValue', newVal)
})
</script>

<template>
  <uv-input
    v-model="inputCodeValue"
    :placeholder="props.placeholder"
    :clearable="props.clearable"
    :custom-style="{
      backgroundColor: '#ffffff',
    }"
    @blur="handleConfirm"
  >
    <template #suffix>
      <uv-icon size="22" name="scan" @click="onScan" />
    </template>
  </uv-input>
</template>

<style lang="scss" scoped>
//
</style>
