<template>
  <div>
    <Modal v-model="showStorageModal" :mask-closable="false" :width="800" class="zIndex-1100">
      <p slot="header">
        耗材入库
      </p>
      <div>
        <Form
          id="storage-form-single"
          ref="formObj"
          :model="formObj"
          :rules="ruleValidate"
          :label-width="80"
          inline
        >
          <Form-item label="入库数量" prop="stock" class="width-48">
            <InputNumber v-model.number="formObj.stock" :min="1" name="stock" style="width: 100%" />
          </Form-item>
          <Form-item label="单价" prop="price" class="width-48">
            <Input v-model="formObj.price" name="price" placeholder="请输入单价" /></Input>
          </Form-item>
          <Form-item label="有效期" prop="validDate" class="width-48">
            <DatePicker
              v-model="formObj.validDate"
              type="date"
              placeholder="请选择有效期"
              style="width: 100%"
              :options="optionDate"
              @on-change="_validDateChange"
            />
            <input name="validDate" type="hidden">
          </Form-item>
          <Form-item label="CAS编号" prop="casNum" class="width-48">
            <Input v-model="formObj.casNum" name="casNum" placeholder="请输入CAS编号" /></Input>
          </Form-item>
          <Form-item label="商品编码" prop="productCode" class="width-48">
            <Input v-model="formObj.productCode" name="productCode" placeholder="请输入商品编码" /></Input>
          </Form-item>
          <Form-item label="生产批号" prop="batchNum" class="width-48">
            <Input v-model="formObj.batchNum" name="batchNum" placeholder="请输入生产批号" /></Input>
          </Form-item>
          <Form-item label="精度范围" prop="accuracyRange" class="width-48">
            <Input v-model="formObj.accuracyRange" name="accuracyRange" placeholder="请输入精度范围" /></Input>
          </Form-item>
          <Form-item label="供应商" prop="supplier" class="width-48">
            <Input v-model="formObj.supplier" name="supplier" placeholder="请输入供应商" /></Input>
          </Form-item>
          <Form-item label="备注" prop="remark" class="width-48">
            <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: '',
  stock: 1,
  validDate: '',
  price: '',
  accuracyRange: '',
  casNum: '',
  productCode: '',
  batchNum: '',
  supplier: '',
  id: ''
}
export default {
  data() {
    const validateNumber = (rule, value, callback) => {
      // 只能输入正整数，不能输入小数
      const reg = /^\+?[1-9]\d*$/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('数量只能输入整数'))
      }
    }
    return {
      id: '',
      formObj: defVal,
      showStorageModal: false,
      ruleValidate: {
        stock: [
          {
            required: true,
            validator: validateNumber,
            trigger: 'blur',
            type: 'number'
          }
        ],
        validDate: [
          {
            required: true,
            message: '有效期不能为空',
            trigger: 'change',
            type: 'date'
          }
        ],
        price: [{ required: true, message: '单价不能为空', trigger: 'blur' }],
        batchNum: [
          { required: true, message: '生产批号不能为空', trigger: 'blur' }
        ]
      },
      optionDate: {
        // 今天之前的日期被禁用
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 86400000
        }
      }
    }
  },
  methods: {
    _resultChange(msg) {
      this.formObj = defVal
      this.showStorageModal = false
      this.$Message.success(msg)
      this.$emit('on-result-change')
    },
    _ok() {
      this.$refs.formObj.validate(valid => {
        if (valid) {
          // eslint-disable-next-line no-unused-vars
          const data = this.$serialize('storage-form-single')
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    _cancel() {
      this.showStorageModal = false
    },
    _open(id) {
      this.showStorageModal = true
      this.$refs.formObj.resetFields()
      this.formObj.id = id
      this.formObj.validDate = ''
      $('input[name=validDate]').val('')
    },
    _validDateChange(data) {
      $('input[name=validDate]').val(data)
    }
  }
}
</script>
