<template>
  <div>
    <Modal v-model="showModal" v-drag :mask-closable="false">
      <p slot="header">填写存放信息</p>
      <div>
        <Form id="storage-location-form" ref="formObj" :model="formObj" :rules="ruleValidate" :label-width="100">
          <Form-item label="保存容器:" prop="keepContainer">
            <AutoCompletes v-model="formObj.keepContainer" :downData="containerList"
                           @on-result-change="_containerChange" name="keepContainer"  placeholder="输入或选择保存容器"
            ></AutoCompletes>
          </Form-item>
          <Form-item label="制备数量">
            <Input v-model="formObj.quantity" clearable placeholder="请输入备样数量"></Input>
          </Form-item>
          <Form-item label="留存位置">
            <Input v-model="formObj.keepLocation" clearable placeholder="请输入留存位置"></Input>
          </Form-item>
        </Form>
      </div>
      <div slot="footer">
        <modal-footer ref="footerModal" @on-result-change="_footerResult" :footer="footerList"></modal-footer>
      </div>
    </Modal>
  </div>
</template>
<script>
import { soilSample } from '../../../api'
import AutoCompletes from '../../../components/base/AutoCompletes'

export default {
  components: { AutoCompletes },
  data() {
    return {
      ids: [], // 委托ids
      showModal: false,
      formObj: {},
      ruleValidate: {
        backupLocation: [
          { required: true, message: '备样位置不能为空', trigger: 'blur' }
        ]
      },
      footerList: [
        { id: '', name: '取消', type: '' },
        { id: '', name: '保存', type: 'primary' }
      ],
      containerList: [],
      locList: [],
      backupUserList: [],
      sampleUnit: ''
    }
  },
  mounted() {
    this._getContainerList()
  },
  methods: {
    _getContainerList: async function() {
      const result = await soilSample.getDictList('保存容器')
      if (result) {
        for (let i = 0; i < result.length; i++) {
          this.containerList.push(result[i].name)
        }
      }
    },
    _containerChange(msg, data) {
      switch (msg) {
        case 'select':
          this.formObj.keepContainer = data
          break
        case 'query':
          this.formObj.keepContainer = data
          break
      }
    },
    _locChange(msg, data) {
      switch (msg) {
        case 'select':
          this.formObj.backupPlace = data.backupPlace
          this._getCondition(data.backupPlace)
          break
        case 'query':
          this.formObj.backupPlace = data.backupPlace
          this._getLocList(data.backupPlace)
          break
      }
    },
    selCondi(data) {
      this.$forceUpdate()
      this.formObj.conditions = data
    },
    selUser(data) {
      this.$forceUpdate()
      if (data) {
        for (let i = 0; i < this.backupUserList.length; i++) {
          if (this.backupUserList[i].id === data) {
            this.formObj.backupUser = this.backupUserList[i].realname
          }
        }
      } else {
        this.getPage.records[this.currentIndex].backupUser = ''
      }
      this.formObj.backupUserId = data
    },
    // 存储条件 回调
    _locChangeCondition(msg, data) {
      switch (msg) {
        case 'select':
          this.formObj.storageCondition = data.name
          this._getLocCondition(data.name)
          break
        case 'query':
          this.formObj.storageCondition = data.name
          this._getLocConditionList(data.name)
          break
      }
    },
    _footerResult(name) {
      switch (name) {
        case '取消':
          this._cancel()
          break
        case '保存':
          this._ok()
          break
      }
    },
    _open(data) {
      this.showModal = true
      this.formObj = this.$resetFields(this.formObj)
      this.sampleUnit = ''
      this.$refs.footerModal._hideLoading()
      this.ids = data
      // 循环遍历数据
    },
    _getConditionList: async function() {
      const result = await soilSample.getDictList('存储条件')
      if (result) {
        this.conditionList = result
      }
    },
    _getUserList: async function() {
      const result = await soilSample.getUserList()
      if (result) {
        console.log(result)
        this.backupUserList = result.records
      }
    },
    //
    _dateChange(data) {
      this.formObj.endDate = data
    },
    _cancel() {
      this.showModal = false
      this.$refs.footerModal._hideLoading()
    },
    _hideLoading() {
      this.$refs.footerModal._hideLoading()
    },
    _ok() {
      this.$refs.formObj.validate(valid => {
        if (valid) {
          const data = this.formObj
          data.ids = this.ids.join(',')
          this._saveInfo(data)
        } else {
          this.$Message.error('表单验证失败!')
          this.$refs.footerModal._hideLoading()
        }
      })
    },
    _saveInfo: async function(data) {
      const result = await soilSample.bathUpdateSurplusInfo(data)
      if (result) {
        this.$Message.success('保存成功')
        this.$emit('on-result-change')
        this.showModal = false
      }
    }
  }
}
</script>
