<template>
  <div>
    <Modal v-model="showScanModal" :mask-closable="false" width="700" :styles="{marginTop: '-85px'}">
      <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, index) in scanInfo" :key="index">
                  {{ item }}
                </li>
              </ul>
            </div>
          </Form-item>
        </Form>
        <h3 style="padding-left: 80px;">已接收: {{scanInfo.length}} 批</h3>
      </div>
      <div slot="footer">
        <modal-footer ref="footerModal" :footer="footerList" @on-result-change="_footerResult" />
      </div>
    </Modal>
  </div>
</template>

<script>
import { drugSample } from '../../api'

export default {
  data() {
    return {
      modalTitle: '扫码接收',
      showScanModal: false,
      scanInfo: [],
      num: '',
      uri: '',
      footerList: [{ id: '', type: '', name: '关闭' }]
    }
  },
  methods: {
    // 接口值，接口文件
    _open(uri) {
      this.showScanModal = true
      this.num = ''
      this.scanInfo = []
      this.uri = uri
      this._autoFocus()
    },
    _autoFocus() {
      this.$nextTick(() => {
        this.$refs.inputFocus.focus()
      })
    },
    async _numBlur() {
      this.num = this.num.split(',')[0]
      // 扫码接口
      const result = await drugSample.scanSubmitReceive(this.num)
      if (result) {
        this.scanInfo.unshift('编号' + this.num + '接收成功!')
        this.num = ''
        this.$emit('on-result-change')
      } else {
        this.num = ''
      }
      this._autoFocus()
    },
    _footerResult(msg) {
      this._hideLoading()
      if (msg === '关闭') this.showScanModal = false
    },
    _hideLoading() {
      this.$refs.footerModal._hideLoading()
    }
  }
}
</script>

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