<template>
  <div>
    <Modal v-model="showScanModal" :mask-closable="false" width="700">
      <p slot="header">
        {{ modalTitle }}
      </p>
      <div>
        <Form :label-width="80" onsubmit="return false">
          <Form-item label="样品编号" prop="num">
            <Input
              ref="inputFocus"
              v-model="num"
              placeholder="请将鼠标聚焦在此，并保持英文输入状态"
              style="width: 100%;"
              @submit.native.prevent
              @on-enter="_numBlur"
            ></Input>
          </Form-item>
          <Form-item label="扫码信息">
            <div class="scanInfo">
              <ul>
                <li v-for="item in scanInfo" :key="item">
                  {{ item }}
                </li>
              </ul>
            </div>
          </Form-item>
        </Form>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      modalTitle: '扫码接收',
      showScanModal: false,
      scanInfo: [],
      num: '',
      uri: ''
    }
  },
  methods: {
    // 接口值，接口文件
    _open(uri) {
      this.showScanModal = true
      this.num = ''
      this.scanInfo = []
      this.uri = uri
      this._autoFocus()
    },
    _autoFocus() {
      this.$nextTick(() => {
        this.$refs.inputFocus.focus()
      })
    },
    _numBlur() {
      const num = this.num.split(',')[0]
      this.num = num.substr(0, this.num.split(',')[0].length - 3)
      console.log(this.num)
      // 扫码接口
      // const result = await sampleReceive.labScanReceive(this.num)
      // if (result) {
      //   this.scanInfo.push('编号' + this.num + '接收成功!')
      //   this.num = ''
      //   this.$emit('on-result-change')
      // } else {
      //   this.num = ''
      // }
      this._autoFocus()
    }
  }
}
</script>

<style scoped>
.scanInfo {
  width: 100%;
  height: 400px;
  border: 1px solid #dddee1;
  border-radius: 4px;
  color: #495060;
  padding: 4px 7px;
}
</style>
