<template>
  <Modal v-model="detectionModal" :mask-closable="false" width="400">
    <p slot="header">
      填写检测值
    </p>
    <Form
      id="edit-form"
      ref="formObj"
      :model="formObj"
      :rules="ruleValidate"
      :label-width="80"
      onsubmit="return false"
      inline
    >
      <Form-item label="检测结果" prop="testValue" style="width: 100%;">
        <Input v-model="formObj.testValue" name="testValue" placeholder="请填写检测结果值" />
      </Form-item>
    </Form>
    <div slot="footer">
      <modal-footer ref="footerModal" :footer="footerList" @on-result-change="_footerResult" />
    </div>
  </Modal>
</template>

<script>
import { drugItem } from '../../../api'
const defVal = {
  testValue: ''
}
export default {
  name: 'DetectionValue',
  data() {
    return {
      detectionModal: false,
      formObj: defVal,
      ruleValidate: {
        testValue: [
          { required: true, message: '检测结果值不能为空!', trigger: 'blur' }
        ]
      },
      footerList: [
        { id: '', type: '', name: '取消' },
        { id: '', type: 'primary', name: '保存' }
      ],
      selectIds: []
    }
  },
  methods: {
    _open(ids) {
      this.detectionModal = true
      this.$refs.formObj.resetFields()
      this.formObj = Object.assign({}, {}, defVal)
      this._hideLoading()
      this.selectIds = ids
    },
    _footerResult(msg) {
      switch (msg) {
        case '取消':
          this._cancel()
          break
        case '保存':
          this._ok()
          break
      }
    },
    _ok(msg) {
      this.$refs.formObj.validate(valid => {
        if (valid) {
          const data = this.$serialize('edit-form')
          data.itemIds = this.selectIds.join(',')
          data.testValue = this.formObj.testValue
          this._save(data)
        } else {
          this.$Message.error('表单验证失败')
          this._hideLoading()
        }
      })
    },
    _cancel() {
      this.detectionModal = false
    },
    _resultChange(result, msg) {
      if (result) {
        this.detectionModal = false
        this.$Message.success(msg)
        this.$emit('on-result-change')
      }
      this._hideLoading()
    },
    _save: async function(data) {
      const result = await drugItem.testValue(data)
      this._resultChange(result, '提交成功')
    },
    _hideLoading() {
      this.$refs.footerModal._hideLoading()
    }
  }
}
</script>

<style scoped>
</style>
