<template>
  <div>
    <Modal v-model="showSubmitModal" :mask-closable="false" @on-visible-change="_visibleChange" width="700">
      <p slot="header">{{modalTitle}}</p>
      <div>
        <Form :label-width="80" onsubmit="return false">
          <Form-item label="样品编号" prop="num">
            <Input ref="inputFocus" @submit.native.prevent @on-enter="_numBlur" v-model="num"
                   placeholder="请将鼠标聚焦在此，并保持英文输入状态" style="width:100%"></Input>
          </Form-item>
          <Form-item label="扫码信息">
            <div class="scanInfo">
              <ul>
                <li v-for="(item,index) in scanInfo" v-bind:key="index">{{item}}</li>
              </ul>
            </div>
          </Form-item>
        </Form>
      </div>
    </Modal>
  </div>
</template>
<script>
/* 扫码接收、扫码发放 */
import { soilSample } from '../../../api'

export default {
  components: {},
  data() {
    return {
      modalTitle: '',
      showSubmitModal: false,
      scanInfo: [],
      num: '',
      formObj: {
        personId: '',
        person: ''
      }
    }
  },
  methods: {
    _open(title, data) {
      if (title) {
        this.modalTitle = title
      } else {
        this.modalTitle = '扫码接收'
      }
      if (data) {
        this.formObj.person = data.realname
        this.formObj.personId = data.userId
      } else {
        this.formObj = this.$serializeFormSearch(this.formObj)
      }
      this.showSubmitModal = true
      this.num = ''
      this.scanInfo = []
      this._autoFocus()
    },
    _autoFocus() {
      this.$nextTick(() => {
        this.$refs.inputFocus.focus()
      })
    },
    _cancel() {
      this.showSubmitModal = false
    },
    _numBlur: async function() {
      // 扫码发放
      const param = {}
      Object.assign(param, this.formObj, { num: this.num })
      const result = await soilSample.scanTakeSample(this.num)
      if (result) {
        console.log(result)
        this.num = ''
        this.$Message.success('领样成功')
        // this._resultChange(' 领样')
      }
      // this.$store
      //   .dispatch('FoodSample/scanSend', this.$serializeFormSearch(param))
      //   .then(() => {
      //     this._resultChange(' 发放')
      //   })
      this._autoFocus()
    },
    _resultChange(msg) {
      const returnNum = this.$store.state.FoodSample.success
      if (returnNum) {
        this.scanInfo.push('编号 ' + returnNum + msg + '成功！')
        this.num = ''
      } else {
        this.num = ''
      }
    },
    // 关闭弹框，刷新界面
    _visibleChange(data) {
      this.$emit('on-result-change')
    }
  }
}
</script>
<style>
.scanInfo {
  overflow: auto;
}
</style>
