<template>
  <VxeInput id="gdh" ref="gdhRef" v-model="gdh" placeholder="工单号" @change="gdhChange" @blur="blurEvent" clearable />
</template>

<script>
import {EventBus} from "@/event-bus";

export default {
  name: 'GdhInput',
  data(){
    return {
      gdh:'',
    }
  },
  mounted(){
    this.$refs.gdhRef.focus();
    EventBus.$on('removeGdh', ()=>{
      this.gdh=''
    })
  },
  methods: {
    blurEvent(){
      this.$refs.gdhRef.focus();
    },
    gdhChange(){
      if (this.gdh.length===10){
        this.$nextTick(()=>{
          EventBus.$emit('gdh', {
            gdh:this.gdh
          })
        })
      }
    }
  }
}
</script>

<style scoped>
#gdh{
  width:200px;
  position: absolute;
  top:8px;
  right:30px;
}
</style>
