<template>
  <div>
    <Modal v-model="showBackModal" :mask-closable="false">
      <p slot="header">{{modalTitle}}</p>
      <div>
        <Form ref="formObj" :model="formObj" :rules="ruleValidate" :label-width="90">
          <Form-item label="检测值:" prop="value">
            <Input v-model="formObj.value" placeholder="请输入检测值"/>
          </Form-item>
        </Form>
      </div>
      <div slot="footer">
        <ModalFooter ref="footerModal" @on-result-change="_footerResult" :footer="footerList"></ModalFooter>
      </div>
    </Modal>
  </div>
</template>
<script>
/**
 * 退回原因
 */
import ModalFooter from '../../../components/base/modalFooter'
import { meterItem } from '../../../api'
export default {
  components: {
    ModalFooter
  },
  data() {
    return {
      ids: [], // 合同ids
      modalTitle: '批量填写',
      showBackModal: false,
      formObj: {
        value: '',
        unit: '',
        detection: '',
        detectionUnit: '',
        analysisDate: ''
      },
      path: '',
      ruleValidate: {
        // value: [{required: true, message: '检测值不能为空', trigger: 'blur'}],
      },
      footerList: [
        { id: '', name: '取消', type: '' },
        { id: '', name: '保存', type: 'primary' }
      ],
      unitList: [],
      unitListTemp: []
    }
  },
  methods: {
    // 分析时间的回显
    _analysisResult(msg, data) {
      switch (msg) {
        case 'selectDate':
          this.$set(this.formObj, 'analysisDate', data)
          break
      }
    },
    _open(ids) {
      this.ids = ids // 合同id
      this.showBackModal = true
      this.formObj = this.$resetFields(this.formObj)
      this.$refs.footerModal._hideLoading()
    },
    _unitChange(msg, data) {
      this.formObj.unit = data.name
    },
    _footerResult(name) {
      switch (name) {
        case '取消':
          this._cancel()
          break
        case '保存':
          this._ok()
          break
      }
    },
    _cancel() {
      this.showBackModal = false
      this.$refs.footerModal._hideLoading()
    },
    _ok() {
      this.$refs.formObj.validate(valid => {
        if (valid) {
          const data = {}
          data.itemIds = this.ids.join(',')
          this.$extend(data, { testValue: this.formObj.value })
          console.log(data)
          this._testValue(data)
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    _testValue: async function(data) {
      console.log(data)
      const result = await meterItem.testValue(data)
      if (result) {
        this.$Message.success('填写成功!')
        this.showBackModal = false
        this.$emit('on-result-change')
      }
    }
  }
}
</script>
