<template>
  <div>
    <Modal v-model="showStorageModal" :mask-closable="false" class="zIndex-1100">
      <p slot="header">
        结束出库单
      </p>
      <div>
        <Form id="storage-form-end" ref="formObj" :model="formObj" :rules="ruleValidate" :label-width="80">
          <Form-item label="备注" prop="remark">
            <input v-model="formObj.id" name="id" hidden>
            <Input v-model="formObj.remark" name="remark" placeholder="请输入备注" /></Input>
          </Form-item>
        </Form>
      </div>
      <div slot="footer">
        <Button type="ghost" style="margin-left: 8px" @click="_cancel">
          取消
        </Button>
        <Button type="primary" @click="_ok">
          提交
        </Button>
      </div>
    </Modal>
  </div>
</template>
<script>
/**
 * 添加编辑试验耗材库存表
 */
const defVal = {
  remark: '',
  id: ''
}
export default {
  data() {
    return {
      id: '',
      formObj: defVal,
      showStorageModal: false,
      ruleValidate: {
        remark: [{ required: true, trigger: 'blur', message: '备注不能为空' }]
      }
    }
  },
  methods: {
    _resultChange(msg) {
      if (this.$store.state.LmsChemicalRelDelivery.success) {
        this.formObj = defVal
        this.showStorageModal = false
        this.$Message.success(msg)
        this.$emit('on-result-change')
      }
    },
    _ok() {
      this.$refs.formObj.validate(valid => {
        if (valid) {
          const data = this.$serialize('storage-form-end')
          this.$store
            .dispatch('LmsChemicalRelDelivery/endPurchase', data)
            .then(() => {
              this._resultChange('操作成功!')
            })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    _cancel() {
      this.showStorageModal = false
    },
    _open(id) {
      this.showStorageModal = true
      this.$refs.formObj.resetFields()
      this.formObj.id = id
    }
  }
}
</script>
